jQuery mobile 移动web(4)

移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。

下拉菜单:

  设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain.

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

分组的选择菜单

  要在select 元素制定optgroup。  

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

禁用指定Option 数据项的选择菜单

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

普通连接列表  

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

多层次嵌套列表。

  

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwssd.html