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 和 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的经验。