有序列表
  <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 移动web(5)的更多相关文章

  1. JQuery Mobile移动Web应用开发(1): UI开发工具RID介绍

    工欲善其事,必先利其器. UI工具可以提高我们开发界面的效率,下面对几款工具做个对比: 1. Codiqa,在JQuery Mobile主页能看到这款工具,看到网上这么多人吹捧这个工具,不过是收费的. ...

  2. 利用JQuery Mobile开发web app

    什么是web app web app 是基于web的应用程序,是针对移动设备优化后的web站点,它具有 开发成本低——采用web开发技术,不需要考虑跨平台以及底层适配问题: 升级简单——不需要通知用户 ...

  3. jquery mobile 移动web

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  4. jQuery Mobile 移动 web 应用程序框架

    在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery ...

  5. jquery mobile 移动web(6)

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

  6. jquery mobile 移动web(2)

    button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon =&quo ...

  7. jquery mobile 移动web(1)

    轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mo ...

  8. jquery mobile 移动web(4)

    下拉菜单: 设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain. <div ...

  9. jquery mobile 移动web(3)

    可折叠功能块. div 元素的 data-role 属性设置为 collapsible 代码如下: <div data-role="collapsible"> < ...

随机推荐

  1. vue——介绍和使用

    一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...

  2. CSS深入理解学习笔记之padding

    1.padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸:②width非auto,padding影响尺寸:③width为auto或box-sizing为b ...

  3. Angular 基础教程(1)

    简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...

  4. .NET开源工作流RoadFlow-表单设计-保存与发布

    表单的过程中可以随时保存,以便下次继续设计. 表单设计完成后即可点击发布按钮,发布表单,发布表单后即可在流程设计时选定该表单.

  5. .NET开源工作流RoadFlow-表单设计-日期时间选择

    在表单中添加一个日期时间选择框: 选择范围:指定一个日期选择范围. 时间:是否允许选择时间.

  6. wxpython wx.windows的API

    wx.Window is the base class for all windows and represents any visible object on screen. All control ...

  7. IntelliJ IDEA搭建SpringBoot的小Demo

    首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进 ...

  8. python加解密

    from Crypto.Cipher import AES import base64 secret_key = '1234567890123456' # 密匙 msg_text = 'test so ...

  9. 使用CTE公用表表达式的递归查询(WITH AS)

    公用表表达式 (CTE) 具有一个重要的优点,那就是能够引用其自身,从而创建递归 CTE.递归 CTE 是一个重复执行初始 CTE 以返回数据子集直到获取完整结果集的公用表表达式. 当某个查询引用递归 ...

  10. YAML 格式学习

    目录 什么是YAML 一.注释和多文件 二.格式要求 三.数据结构 1.对象 2. 数组 3.常量 四.字符串 YAML的特殊字符 什么是YAML YAML是"YAML不是一种标记语言&qu ...