jQuery mobile et web(4)_jquery

Le développement de l'Internet mobile a donné naissance à divers frameworks Web mobiles. jQuery Mobile est un framework de développement d'interface utilisateur Web pour l'expérience tactile. Il peut facilement intégrer une application Web dans une bibliothèque Javascript adaptée aux appareils mobiles à écran tactile tels qu'Android et iOS. Combiné avec HTML5, il peut être développé facilement et rapidement avec une bonne interface. et l'expérience utilisateur Web App, et il n'est pas nécessaire d'installer quoi que ce soit, il suffit d'inclure les fichiers *.js et *.css requis directement dans la page Web.

Menu déroulant :

Définissez l'attribut for de l'élément label à sélectionner. Le contenu du texte de l'élément label est utilisé comme nom de l'option. Définissez l'élément div et définissez la valeur de l'attribut data-role sur fieldcontain.

 　　<div data-role="controlgroup">
　　　　<label for="select" class="select">请选择你的兴趣</label>
　　　　<select name="select" id="select">
　　　　　　<option>音乐</option>
　　　　　　<option>电影</option>
　　　　　　<option>体育</option>
　　　　　　<option>旅游</option>
　　　　</select>
 　　</div>

Menu de sélection de groupe

Il est nécessaire de préciser l'optgroup dans l'élément select. ​

<div data-role="controlgroup">
　　　　　　<label for="select">请选择你的兴趣：</label>
　　　　　　<select name="select" id="select" data-native-menu="true">
　　　　　　　　<optgroup label="娱乐类"/>
　　　　　　　　<option>音乐</option>
　　　　　　　　<option>电影</option>
　　　　　　　　<optgroup label="文体累"/>
　　　　　　　　<option>体育</option>
　　　　　　　　<option>旅游</option>
　　　　　　</select>
 　　　　</div>

Désactiver le menu de sélection de l'élément de données Option spécifié

 　　　<div data-role="controlgroup">
　　　　　　<label for="select">请选择你的兴趣：</label>
　　　　　　<select name="select" id="select" data-native-menu="true">
　　　　　　　　<optgroup label="娱乐类"/>
　　　　　　　　<option disabled="">音乐</option>
　　　　　　　　<option>电影</option>
　　　　　　　　<optgroup label="文体累"/>
　　　　　　　　<option>体育</option>
　　　　　　　　<option>旅游</option>
　　　　　　</select>
 　　</div>

Liste de connexion commune

<div data-role="page">
　　　　　　<header data-role="header">
　　　　　　　　<h1>列表例</h1>
　　　　　　</header>
　　　　　　<div data-role="content">
　　　　　　　　<ul data-role="listview" data-theme="g">
　　　　　　　　　　<li><a href="#">List 1</a></li>
　　　　　　　　　　<li><a href="#">List 2</a></li>
　　　　　　　　　　<li><a href="#">List 3</a></li>
　　　　　　　　　　<li><a href="#">List 4</a></li>
　　　　　　　　</ul>
　　　　　　</div>
 　　</div>

Plusieurs niveaux de listes imbriquées.

　

<div data-role="page">
　　　　<header data-role="header">
　　　　　　<h1>列表例</h1>
　　　　</header>
　　　　<div data-role="content">
　　　　　　<ul data-role="listview" data-theme="g">
　　　　　　　　<li>
　　　　　　　　　　<a href="#" data-add-back-btn="true">List 1</a>
　　　　　　　　　　<p >这是第一层</p>
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>
　　　　　　　　　　　　　　<a>subList 1 of 1</a>
　　　　　　　　　　　　　　<a>subList 1 of 2</a>
　　　　　　　　　　　　　　<a>subList 1 of 3</a>
　　　　　　　　　　　　</li>
　　　　　　　　　　</ul>
　　　　　　　　</li>
　　　　　　　　<li>
　　　　　　　　　　<a href="#" data-add-back-btn="true">List 2</a>
　　　　　　　　　　<p >这是第二层</p>
　　　　　　　　　　<ul>
　　　　　　　　　　　　<li>
　　　　　　　　　　　　　　<a>subList 2 of 1</a>
　　　　　　　　　　　　　　<a>subList 2 of 2</a>
　　　　　　　　　　　　　　<a>subList 2 of 3</a>
　　　　　　　　　　　　</li>
　　　　　　　　　　</ul>
　　　　　　　　</li>
　　　　　　<li>
　　　　　　　　<a href="#" data-add-back-btn="true">List 3</a>
　　　　　　　　<p >这是第三层</p>
　　　　　　　　<ul>
　　　　　　　　　　<li>
　　　　　　　　　　　　<a>subList 3 of 1</a>
　　　　　　　　　　　　<a>subList 3 of 2</a>
　　　　　　　　　　　　<a>subList 3 of 3</a>
　　　　　　　　　　</li>
　　　　　　　　</ul>
　　　　</li>
　　</ul>
　　</div>
 　　</div>

Le contenu ci-dessus est la connaissance pertinente du Web mobile jQuery (4) partagée par l'éditeur. J'espère qu'il vous plaira.