热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jquerymobile移动web(5)_jquery

这篇文章主要介绍了jquerymobile移动web(5)的相关资料,需要的朋友可以参考下
有序列表

   

    

          
  1. List 1
  2.       
  3. List 2
  4.       
  5. List 3
  6.     
  

只读列表

   

    

  

可分割按钮列表

   

    

  

含有气泡式计数列表

   

    

  

配置选项。

  jquery Mobile 在开始运行的时候,它会在document 对象上触发一个mobileinit 事件。我们可以通过该事件重写默认的相应的函数。配置各种属性参数。

  使用方法如下:  

 $(document).bind("mobileinit",function(){ 
        //在这里添加用户自定义代码。
     })
     
     
     

    为开发者提供一个对象:$.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的经验。

推荐阅读
  • 问题:onDeviceReady的函数没有触发!!
    2019独角兽企业重金招聘Python工程师标准也不能说就是个解决方法,我这样操作了后onDeviceReady好用了,需要的朋友可以参考下。首先 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 四十六、PhoneGapPhoneGap可能是Android最初的替代应用框架,于200 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 《精通 jQuery》第六章:深入解析与实战应用
    《精通 jQuery》第六章:深入解析与实战应用本章详细探讨了 Ajax 技术的核心机制及其实际应用。Ajax 通过 XMLHttpRequest 对象实现客户端与服务器之间的异步数据交换,从而在不重新加载整个页面的情况下更新部分内容。这种技术不仅提升了用户体验,还提高了应用的响应速度和效率。此外,本章还介绍了如何利用 jQuery 简化 Ajax 操作,并提供了多个实战案例,帮助读者更好地理解和掌握这一重要技术。 ... [详细]
  • 前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈?
    前后端分离,我怎么就选择了 Spring Boot + Vue 技术栈? ... [详细]
  • App混合开发(英文名:HybridApp),是指在开发一款App产品的时候为了提高效率、节省成本即利用了原生的开发技术还应 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 浏览器作为我们日常不可或缺的软件工具,其背后的运作机制却鲜为人知。本文将深入探讨浏览器内核及其版本的演变历程,帮助读者更好地理解这一关键技术组件,揭示其内部运作的奥秘。 ... [详细]
  • 在ASP.NET MVC项目中,通过实战解决了Ajax请求500错误及多表数据查询的问题。具体而言,将页面分为两个部分,用户点击右侧导航栏时,通过Ajax请求动态加载数据,并在右侧显示相应的页面内容。最初尝试使用Partial Action方法,但遇到了500错误。通过详细排查和调试,最终成功解决了这一问题,并实现了预期功能。此外,还优化了多表数据查询的性能,确保系统的高效运行。 ... [详细]
  • 作为140字符的开创者,Twitter看似简单却异常复杂。其简洁之处在于仅用140个字符就能实现信息的高效传播,甚至在多次全球性事件中超越传统媒体的速度。然而,为了支持2亿用户的高效使用,其背后的技术架构和系统设计则极为复杂,涉及高并发处理、数据存储和实时传输等多个技术挑战。 ... [详细]
  • 今日精选:10款实用的jQuery随机效果插件
    在今天的精选内容中,我们推荐了10款实用的jQuery随机效果插件。这些插件不仅功能强大,而且设计精良,能够为您的网页增添独特的互动体验。从动态图像效果到文本动画,每款插件都提供了丰富的自定义选项,帮助开发者轻松实现创意视觉效果。特别值得一提的是,其中一款插件集成了与Google API的无缝对接,使数据展示更加生动和直观。 ... [详细]
  • $apply() 方法允许从 AngularJS 框架外部触发表达式的执行,确保其在 AngularJS 的上下文中运行。例如,当你使用 `setTimeout()` 或者集成第三方库时,可以通过调用 `$apply()` 来确保事件更新能够被 AngularJS 检测到并触发脏检查机制,从而实现数据的双向绑定。这一过程不仅保证了数据的一致性,还提升了应用的响应速度和用户体验。 ... [详细]
  • DH-UAP是西安大华时代网络科技有限公司开发的新一代应用开发、运行、维护平台。该平台提供了技术统一、架构合理、性能高效、安全可靠的企业级信息系统基础框架和组件库,支 ... [详细]
  • 我们程序员为什么要关注 JavaScript ?_js
    受这周我在企业中看到的JS现状的启发,我写了这篇文章。10年之前,我从来没有想过现在的JavaScript竟然会变得几乎无处不在。下面是几个你之所以要关注Java ... [详细]
author-avatar
淘宝杂谈网z
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有