JQuery Mobile - Affichage d'Un Formulaire HTML Inline

Objectif: Affichage de la zone de texte et le bouton de validation sur la même ligne en Jquery Mobile.

Problème: Ils ne seront pas affichées sur la même ligne.

J'ai essayé de nombreuses fois pour afficher la zone de texte et le bouton de validation sur la même ligne, mais ça ne fonctionne jamais. Voici mon code et les combinaisons que j'ai utilisé...

<form method="GET" style="display: inline-block;">
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
</form>

Qui n'ont pas de travail.

<form method="GET">
   <span>
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
   </span>
</form>

Ni fait.

<form method="GET">
      <ul style="display: inline; list-style-type: none;">
          <li style="display: inline;"><input type="text" name="id" value="Other"></li>
          <li style="display: inline;"><input type="submit" data-type="button" value="Add"></li>
       </ul>
</form>

Ce que je fais mal et comment puis-je atteindre mon objectif?

Merci et joyeux Noël!

OriginalL'auteur Joe | 2011-12-22

  1. 14

    Serait une structure de Grille de travail?

    HTML:

    <fieldset class="ui-grid-a">
    <div class="ui-block-a">
            <input type="text" name="id" value="Other">
    </div>
    <div class="ui-block-b">
            <input type="submit" data-type="button" data-icon="plus" value="Add">
    </div>
</fieldset>
    Grilles semblent faire respecter l'égalité des tailles de tous les éléments de la grille. Que faire si je veux que ma zone de saisie pour prendre 75% de l'espace, et le bouton à côté de lui prendre 25% de l'espace?
    <div class="ui-bloc-un" style="width:75%"> <div class="ui-bloc b" style="width:25%">
    Vous pouvez également utiliser l'interface utilisateur-champ-contient: <div class="ui-champ contient"></div> avec une étiquette et d'entrée en son sein.

    OriginalL'auteur Phill Pafford

  2. 6

    Vous pouvez utiliser une requête de média pour afficher le bouton en ligne avec le texte d'entrée pour les grandes largeurs d'écran et afficher la zone de texte sur le bouton "soumettre" pour les petites largeurs d'écran:

    form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;
}
@media all and (max-width:480px) {
    form .ui-input-text {
        width   : 100%;
    }
    form > .ui-btn {
        width   : 100%;
    }
}

    Voici une démo: http://jsfiddle.net/fmJGR/

    Je suis en utilisant les classes ajouté par jQuery Mobile pour cibler les éléments, c'est surtout utile pour travailler avec le bouton soumettre, puisque c'est une structure HTML après jQuery Mobile initialise il ne ressemble pas à la per-initialisé élément.

    Voici ce que le bouton envoyer du HTML se transforme en après jQuery Mobile initialise:

    <div data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
        <span class="ui-btn-text">Add</span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
    </span>
    <input type="submit" value="Add" data-icon="plus" data-type="button" class="ui-btn-hidden" aria-disabled="false">
</div>

    Si vous souhaitez soutenir IE7, vous devez ajouter le code suivant parce que IE7 ne comprends pas display : inline-block:

    form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}

    OriginalL'auteur Jasper

  3. 0

    Les ajouter dans deux colonnes séparées au sein d'une ligne de tableau HTML fonctionne également.

    OriginalL'auteur Harsha