jQuery Mobile提供了哪些可配置选项?

2013-02-01 00:00:00121
海南力创网络有限公司在前面的文章中我们海南网页设计就提到,jQuery Mobile是采用HTML5标准的data属性来驱动元素生成各种界面组件的。实际上,jQuery Mobile不仅提供上述这些方面的功能,还在JavaScript可编程方面提供更多的可配置、可定制的参数和方法。

 

    同样,作为基于jQuery的jQuery Mobile移动框架,它也提供了一个类似的事件。当jQuery Mobile开始运行时,它会在document对象上触发一个mobileinit事件。我们可以通过该事件重写默认的相应函数,配置各种属性参数。

 

    使用方法如下:

 

$(document).bind("mobileinit",function(){
        //在这里添加用户自定义的代码
});

 

    由于mobileinit事件在运行jQuery Mobile的时候会立即触发,因此如果我们需要编写自定义事件就必须在mobileinit事件之前进行。因此自定义事件的JavaScript文件的导入位置,就必须在jQuery类库文件之后,jQuery Mobile类库文件之前。

 

     例如:

 

<script src="jquery.js"></script>
<script src="自定义事件处理函数js文件.js"><script>
<script src="jquerymobile.js></script>

 

    jQuery Mobile为开发者提供了一个对象:$.mobile。该对象的作用是配置各种选项及其默认值。

 

    例如:

  

$(document).bind("mobileinit",function(){
        $.mobile.foo = "foo";
});

 

    除了上述通过$.mobile.foo 的点语法对某个属性值进行初始化以外,还可以使用jQuery自带的方法$.extend通过继承方式对属性值进行初始化。

 

$(document).bind("mobileinit",function(){
        $.extend($.mobile,{
   foo:"foo"
  });
});

 

     jQuery Mobile提供了非常多的可配置选项。 

 

 1.ns
 类型:字符串,默认值是空字符串。
 用法:$.mobile.ns = "mynamespace"
 描述:自定义命名空间,避免命名空间冲突。使用方法是通过指定data-属性来自定义命名空间。当指定了ns值时,data属性所对应的自定义命名空间属性名就是data-mynamespace-foo。通常情况下,当开发者需要开发一套自定义主题样式时才需要使用该选项。

 

 2.autolnitializePage
 类型:布尔值,默认值是true。
 用法:$.mobile.autoInitializePage = false
 描述:默认情况下,当页面DOM元素准备就绪后,程序会自动加载autolnitializePage函数。如果autolnitializePage选项被设置为false,页面就不会被立即渲染,并保持隐藏状态,一直到人工调用$.mobile.initializePage 函数后才会渲染各种页面和视图组件。

 

 initializePage函数是jQuery Mobile框架的内部初始化函数,该函数的主要功能是在DOM元素中查找和增强页面中的各个视图,并指定默认显示的第一个视图。

 

 3.subPageUrlKey
 类型:字符串,默认值是ui-page。
 用法:$.mobile.autoInisubPageUrlKey = "page"
 描述:该参数的主要功能是改变jQuery Mobile视图在URL地址中的key参数名,STRONG>海南网站设计举例:example.html?ui-page=subpage。当选项参数改成subPageUrlKey-"page"时,其url地址会被改为example.html?page=subpage。

 

 当ui-page的值是一个URL地址时,jQuery Mobile框架会发送一个Ajax请求,并返回显示该URL页面。

 

 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方式加载页面或提交数据。默认情况下,jQuery Mobile采用Ajax请求,而采用传统的HTTP方式请求跳转或提交方式。

 

 7.hashListeningEnabled
 类型:布尔值,默认值是true。
 用法:$.mobile.hashListeningEnabled = false
 描述:设置jQuery Mobile是否自动监听和处理location.hash的变化,如果设置为false,可以使用手动的方式处理hash的变化,或者简单的使用链接地址进行跳转。

 

 8.defaultPageTransition
 类型:布尔值,默认值是true。
 用法:$.mobile.defaultPageTransition = "fade"
 描述:该选项菜熟的作用是设置页面切换默认的效果。如果设置none,页面切换时将不会有效果。可选的切换效果包括:slide(左右划入)、slideup(由下向上滑入)、slidedown(由上向下滑入)、pop(由中心展开)、fade(渐显)、flip(翻转)。

 

 9.touchOverflowEnabled
 类型:布尔值,默认值是false。
 用法:$.mobile.touchOverflowEnabled = true
 描述:是否使用设备的原生区域滚动特性。目前除iOS5外,大部分设备还不支持原生的区域滚动特性。

 

 10.defaultDialogTransition
 类型:字符串,默认值是pop。
 用法:$.mobile.defaultDialogTransition = "none"
 描述:该选项设置Ajax对话框的弹出效果,若设置为none,则没有过渡效果。其可选的效果和defaultPageTransition属性相同。

 

 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。默认返回$support.mediaquery的值。

 

     上面介绍了jQuery Mobile 1.0bata3版本中提供个可配置参数选项,由于该版本仍然是一个beta版本,因此海南网页设计认为这类配置参数可能会随着后续版本的更新而发生变化,例如有可能在下一个版本中发现某些配置选项已经被抛弃或者会新增更多的配置选项等。