Jquery mobile 初始化参数设置详解

转载 2013年12月06日 10:15:32


初始化

jQM在加载的时候会自动的初始化默认配置项,这样我们就不需要为了学习和配置这些参数花费很多的时间了,大大的提高了开发效率。

但是有些时候因为项目的需要我们还是需要对这些参数进行自定义的。在学习jQM的初始化参数之前,我们需要先来了解mobileinit事件。


Mobileinit事件

jQM的加载事件和普通的jQuery插件有所不同,它会在document.ready事件之前执行。因此我们在需要对jQM的默认运行参数进行调整的时候就需要在document.ready事件之前来对这些参数进行设置,jQM为我们提供了mobileinit事件来处理加载之前需要执行的代码。

例如:

  1. $(document).bind("mobileinit", function(){
  2. //apply overrides her
  3. });
复制代码

初始化配置项的两种方法

方法一:通过jQuery的$.extend方法来设置多个配置项

  1. $(document).bind("mobileinit", function(){
  2. $.extend( $.mobile , {
  3.   foo: bar
  4. });
  5. });
复制代码

方法二:独立设置每个配置项

  1. $(document).bind("mobileinit", function(){
  2. $.mobile.foo = bar;
  3. });
复制代码


初始化配置项

以下是可以通过$.mobile对象来初始化的配置项:

activeBtnClass (string, default: "ui-page-active"):

设置按钮处于激活状态时的CSS样式。

字符串类型,在默认状态下参数是引用样式表中的” ui-page-active "。

覆盖范围:Buttons、List views、Select menus等组件的触发状态。

例如:

  1. $(document).bind("mobileinit", function(){
  2.       $.mobile.activeBtnClass="ui-btn-hover-a";
  3.    });
复制代码

将按钮激活状态的样式定义为样式” ui-btn-hover-a”

activePageClass (string, default: "ui-page-active"):

设置当前激活状态页面的样式,一个jQM页面中必将有一个页面容器是处于激活状态的,其它jQM页面容器将会处于隐藏状态。

字符串类型,在默认状态下参数是引用样式表中的” ui-page-active”,样式ui-page-active是用来将页面设置为显示状态的样式。所以在自定义这个样式到时候必须要在样式中声明以下属性:”display:block !important; overflow:visible !important;”(注意:不熟悉jQM的CSS框架的朋友经常会遇到自定义的样式不起作用的情况,这一般是由于自定义的样式和原有CSS框架的继承关系不同引起的,可以在不起作用的样式后面加上!important来提高自定义样式的优先级)

例如:

  1. $(document).bind("mobileinit", function(){
  2.       $.mobile.activePageClass="ui-page-custom";
  3.     });
复制代码

将页面激活状态的样式定义为样式” ui-page-custom”,” ui-page-custom”中必须定义” display:block !important; overflow:visible !important;”属性。

ajaxEnabled (boolean, default: true):

同时设置页面中的链接和表单提交是否使用Ajax方法,也就是说表单的提交和a标记中的链接,都是采用ajax调用。

布尔类型,在默认状态下参数是true。

例如:

  1. $(document).bind("mobileinit", function(){
  2.      $.mobile.ajaxEnabled=false;
  3. });
复制代码

如果你的项目中没有用到Ajax,那么建议将这里设为false

ajaxFormsEnabled (deprecated boolean, default: true):

单独设置页面中的表单提交是否使用Ajax方法。

布尔类型,在默认状态下参数是true。

ajaxLinksEnabled (deprecated boolean, default: true):

单独设置页面中的链接是否使用Ajax方法。

布尔类型,在默认状态下参数是true。

autoInitialize (boolean, default: true):

设置页面是否自动初始化,当设置为false时,jQM将推迟对页面的渲染,方便我们动态构建页面的Dom元素等异步操作时引发的页面渲染失败问题。

在页面元素构建完成后用$.mobile.initializePage();来开始渲染页面。

布尔类型,默认状态下参数为true。

例如:

  1. $(document).bind("mobileinit", function(){
  2.       $.mobile.autoInitialize=false; //删除这行配置参数就会出现渲染错误
  3. });
  4. $(function(){
  5.        function newDom(){
  6.       $("div[data-role='content']")
  7.       .append("<a href='web.html' data-role='button'>Link button</a>");
  8.       $.mobile.initializePage();//加载完成后开始渲染页面
  9.             }
  10.        setTimeout(newDom,500); //延时加载
  11. });
