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 相关文章推荐
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
微信小程序自定义对话框弹出和隐藏动画
Jul 19 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
JS事件流与事件处理程序实例分析
Aug 16 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
在PHP中操作Excel实例代码
2010/04/29 PHP
php实现删除空目录的方法
2015/03/16 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP的几个常用加密函数
2016/02/03 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
React组件refs的使用详解
2018/02/09 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
keras-siamese用自己的数据集实现详解
2020/06/10 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
校园联欢晚会主持词
2014/03/17 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python