jQuery Mobile verwendet web(4)_jquery-js-Tutorial-php.cn

jQuery Mobile verwendet web(4)_jquery

WBOY

Freigeben： 2016-05-16 15:24:21

Original

1155 Leute haben es durchsucht

Die Entwicklung des mobilen Internets hat zu verschiedenen mobilen Web-Frameworks geführt. jQuery Mobile ist ein Web-UI-Entwicklungsframework für Touch-Erlebnisse. Es kann Web-Apps problemlos in eine Javascript-Bibliothek packen, die für mobile Touchscreen-Geräte wie Android und iOS geeignet ist, und kann mit einer guten Benutzeroberfläche einfach und schnell entwickelt werden. und Benutzererlebnis-Web-App, und es ist keine Installation erforderlich. Fügen Sie einfach die erforderlichen *.js- und *.css-Dateien direkt in die Webseite ein.

Dropdown-Menü:

Legen Sie das for-Attribut des label-Elements fest, um es auszuwählen. Definieren Sie das div-Element und setzen Sie den data-role-Attributwert auf 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>

Nach dem Login kopieren

Gruppenauswahlmenü

Es ist notwendig, die Optgroup im Select-Element anzugeben.

<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>

Nach dem Login kopieren

Deaktivieren Sie das Auswahlmenü des angegebenen Optionsdatenelements

 　　　<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>

Nach dem Login kopieren

Gemeinsame Verbindungsliste

<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>

Nach dem Login kopieren

Mehrere Ebenen verschachtelter Listen.

<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>

Nach dem Login kopieren

Der obige Inhalt ist das relevante Wissen über jQuery Mobile Mobile Web (4), das vom Herausgeber geteilt wurde. Ich hoffe, es gefällt Ihnen.