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 相关文章推荐
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
Vue源码学习之关于对Array的数据侦听实现
Apr 23 Javascript
js+css3实现简单时钟特效
Sep 13 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获取MAC地址的函数代码
2011/09/11 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
2007/04/20 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
Javascript核心读书有感之语言核心
2015/02/01 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
vue新建项目并配置标准路由过程解析
2019/12/09 Javascript
JS对象属性的检测与获取操作实例分析
2020/03/17 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
python 实现堆排序算法代码
2012/06/05 Python
python解析xml模块封装代码
2014/02/07 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
python实现外卖信息管理系统
2018/01/11 Python
点球小游戏python脚本
2018/05/22 Python
PyQt5固定窗口大小的方法
2019/06/18 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
结构和类有什么异同
2012/07/16 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
应届生人事助理求职信
2013/11/09 职场文书
家长评语大全
2014/01/22 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
职工趣味运动会方案
2014/02/10 职场文书
办公室管理规章制度
2015/08/04 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang