jquery mobile 移动web(5)
有序列表
<div data-role="content">
<ol 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>
</ol>
</div>
只读列表
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#"> List 1</a></li>
<li><a href="#"> List 2</a></li>
<li><a href="#"> List 3</a></li>
</ul>
</div>
可分割按钮列表
<div data-role="content">
<ul data-role="listview" data-theme="g" data-split-icon="gear" data-split-theme="d">
<li><a href="#"> List 1</a><a href="#"></a></li>
<li><a href="#"> List 2</a><a href="#"></a></li>
<li><a href="#"> List 3</a><a href="#"></a></li>
</ul>
</div>
含有气泡式计数列表
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="#"> List 1</a><span class="ui-li-count">33</span></li>
<li><a href="#"> List 2</a><span class="ui-li-count">222</span></li>
<li><a href="#"> List 3</a><span class="ui-li-count">111</span></li>
</ul>
</div>
配置选项。
jquery Mobile 在开始运行的时候,它会在document 对象上触发一个mobileinit 事件。我们可以通过该事件重写默认的相应的函数。配置各种属性参数。
使用方法如下:
$(document).bind("mobileinit",function(){
//在这里添加用户自定义代码。
})
<script src="jquery.js"></script>
<script src="自定义事件处理函数的js文件"></script>
<script src="jquerymobile.js"></script>
为开发者提供一个对象:$.mobile. 该对象的作用是配置各种选项及默认配置。
$(document).bind("mobileinit",function(){
$.mobile.foo = "foo";l
})
可配置选项:
1.ns
类型:字符串,默认是非空字符串。
用法:$.mobile.ns="mynamespace"
描述:自定义命名空间,避免命名空间。
2.autolnitializePage
类型:布尔类型,默认为true。
用法:$.mobile.autoInitializePage = false
描述:默认情况下,当页面DOM元素准备就绪后,程序会自动加载$.mobile.initializePage 函数 如果设置为 false
页面 就不会成立,并保持隐藏状态。
3.subPageUrlKey
类型:字符串,默认值是 ui-page.
用法:$.mobile.subPageUrlkey = "page"
描述:改变jQuery Mobile 视图在 URL 地址中的key 参数名,当选参数改成 subPageUrlKey = "page "时 url 地址会被改成
example.html?page=subpage。
4.activePageClass
类型:字符串,默认值是 ui-page-active
用法:$.mobile.activePageClass = “ui-ns-page-active”。
描述:主要功能是自定义活动状态页面和过度状态时的视图css样式。
5.activeBtnClass
类型:字符串,默认值是ui-btn-active
用法:$.mobile.activeBtnClass = "ui-ns-page-active"
描述:该选项的主要功能是自定义处于活动状态的那妞的样式风格。
6.ajaxEnabled
类型:布尔值,默认值是true
用法:$.mobile.ajaxEnabled = false
描述:设置当单击连接或提交表单或按钮时,是否使用Ajax方式加载页面或提交数据。
7.hashListeningEnabled
类型:布尔值,默认值是true;
用法:$.mobile.hashListeningEnabled = false
描述:设置是否自动监听和处理location.hash的变化,如果设置为false ,可以使用手动的方式处理hash 的变化,或者简单使用连接
地址进行跳转。
8.defaultPageTransition
类型:字符串,默认值是slide
用法:$.mobile.defaultPageTransition = “fade”
描述:该选项参数主要设置页面切换默认的效果,如果设置为none ,页面切换时就不会有效果,可选的参数 slideup (左右滑入)
slideup(由下向上滑动) slidedown (由上像下滑入)pop (由中心)
9.touchOverflowEnabled
类型:布尔值,默认值是false
用法:$.mobile.touchOverflowEnabled = true
描述:是否使用设备的原生态滚动特性。
10.defaultDialogTransition
类型:字符串,默认值是pop
用法:$.mobile.defaultDialogTransition = "none"
描述:设置Ajax 对话框的弹出效果,若设置为none 则没有过度效果。
11.minScrollBack
类型:字符串,默认值是150
用法:$.mobile.minScrollBack = “200”
描述:当滚动超出所设置的高度时才会触发滚动位置记忆功能。
12.loadingMessage
类型:字符串默认值是loading
用法:$.mobile.loadingMessage = "加载中"
描述:设置页面加载状态的文本内容。如果设置为false,则不显示任何内容。
13.pageLoadErrorMessage
类型:字符串,默认值为 Error Loading Page
用法:$.mobile.pageLoadErrorMessage = "页面加载失败"
描述:设置当Ajax页面请求失败时显示的提示的文本内容
14.gradeA
类型:布尔值,默认值是$.support.mediaquery 的值
用法:$.mobile.gradeA
描述:当浏览器符合所有的支持的条件时候才会返回true.
jquery mobile 移动web(5)的更多相关文章
- JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍
工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...
- 利用JQuery Mobile开发web app
什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...
- jquery mobile 移动web
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jQuery Mobile 移动 web 应用程序框架
在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...
- jquery mobile 移动web(6)
jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作. taphold 触摸屏幕并保持一段时间. swipe 在1秒内水 ...
- jquery mobile 移动web(2)
button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...
- jquery mobile 移动web(1)
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...
- jquery mobile 移动web(4)
下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...
- jquery mobile 移动web(3)
可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...
随机推荐
- 合约实战,代币合约,DAPP开发
1. ERC20标准 https://github.com/ethereum/EIPs/blob/master/EIPS/eip-20.md pragma solidity ^; //定义接口 con ...
- Angular6路由复用与延迟加载的冲突解决——看看有备无患
结论: 结论放最上面,送给匆匆查资料的你: 同时使用延迟加载 + 路由复用,一定不能使用route.routeConfig.path做key去缓存,否则会死得难看. 经实测(我没有完全去解读源代码 ...
- hdu 1394 逆序数(线段树)
http://acm.hust.edu.cn/vjudge/problem/15764 http://blog.csdn.net/libin56842/article/details/8531117 ...
- scp命令的使用
scp命令是什么 scp是 secure copy的缩写, scp是linux系统下基于ssh登陆进行安全的远程文件拷贝命令. scp命令用法 scp [-1246BCpqrv] [-c cipher ...
- 人工智能(AI)
一.人工智能的核心——机器学习 人工智能是一个很大的圈子,但人工智能的基础是机器学习. 机器学习是什么? 其实就是人告诉机器想做什么事情,并且给它一堆数据让它模仿着去做. 机器学习需要什么? 算法.数 ...
- 前端给div加滚动条样式修改
<!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- Web站点如何防范XSS、CSRF、SQL注入攻击
XSS跨站脚本攻击 XSS跨站脚本攻击指攻击者在网页中嵌入客户端脚本(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导 ...
- spark编程python实例
spark编程python实例 ValueError: Cannot run multiple SparkContexts at once; existing SparkContext(app=PyS ...
- 超级表格:要山寨Excel,还是与之Say Byebye?
创业产品难免被人拿来与现有的知名产品比较,创业者也喜欢把自己的产品与现有的知名产品比较. 我,超级表格创始人,对此有话说. 当我要在各种场合描述超级表格是什么时,也纠结过. 向用户描述时,说超级表格类 ...
- Sharepoint 2013企业内容管理学习笔记(一) 半自动化内容管理
大家好,今天我来与大家分享一个关于sharepoint2013文档管理方面的一个知识,我相信也许早就有人了解并熟知这项技术了,呵呵,众所周知,sharepoint 有一个很亮的功能,什么?没错,就是文 ...