zoukankan      html  css  js  c++  java
  • jquery mobile 移动web(5)

    有序列表

     <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.

  • 相关阅读:
    ATI Radeon HD 5450 with full QE/CI Support ( 转载 )
    从零开始学iPhone开发(5)——使用MapKit
    从零开始学iPhone开发(4)——使用WebView
    从零开始学iPhone开发(3)——视图及控制器的使用
    从零开始学iPhone开发(2)——控件的使用
    从零开始学iPhone开发(1)——工具的使用
    实战做项目如何选择开源许可协议(一)-了解协议
    git使用3
    git团队开发操作
    git分支管理
  • 原文地址:https://www.cnblogs.com/nmxs/p/5059356.html
Copyright © 2011-2022 走看看