jQuery Mobile - champ de saisie sur deux colonnes en trois colonnes pour l'interface utilisateur de la grille de mise en page?

Comment puis-je ajouter un champ de saisie de texte sur deux colonnes en trois colonnes pour l'interface utilisateur de la grille de mise en page (33/33/33%)?

L'objectif est que le champ de saisie de texte prend 66% et la troisième colonne occupe du reste.

Exemple de l'interface utilisateur-réseau à partir de jquery mobile:

<div class="ui-grid-b">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-a -->
InformationsquelleAutor Michael Schmidt | 2011-04-12
  1. 38

    il suffit de remplacer la propriété width:

    .ui-grid-a .ui-block-a { width: 65% }
.ui-grid-a .ui-block-b { width: 35%; }

    http://forum.jquery.com/topic/unequal-layout-grids-columns-or-colspan-like-behavior

    • C'est le niveau minimum absolu de la spécificité, vous aurez besoin de remplacer le JQM CSS. Vous risquez de rencontrer des problèmes si JQM charge une autre page où vous vous attendez à 50/50 comportement (le CSS ne pas recharger si JQM est en mesure d'Ajax la nouvelle page dans les DOM). Je vous recommande aimerais ajouter une autre classe à la div de blocs que vous souhaitez modifier les largeurs de: .l'interface utilisateur-réseau-un .ui-bloc-un.principal et .l'interface utilisateur-réseau-un .ui-bloc-b.côté, par exemple. Maintenant, vous pouvez utiliser l'interface utilisateur-bloc-a et b à l'intérieur de l'interface utilisateur-réseau-une est ailleurs et toujours obtenir de 50/50.
    InformationsquelleAutor Michael Schmidt
  2. 1

    Vous pouvez utiliser:

    <div class="ui-grid-b">
  <div class="ui-block-a ui-block-span2">
    Block A+B
  </div>
  <div class="ui-block-c">
    Block C
  </div>
</div>

    Vous devez ajouter le CSS ci-dessous pour atteindre cet objectif. Cela pourrait être utilisé avec n'importe quel jqm de la grille de mise en page, simplement en ajoutant la classe ui-bloc-durée* le votre div blocs.

    .ui-grid-b > .ui-block-span2 {
  width: 66.6666%;
}
.ui-grid-c > .ui-block-span2 {
  width: 50%;
}
.ui-grid-c > .ui-block-span3 {
  width: 75%;
}
.ui-grid-d > .ui-block-span2 {
  width: 40%;
}
.ui-grid-d > .ui-block-span3 {
  width: 60%;
}
.ui-grid-d > .ui-block-span4 {
  width: 80%;
}
    InformationsquelleAutor Douglas Lise