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.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

php中删除html标签和标签内内容的方法

2593
来自专栏Python小屋

Python使用标准库subprocess调用外部程序

Python标准库subprocess中提供了很多调用外部程序创建子进程的对象,本文重点演示Popen对象的stdin和stdout属性的用法。 假设有一个程...

40710
来自专栏Flutter入门

Vue 绑定简单分析实现

使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

1471
来自专栏老马寒门IT

05-Vue入门系列之Vue实例详解与生命周期

Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理、数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我...

3435
来自专栏iOSer成长记录

iOS-自定义TextField(解决输入限制,键盘弹出问题)

1482
来自专栏十月梦想

Vue组件参数校验和props特性

其实我们可以在组件中把这个props换成一个对象,看到上述代码,type可以为一个数组,来判断这个传递的数据的类型,不符合则报错,required表示这个参数必...

1961
来自专栏一个小程序员的成长笔记

HTML5中引入的关键特性

新特性描述 accesskey 定义通过键盘访问元素的快捷键 contenteditable 该特性设置为true时,浏览器应该允许用户编辑元素的内容...

2889
来自专栏阮一峰的网络日志

CSS Modules 用法教程

学过网页开发就会知道,CSS 不能算编程语言,只是网页样式的一种描述方法。 为了让 CSS 也能适用软件工程方法,程序员想了各种办法,让它变得像一门编程语言。从...

2915
来自专栏繁花云

12-01-js深入学习

问题表现是:httpd服务器已经开启了,端口也已经监听了,但是就是无法访问

680
来自专栏每日一篇技术文章

微信小程序_06 将臃肿的单页js文件拆开

小程序中每一个页面对应一个Page()方法,我们需要把变量和组件的各种事件都写在一个对象里,然后把对象作为这个参数传递给Page方法

1142

扫码关注云+社区

领取腾讯云代金券