复制代码

defaultTransition (string, default: 'slide'):

设置默认的页面过渡效果,如果不想使用过渡效果就将参数设置为”none”。

字符类型,默认参数”slide”。

gradeA (function that returns a boolean, default: a function returning the value of $.support.mediaquery):

用于判断浏览器是否属于A级浏览器。

布尔类型,默认$.support.mediaquery用于返回这个布尔值。

loadingMessage (string, default: "loading"):

设置加载提示框里显示的文本,如果设置为false,将不显示加载提示框。

字符类型,默认值”loadind”。

metaViewportContent (string, default: "width=device-width, minimum-scale=1, maximum-scale=1"):

设置用于页面的适应比例的mata元素,如果设置为false,将不添加Mata元素。

字符类型,默认” width=device-width, minimum-scale=1, maximum-scale=1”。

nonHistorySelectors (string, default: "dialog"):

设置何种data-rel参数不会记录到哈希表。

由于现阶段data-rel只有” dialog”参数,建议不要自定义此项。

subPageUrlKey (string, default: "ui-page"):

用于设置引用子页面时哈希表中的标识。

字符类型,默认” ui-page”。


注意:// mobile初始化参数设置  这个放法要在引用jquery之后  jqm之前 否则不执行

jqgrid初始化参数及colModel参数

jqgrid初始化参数及colModel参数
  • u012724595
  • u012724595
  • 2017年07月13日 16:44
  • 1534

jQuery Datatable插件 表格基本初始化

jQuery Datatable插件 表格基本初始化本文介绍jQuery Datatable插件的表格初始化的基本使用,Datatable是目前使用度比较高的前端表格界面插件,可以很方便地创建响应式的...
  • xdevilj136
  • xdevilj136
  • 2016年11月15日 16:13
  • 4460

DataTable初始化参数的详细说明

DataTables是一个可高度配置化的类库,可以在生成HTML tables过程中的所有方面实现定制。所有特性可以通过打开、关闭或者定制来满足你对表格所有的要求。 定制要先定义一个options,然...
  • zsg88
  • zsg88
  • 2017年03月25日 11:52
  • 4179

jquery mobile常用的data-类型参数表

data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性  header     页面标题容器,这个容器内部可以包含文字、返回按钮、功能按钮...
  • ful1021
  • ful1021
  • 2013年07月13日 21:41
  • 868

Android+Jquery Mobile学习系列(4)-页面转场及参数传递

关于页面转场,这个必须得专门列出来说明一下,因为Jquery Mobile与普通的Web发开有一些区别,这个对于新手如果不了解的话,就会钻到死胡同。撸主前段时间就是很急躁地上手开发程序,结果在页面转场...
  • xiaobaohan214
  • xiaobaohan214
  • 2014年11月12日 17:18
  • 283

JQuery Mobile 两个页面之间的参数传递

index.html 页面 $(document).bind('pagebeforechange',function(e, data){ if ( typeof data.toPage !=...
  • BesturnLee
  • BesturnLee
  • 2013年01月30日 17:19
  • 1674

继承扩展jQuery Mobile的初始化事件

jQuery Mobile中包含了一个初始化的事件,该事件在jQuery框架的document.ready事件加载前就能被加载,名字叫mobileinit。这就允许开发者继承和扩展jQuery Mob...
  • liuyongliang116
  • liuyongliang116
  • 2013年08月19日 10:34
  • 1066

jquery mobile 的4个初始化事件

jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。 事件触发顺序 第一个触发的事件是m...
  • nbu00319
  • nbu00319
  • 2013年09月30日 09:18
  • 785

jquery mobile 的4个初始化事件

jQuery Mobile 初期化事件有mobileinit,pagebeforecreate,pagecreate,pageinit这个4个事件。本文尝试总结和比较4个事件。 事件触发顺序 ...
  • svrsimon
  • svrsimon
  • 2013年04月07日 11:13
  • 2064

jQuery Mobile 中文手册 Ajax开发版——初始化部分

转自:http://www.cnblogs.com/yuzhongwusan/archive/2011/12/01/2270863.html 初始化 jQM在加载的时候会自动的初始化默认配置...
  • huanghaifei922
  • huanghaifei922
  • 2016年12月15日 13:54
  • 57
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Jquery mobile 初始化参数设置详解
举报原因:
原因补充:

(最多只允许输入30个字)