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.

更多专业前端知识，请上【猿2048】www.mk2048.com

jquery mobile 移动web(5)相关推荐

jquery mobile_使用jQuery Mobile改善Web应用程序的安全性
jquery mobile 在你开始前本教程适用于有兴趣保护其应用程序的jQuery Mobile开发人员. 假定读者具有使用PHP,MySQL,JavaScript,XHTML和CSS进行Web应 ...
简易电影购票APP(jquery mobile+json+web mysql)
目录界面截图: 使用技术架构设计总结 1.数据库设计总结 2.页面设计总计大一的暑期实习用js和css做了一个简单的图书网站,大二的暑期实习老师在基于大一学习的知识上又新增加了一些知识. 趁着最 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十九) —— HTML5 对 Web App 的影响
在本系列文章的开头,Kayo 曾经介绍过 Web App 的优缺点,并且说明了 HTML5 在其中起的作用,当然,Web Apps 的发展需要 HTML5 , CSS 与 JavaScript 以及后 ...
分享一个超棒的在线jQuery mobile原型设计开发工具 - codiqa
在线演示本地下载今天我们分享一个超棒的在线jQuery mobile原型设计开发工具:Codiqa,这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个jQuery mobile的web应 ...
jQuery Mobile 和 Kendo UI 的比较（转）
jQuery Mobile 和 Kendo UI 的比较转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十五) —— jQuery Mobile 与响应式
jQuery Mobile 在刚推出的时候,曾经宣传了几个重要的特点,除了 Kayo 在本系列文章中多次介绍的"触摸屏优化"外,另外一个最直接的特点就是"响应式设计&qu ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十四) —— jQuery Mobile 方法下
本文承接上文<使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 方法上>,继续说明 jQuery Mobile 的方法,这部分内容主 ...
使用 jQuery Mobile 与 HTML5 开发 Web App (十三) —— jQuery Mobile 方法上
本篇介绍的,是 jQuery Mobile 的方法.对比于 jQuery 方法可以实现 DOM 遍历,动画,Ajax 等各种丰富的操作,jQuery Mobile 的方法更像是 jQuery Mobi ...

jquery mobile 移动web(5)

jquery mobile 移动web(5)相关推荐

最新文章

热门文章