1. List 1
  2. List 2
  3. " />

    jquery mobile 移动web(5)

    网络编程 jquery mobile 移动web(5) 06-22

    有序列表

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

    jQuery mobile 移动web(6)
    jquerymobile针对移动端设备的事件类型。1.touch事件。tap快速触摸屏幕并且离开,类似一种完整的点击操作。taphold触摸屏幕并保持一段时间。swipe在1秒内水

    基于jQuery实现放大镜效果
    相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都

    jQuery mobile 移动web(4)
    移动互联网的发展,促生了各种各样的移动Web框架。jQueryMobile是一个针对触摸体验的webUI开发框架,很容易就可以把WebApp包装成适合Android与iOS等触屏移


    编辑:编程语言

    标签:类型,默认值,字符串,页面,效果