jQuery mobile et web(4)_jquery-js tutoriel-php.cn

jQuery mobile et web(4)_jquery

WBOY

Libérer： 2016-05-16 15:24:21

original

1157 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.