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

(0)

相关推荐

  • jQuery mobile 移动web(4)

    移动互联网的发展,促生了各种各样的移动Web框架.jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可. 下拉菜单: 设置label 元素的for 属性为 select lab

  • jQuery Mobile的loading对话框显示/隐藏方法分享

    显示loading对话框方法是: 复制代码 代码如下: $.mobile.showPageLoadingMsg(); 也可设置参数 复制代码 代码如下: $.mobile.showPageLoadingMsg("b","加载中",false); 隐藏loading对话框方法是: 复制代码 代码如下: $.mobile.hidePageLoadingMsg();

  • jQueryMobile之Helloworld与页面切换的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台.就是能够迅速能把页面写成APP的界面,让用户浏览网页,相当于在使用布局好的app一样. 首先要在jQueryMobile(点击此处本站下载)下载一个压缩包,然后把这个压缩包的所有内

  • 使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • jquerymobile局部渲染的各种刷新方法小结

    在JQueryMobile页面在第一次初始化进行一次整体渲染,动态生成的需要局部渲染. 在jquerymobile实现listview局部渲染的方法: 复制代码 代码如下: function queryPublishOrderList(trackOrDealOrInsp,userCode,type,pageNum){      var queryPublishOrderListURL="http://xxx.xxx.xxx.xxx/Myapp/WorkOrderSelByTypeService.

  • 让jQuery Mobile不显示讨厌loading界面的方法

    jQuery Mobile 的一个BUG: 当不采用 ajax 以及 他自己的 back 返回的时候,即: 点击浏览器后退按钮时,将会从缓存之中加载页面,此时,讨厌的 loading 动画出来了,而且一直不消失. 网上找了好多解决方法,搜索了好久都没有好用的,今天突然想起来个釜底抽薪,直接动jqeury-mobile 的类库. 用编辑器打开, 找到显示pageLoading的方法, showPageLoadingMsg 的定义处: 然后加上一句代码,if("".length<5)

  • JqueryMobile动态生成listView并实现刷新的两种方法

    JqueryMobile动态生成listView并实现刷新的两种方法 复制代码 代码如下: function queryEntfernungen(tx, results)   alert("This Hello works");   var len = results.rows.length;     // This For works fine for (var i = 0; i < len; i++) {       $("div[data-role=content

  • jquery mobile的触控点击事件会多次触发问题的解决方法

    jquery mobile 对手势触控提供了如下几个事件监听: 复制代码 代码如下: tap  当用户点屏幕时触发taphold 当用户点屏幕且保持触摸超过1秒时触发swipe 当页面被垂直或者水平拖动时触发.这个事件有其相关联的属性,分别为scrollSupressionThreshold, durationThreshold, horizontalDistanceThreshold, and verticalDistanceThresholdswipeleft 当页面被拖动到左边方向时触发s

  • jquery mobile动态添加元素之后不能正确渲染解决方法说明

    jquerymobile动态添加元素之后有些不能被正确渲染的解决方法:listview: 添加 jq(".detail").listview("refresh");div或其他:添加.trigger( "create" );====================================================================== jqm在初始化页面时会根据data-xxx在各元素中插入jqm的属性和类等.在页面初

  • jQuery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数有两种返回值:p

随机推荐