Prise de jquery mobile textfield sur la même ligne que le texte

Est-il un moyen pour effectuer les opérations suivantes avec jQuery Mobile?

Hello [________________________]

au lieu de ce que jQuery Mobile actuellement, qui est de mettre ces deux sur plusieurs lignes:

Hello

[________________________]

Actuellement, je suis entrain de créer mon texte et textinput comme suit:

<div id="customTagEntryDiv">
  <span id="userTag">Hello</span>
  <input type="text" name="customTagField" id="customTagField" value=""  />
  </div>

InformationsquelleAutor Apollo | 2012-09-17

jquery-mobile

17

Oui, vous pouvez, vous devez utiliser le champ des conteneurs, avec data-role="fieldcontain".

Par exemple:
```
<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>  
```
Avec le code ci-dessus, vous devriez obtenir quelque chose comme ceci:

De Saisie De Texte: [____________]

et non pas quelque chose comme ceci:

De Saisie De Texte:

[____________]

Vous pouvez utiliser ce "format" pour de nombreux types d'éléments: des saisies de texte, boutons radio, sélectionner les menus, etc.
Cependant, je pense que si votre texte est trop long, dans ce cas, l'élément peut passer automatiquement à la ligne suivante...

Donné votre exemple, vous pouvez vouloir essayer quelque chose comme cela:
```
<div id="customTagEntryDiv" data-role="fieldcontain">
    <label id="userTag" for="customTagField">Hello</label>
    <input type="text" name="customTagField" id="customTagField" value=""  />
</div> 
```
Vérifier la doc en ligne pour plus d'informations: http://jquerymobile.com/demos/1.1.1/docs/forms/textinputs/

Espère que cette aide.
- Merci pour ce - a très bien fonctionné pour mes formulaires!
- Note: data-role="fieldcontain" has been deprecated in 1.4 and will be removed in 1.5.
- fieldcontain ne fonctionne pas pour moi, la saisie de texte encore renvoyé à la ligne suivante. Et avec elle depracated, quelle est la bonne approche?
- utilisation class="ui-field-contain" sur le div.
InformationsquelleAutor Littm

float:left fera l'affaire. Voir cet exemple avec des lignes de normal et mini de la taille des champs:

http://jsfiddle.net/den232/WzH3Y/

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">

<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>


    <div  class='floatleft textwidth'>
      <input type="text" placeholder="left" class='biginputheight'></input>
    </div>  

    <div  class='floatright textwidth'>
      <input type="text" placeholder="right" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>


    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  


    <div class='floatright closespacing'>
      <div  class='floatright closespacing'>    
        e3 Text<br>on right
      </div>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->

InformationsquelleAutor den232

Cela ne fonctionne plus:

<div data-role="fieldcontain"></div>

Une vieille table fonctionne très bien:

<table>
    <tr>
        <td>Label #1:</td>
        <td><input type="text"></td>
    </tr>
</table>

InformationsquelleAutor HerrimanCoder

Vous devez vous connecter pour publier un commentaire.