jQuery mobile 移动web(4)


Posted in Javascript onDecember 20, 2015

移动互联网的发展,促生了各种各样的移动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)的相关知识,希望大家喜欢。

Javascript 相关文章推荐
JS 自动完成 AutoComplete(Ajax 查询)
Jul 07 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
js创建对象的方式总结
Jan 10 Javascript
JavaScript中DOM详解
Apr 13 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
Nov 09 Javascript
基于jQuery实现放大镜特效
Oct 19 #Javascript
jQuery mobile 移动web(6)
Dec 20 #Javascript
jquery mobile 移动web(5)
Dec 20 #Javascript
js倒计时抢购实例
Dec 20 #Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 #Javascript
js实现无缝滚动特效
Dec 20 #Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
You might like
PHP+DBM的同学录程序(1)
2006/10/09 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
一段效率很高的for循环语句使用方法
2007/08/13 Javascript
JS 文字符串转换unicode编码函数
2009/05/30 Javascript
基于Jquery的简单&amp;简陋Tabs插件代码
2010/02/09 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
在一个页面重复使用一个js函数的方法详解
2016/12/26 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
基于Python的接口测试框架实例
2016/11/04 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python日期的加减等操作的示例
2017/08/15 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
详解python播放音频的三种方法
2019/09/23 Python
Pytorch转tflite方式
2020/05/25 Python
Python如何急速下载第三方库详解
2020/11/02 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
初中美术教学反思
2014/01/29 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Spring Cache和EhCache实现缓存管理方式
2021/06/15 Java/Android