jquery mobile 移动web(5)


Posted in Javascript onDecember 20, 2015

有序列表

<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 和 HTML5 的3个缺点

1.比原生程序运行慢:在我看来最大的缺点是,即使是在最新的Android和iOS硬件上(双核Tegra 2 Android手机,双核iPad2平板),JQuery Mobile应用程序都会明显慢

于原生程序。尤其是在Android上,浏览器比起iOS更慢且bug更多(虽然谷歌是专注web领域的公司)。我没有在更早的Android设备上测试我的程序,也许根本就不能运行(例如Android G1)。我相信在未来的12-24个月,硬件速度会很快得到提升(例如,四核设备2011年马上就要上市),性能也许很快就不会成为问题。但是今天,它确实是一个缺点。如果你只专注于iOS,你大可以期待一下浏览器的性能,至少它在这方面是可靠的(不像Android,黑莓等等)

2.古怪(跨浏览器、跨平台开发):JQuery Mobile现在仍是beta版本,因此我遇到了很多bug。也就是说,JQuery团队还在积极地回复GitHub上提出的问题。我认为其中最大的一个问题是各种浏览器在不同的手机平台上古怪的表现。这个问题一直为人诟病。应用程序可能看上去有些古怪——虽然我认为JQuery Mobile团队在widget和主题上做得很棒,但的确和原生程序看起来有显著的不同。这个问题到底对用户有多大影响不得而知,但是这一点需要引起注意。

3. 有限的能力 vs 原生程序:很明显,运行在浏览器上的JavaScript不能完全地访问设备的很多特性。一个典型的例子就是摄像头。然而,类似PhoneGap这样的工具能够帮助解决很多常见问题。实际上,我已经开始将我的应用程序通过PhoneGap将几个版本部署到iOS和Android上,使用的是原生Facebook绑定,效果令我映像深刻。我会在未来的博客中写一些使用PhoneGap的经验。

Javascript 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
原生js实现轮播图特效
May 04 Javascript
js倒计时抢购实例
Dec 20 #Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 #Javascript
js实现无缝滚动特效
Dec 20 #Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 #Javascript
原生js页面滚动延迟加载图片
Dec 20 #Javascript
javascript实现的网站访问量统计代码
Dec 20 #Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
小谈php正则提取图片地址
2014/03/27 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
2019/10/28 Javascript
webpack安装配置与常见使用过程详解(结合vue)
2020/06/01 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现测试磁盘性能的方法
2015/03/12 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
大学生毕业自我鉴定范文
2013/11/03 职场文书
高级护理专业毕业生推荐信
2013/12/25 职场文书
校园广播稿500字
2014/02/04 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
奥巴马竞选演讲稿
2014/05/15 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
2014年业务工作总结
2014/11/17 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Python经常使用的一些内置函数
2022/04/11 Python