jquery mobile 移动web(5)

╰+哭是因爲堅強的太久メ 2023-06-11 04:27 19阅读 0赞

**有序列表**  
　　<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**