信鸽网

jQuery mobile 移动web(4)

  作者：bea

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

移动互联网的发展，促生了各种各样的移动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" class="select">请选择你的兴趣</label>

　　　　<select name="select" id="select">

　　　　　　<option>音乐</option>

　　　　　　<option>电影</option>

　　　　　　<option>体育</option>

　　　　　　<option>旅游</option>

　　　　</select>


　</div>


分组的选择菜单


 　　要在select 元素制定optgroup。　　




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


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





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


普通连接列表　　




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


以上内容是小编给大家分享的jQuery mobile 移动web(4)的相关知识，希望大家喜欢。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: