相思资源网 Design By www.200059.com

有序列表

   <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="/UploadFiles/2021-04-02/jquery.js">

    为开发者提供一个对象:$.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"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与html5,mobile_web_jquery

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“jquery mobile 移动web(5)”

暂无jquery mobile 移动web(5)的评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。