• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery mobile 移动web(5)

jquery mobile 移动web(5)

作者:柠檬先生 字体:[增加 减小] 来源:互联网

柠檬先生 通过本文主要向大家介绍了jquery_mobile与html5,mobile_web_jquery等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.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="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和主题上做得很棒,但的确和原生程序看起来有显著的不同。这个问题到底对用户有多大影响不得而知,但是这一点需要引起注意

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery mobile 移动web(6)
  • jquery mobile 移动web(5)

相关文章

  • jQuery实现自定义checkbox和radio样式
  • jQuery的缓存机制浅析
  • 基于jquery库的tab新形式使用
  • 详解jQuery移动页面开发中的ui-grid网格布局使用
  • jquery动态添加option示例
  • JQuery遍历DOM节点的方法
  • Struts2的s:radio标签使用及用jquery添加change事件
  • 详解jQuery UI库中文本输入自动补全功能的用法
  • 使用jquery给指定的table动态添加一行、删除一行
  • jQuery弹出层插件Lightbox_me使用指南

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery三个关闭弹出层的小示例
    • jquery tabs的实现代码
    • jQuery中 $ 符号的冲突问题及解决方案
    • 自己动手开发jQuery插件教程
    • jquery实现两个图片渐变切换效果的方法
    • jQuery 设置 CSS 属性示例介绍
    • jQuery实现表格颜色交替显示的方法
    • 基于jQuery实现的幻灯图片切换
    • jquery实现带单选按钮的表格行选中时高亮显示
    • jquery 查找新建元素代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有