有序列表
  <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. C# 用tabcontrol实现窗体类似网页排版的显示

    这里做的比较简陋,可以美化下 把form设置为非顶级控件,直接放在tabcontrol里边,然后实现tabcontrol的拖拽移除tabpage显示form以及添加tabpage mousemove的 ...

  2. sublime Error executing: /usr/bin/security dump-trust-settings -d

    sublime text2突然crash,无法简单粗暴的关闭,就开始认真解决这个问题. 问题: 参考文献:https://github.com/wbond/package_control/issues ...

  3. 关于li标签行内显示的问题

    在我们实现导航栏的时候,经常要用到ul标签. 通常,我们是通过给li标签设置display:inline-block来使其在一行里显示,但是这个时候出现了一个很头疼的问题. 我们先上代码. <! ...

  4. php *-devel

    源码编译安装个php,缺少好多-devel的库. why devel? devel包至少包括头文件和链接库.如果你的要安装的源码依赖某个库,那肯定需要这两样东西. 让apache支持php 在编译ph ...

  5. 彻底解决INSTALL_FAILED_UPDATE_INCOMPATIBLE的安装错误

    利用adb shell进入系统,进入/data/app或者/data/data,删除跟你安装的apk同样的包名: 按Ctrl+C退出系统,利用adb pull /data/system/package ...

  6. 《ArcGIS Runtime SDK for Android开发笔记》——(11)、ArcGIS Runtime SDK常见空间数据加载

    ArcGIS Runtime SDK for Android 支持多种类型空间数据源.每一种都提供了相应的图层来直接加载,图层Layer是空间数据的载体,其主要继承关系及类型说明如下图所示: 转载请注 ...

  7. wxpython 界面布局

    1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...

  8. Java 创建 ARM 虚拟机磁盘类型选择的问题

    问题描述 在Azure 门户创建 ARM 虚拟机时,我们直接可以选择虚拟机的磁盘类型,但是在 Azure Management Libraries for Java 的 API 中我们无法找到直接设置 ...

  9. WAKE-SPM-综述

    1,SPM 1,1source paper:http://lear.inrialpes.fr/pubs/2007/ZMLS07/ZhangMarszalekLazebnikSchmid-IJCV07- ...

  10. Using nxlog4go for Testing Environment

    nxlog4go is very simple to use without any configuring, setting. For example: package main import ( ...