jQuery mobile 移动web(4)
移动互联网的发展，促生了各种各样的移动Web框架。jQueryMobile是一个针对触摸体验的webUI开发框架，很容易就可以把WebApp包装成适合Android与iOS等触屏移动设备的Javascript库，与HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的WebApp，而且不需要安装任何东西，只需将需要的*.js和*.css文件直接包含到web页面中即可。
下拉菜单:
设置label元素的for属性为selectlabel元素的文本内容作为选项的名称定义div元素并设置data-role属性值为fieldcontain.
<divdata-role="controlgroup"> <labelfor="select"class="select">请选择你的兴趣</label> <selectname="select"id="select"> <option>音乐</option> <option>电影</option> <option>体育</option> <option>旅游</option> </select> </div>
分组的选择菜单
要在select元素制定optgroup。
<divdata-role="controlgroup"> <labelfor="select">请选择你的兴趣：</label> <selectname="select"id="select"data-native-menu="true"> <optgrouplabel="娱乐类"/> <option>音乐</option> <option>电影</option> <optgrouplabel="文体累"/> <option>体育</option> <option>旅游</option> </select> </div>
禁用指定Option数据项的选择菜单
<divdata-role="controlgroup"> <labelfor="select">请选择你的兴趣：</label> <selectname="select"id="select"data-native-menu="true"> <optgrouplabel="娱乐类"/> <optiondisabled="">音乐</option> <option>电影</option> <optgrouplabel="文体累"/> <option>体育</option> <option>旅游</option> </select> </div>
普通连接列表
<divdata-role="page"> <headerdata-role="header"> <h1>列表例</h1> </header> <divdata-role="content"> <uldata-role="listview"data-theme="g"> <li><ahref="#">List1</a></li> <li><ahref="#">List2</a></li> <li><ahref="#">List3</a></li> <li><ahref="#">List4</a></li> </ul> </div> </div>
多层次嵌套列表。
<divdata-role="page"> <headerdata-role="header"> <h1>列表例</h1> </header> <divdata-role="content"> <uldata-role="listview"data-theme="g"> <li> <ahref="#"data-add-back-btn="true">List1</a> <p>这是第一层</p> <ul> <li> <a>subList1of1</a> <a>subList1of2</a> <a>subList1of3</a> </li> </ul> </li> <li> <ahref="#"data-add-back-btn="true">List2</a> <p>这是第二层</p> <ul> <li> <a>subList2of1</a> <a>subList2of2</a> <a>subList2of3</a> </li> </ul> </li> <li> <ahref="#"data-add-back-btn="true">List3</a> <p>这是第三层</p> <ul> <li> <a>subList3of1</a> <a>subList3of2</a> <a>subList3of3</a> </li> </ul> </li> </ul> </div> </div>
以上内容是小编给大家分享的jQuerymobile移动web(4)的相关知识，希望大家喜欢。