父div高度不能自适应子div高度的解决方案
324
2024-03-28
移动互联网的发展,促生了各种各样的移动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="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html">List 1</a></li> <li><a href="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html">List 2</a></li> <li><a href="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html">List 3</a></li> <li><a href="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html">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="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html" 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="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html" 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="http://www.gimoo.net/t/1904/5ca9c4f96a3d4.html" 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)的相关知识,希望大家喜欢。
#免责声明#
本站[绿夏技术导航]提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序或内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件[admin@lxwl520.com]与我们联系进行删除处理。敬请谅解!