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.


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cjmx:JConsole的命令行版本

当监视正在运行的Java应用程序时&#xff0c;JConsole是一个很好的工具。 但是&#xff0c;当无法使用JConsole直接连接到JVM&#xff08;例如&#xff0c;由于网络限制&#xff09;并且无法进行SSH隧道传输时&#xff0c;那么拥有命令行版本的JConsole会很棒。 jcmx是JConsol…

Android中SQLiteDatabase操作【附源码】

像我们做的很多应用程序及网站一样&#xff0c;基本都是对数据库进行增删改查来实现相应的功能。那么Android开发也一样&#xff0c;不过由于在移动客户端应用&#xff0c;所以不会像sql server、mysql那么复杂&#xff0c;Android应用程序支持本地数据库&#xff0c;SQLiteDat…

移动设备HTML5页面布局

在HTML5标准添加的新元素中&#xff0c;用于常见页面结 构的包括header footer footer nav aside aside article section hgroup 。 下面简单介绍一下这个元素&#xff1a; 1.header header>元素定义文档的页面组合&#xff0c;通 常是一些引导和导航信息&#xff0c;标签…

Hazelcast入门指南第5部分

这是我撰写的有关Hazelcast的一系列文章的延续。 我强烈建议您阅读其他内容&#xff1a; 第1 部分 &#xff0c; 第2 部分 &#xff0c; 第3 部分和第4部分 。 让人一见倾心的东西&#xff1f; 这篇文章中将没有Hazelcast专用代码。 让我重复一遍。 这篇文章中将没有Hazelcast…

【BEV感知算法概述——下一代自动驾驶感知算法】

文章目录 BEV感知算法概念BEV感知算法数据集介绍BEV感知算法分类BEV感知算法的优劣小结 BEV感知算法概念 Bird’s-Eye-View&#xff0c;鸟瞰图&#xff08;俯视图&#xff09;。BEV感知算法存在许多的优势。 首先&#xff0c;BEV视图存在遮挡小的优点&#xff0c;由于视觉的透…

jquery鼠标事件

click()   为点击事件绑定一个事件处理函数&#xff0c;或者触发元素点击事件。   .click( handler(eventObject) )     handler(eventObject)       每次事件触发时候执行的函数。   .click([eventData],handler(eventObject))     eventData      …

[LaunchPad] 超声波测试,数码管显示

1 #include "io430g2553.h"2 3 unsigned char Disp_Tab[] {0x3f,0x06,0x5b,0x4f,0x66,0x6d,0x7d,0x07,0x7f,0x6f,0x40}; //段码控制 4 unsigned char dispbit[8]{0xfe,0xfd,0xfb,0xf7,0xef,0xdF,0xbF,0x7F}; //位选控制 5 6 unsigned char LedOut[4];7 8 …

Spring的依赖注入陷阱

Spring框架中有三种注入变量&#xff1a; 基于二传手的注射 基于构造函数的注入 基于现场的注入 这些机制中的每一种都有优点和缺点&#xff0c;并且不仅只有一种正确的方法。 例如现场注入&#xff1a; Autowired private FooBean fooBean;在生产代码中使用它通常不是最好…

jquery 操作css 选择器

.addClass()   为每个匹配的元素添加指定的样式类名   .addClass(className)     className 为每个匹配元素所有增加的一个或多个样式名   .addClass(function(index,currentClass))     函数返回一个或者多个用空格隔开&#xff0c; index 表示参数匹配中的索引…

vim设置

一、基本编辑功能1、复制、剪切和粘贴复制特定的某一段&#xff1a;把光标移到要复制的文本的头部&#xff0c;按下“v”&#xff0c;往后移动光标&#xff0c;光标所过之处的字符>都会高亮&#xff0c;移到欲复制文本的尾部后&#xff0c;按下“y”&#xff0c;高亮文本全部…

jquery表单属性筛选元素

$(":button") 选择所有按钮元素类型为按钮的元素。 等于$(input[type"button"]) $(":checkbox") 选择所有类型为复选框的元素。 等于$(input[type"checkbox"]) $(":checked") 选择所有勾选的元素。 $( "input:checked&…

Hamcrest Matchers的高级创建

介绍 上一次 &#xff0c;我讨论了Hamcrest Matcher是什么&#xff0c;如何使用以及如何制作。 在本文中&#xff0c;我将解释创建Hamcrest Matchers的更多高级步骤。 首先&#xff0c;我将分享如何使您的匹配器更易于类型安全&#xff0c;然后介绍无状态匹配器的一些技术&…

嵌入式成长轨迹37 【Zigbee项目】【CC2430基础实验】【自动闪烁】

最为简单的代码&#xff0c;只用到一个寄存器P1DIR。因为点亮的led灯&#xff08;p1.0和p1.1&#xff09;的管脚是p1的&#xff0c;要输出就得将这两个管脚设置为输出管脚。该寄存器用0~8对应1.0~1.8管脚。 1 //main.c2 #include <ioCC2430.h>3 4 #define uint unsigned …

博客园CodingLife模板样式优化

博客园CodingLife模板样式优化&#xff0c;小屏和大屏均做了优化&#xff0c;感兴趣的园友可以复制到你的页面定制CSS代码中&#xff0c; 源码地址&#xff1a;http://www.cnblogs.com/blog/customcss/334547.css 更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

如何允许用户自定义UI

理念 利用JavafX / FXML的声明性设计模式&#xff0c;并允许用户仅通过使用例如SceneBuilder打开某个视图即可重新定制布局或添加新控件&#xff0c;甚至根据用户需要更改样式&#xff0c;从而无需任何编码即可自定义某个视图。 FXML文件 CSS基本上可以放置在通过URL可以到达的…

WPF控件和布局

WPF控件和布局&#xff0c;根据刘铁猛《深入浅出WPF》书籍讲解内容&#xff0c;主要记录控件和布局的原理&#xff0c;如果有不足的地方&#xff0c;请大牛们键盘下留情--轻喷&#xff01;如果还算有用&#xff0c;请给点动力&#xff0c;支持一把&#xff01; 一、WPF里的控件…

css背景图片定位

背景图默认平铺&#xff1a; background-repeat: no-repeat;/*不平铺*//*repeat-x;沿X轴平铺*//*repeat-x;沿Y轴平铺*/ 背景图片定位&#xff1a; background-position: 100px 30px;/* X轴 Y轴 *//* 20% 20%; 百分比的方式 *//* left|center|right top|center|bottom */ 背景中…

使用GZIP和压缩数据

抽象 我们都知道用zip或gzip压缩文件的含义。 但是在Java中使用压缩文件并不像您想的那样简单明了&#xff0c;尤其是当您不是直接使用文件而是压缩流数据时。 我们会去&#xff1a; 如何将字符串转换为压缩/压缩字节数组&#xff0c;反之亦然 创建用于读取和写入文件的实用程…

Oracle ——概述 Oracle 5 步调优方法论

http://www.toadworld.com/KNOWLEDGE/KnowledgeXpertforOracle/tabid/648/TopicID/OPS3/Default.aspx 对 Oracle 调优应该采取积极的态度。如果等到用户开始抱怨性能&#xff0c;才调优通常以为时已晚&#xff0c;即便是最有效的调优策略。性能问题确定和处理的时间越晚&#x…

js,jq.事件代理(事件委托)复习。

<ul id "lists"><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul>js委托&#xff1a; var lists document.getElementById(&qu…