• 如何修改Jquery Mobile 设置默认选项


    以下的默认配置可以通过$.mobile对象重新配置
    自定义命名空间s (字符, 默认: ""):

    在jQuery Mobile中,甚至可以自定义象HTML5中的data-attribute等系列属性,比如data-role等。这通过自定义命名空间即可实现。比 如可以实现自定义一个名字,变成data-自定义名-role这样的形式。按照“data-属性”格式安排的命名空间,例如:data-role,可以设 置为任何东西,默认为空字符串。如果你包含一个面包屑的话用起来会比较明晰,比如mynamespace-",会映射到 data-mynamespace-foo="...".
    这可以通过$.mobile对象中增加ns属性来指定,如下代码:
     $(document).bind("mobileinit", function() {
      $.mobile.ns = "my-custom-ns";
      });

    通过上面的代码,建立了一个data-my-customer-ns-role的属性,而不是传统jQuery Mobile中指定的data-role。通过设置自定义的命名空间,可以方便开发者在CSS选择器中进行指定,同时如果要自定义mobile小插件的主 题,则也必须使用自定义命名空间,以示区别。


    注意:如果你使用了data-命名空间,你需要在主题的css中手动的更新/覆盖一个选择器。按照以下格式把命名空间并并入到命名空间中。
    .ui-mobile [data-mynamespace-role=page], .ui-mobile [data-mynamespace-role=dialog], .ui-page { ...

    页面初始化
    autoInitializePage(布尔值,默认: true)
    当DOM加载完成时,JQM框架会自动调用$.mobile.initializePage方法。如果设为False,页面page则不会自动初始化,在视觉上就会是隐藏的,直到 $.mobile.initializePage 方法被手动调用。
    jQuery Mobile提供了一个叫autoInitializePage的属性,这个属性表示页面是否应该初始化,其默认值为true。然而,如果是继承扩展 了$.mobile对象,开发者则可以将该值设置为false,并且在稍晚的时候对页面初始化进行设置。下面的代码中,演示了当其他脚本在运行时,如何暂 时延迟页面的初始化。如果有大量的客户端脚本运行,则一个很好的建议方法是延迟页面的初始化,直到DOM完成加载客户端脚本。
    <!DOCTYPE HTML>
    <html>
    <head>
      <title>Understanding the jQuery Mobile API</title>
      <script type="text/java script" src="jquery.js"></script>
      <script type="text/java script">
        $(document).bind("mobileinit", function() {
          $.mobile.autoInitializePage = false;
        });
      </script>
      <script type="text/java script" src="jquery.mobile.js"></script>
    </head>        
    <body>
      <div data-role="page">
        <div data-role="content">
          <ul data-role="listview" id="my-list"></ul>
        </div>
      </div>
      <script type="text/java script">
        $('#my-list').html('<li><a href="page-2.html">Link to another page</a></li>');
        $.mobile.autoInitializePage = true;
      </script>
    </body>
    </html>
     
    自定义子页的URL键
    subPageUrlKey (字符串,默认: "ui-page")
    当在jQuery Mobile中引用子页时,默认使用的是ui-page做为KEY标识。开发者可以通过$.mobile对象的subPageUrlKey去重新设置,比 如如果定义了subPageUrlKey为my-page,则默认的子页引用将从web-page.html&ui-page=value改为 web-page.html&my-page=value,这样做的一个好处是开发者可让url更友善更容易维护。
    url参数用来指向组件产生的子页面(比如生成的嵌套的列表)。会被转义为example.html&ui-page=subpageIdentifier。Jquery Mobile会把 &ui-page=之前的部分用来向子页面的url地址发出ajax请求。

    设置历史记录
    nonHistorySelectors (字符串, 默认: "dialog")
    对于带有 data-rel 属性的a标签链接,或 data-role 属性的页面,如果选择器与之匹配,则他们不会在历史记录中被追踪 (即它们不会在location.hash中被更新也不会被浏览器历史所标记).

    设置当前激活页面的样式
    activePageClass (字符串, 默认: "ui-page-active"):给当前页面(包括转场中的) 分配class。
    当使用了jQuery Mobile后,默认当前激活页面中的ui-page元素都会使用框架默认的样式中定义的ui-page-active,如果要对其进行修改,可以设置$.mobile对象中的activePageClass属性,比如:
    $(document).bind("mobileinit", function(){
      $.mobile.activePageClass="ui-page-custom";
    });
    其中ui-page-custome则为用户自定义的样式。

    设置当前激活页面的按钮
    activeBtnClass (字符串, 默认: "ui-page-active"):给活动状态的按钮分配class值,该class值必须在css框架中存。

    设置ajax
    ajaxEnabled (布尔值, 默认: true):Jquery Mobile 会自动通过ajax处理链接点击以及表单提交。如果无法处理,url hash 监听将会被禁用,url也会像常规那样发出HTTP 请求.
    ajaxLinksEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理链接的点击。
    ajaxFormsEnabled (布尔值, 默认: true):可行时,Jquery Mobile 就会自动通过ajax处理表单的提交。

    设置哈希值
    hashListeningEnabled (布尔值, 默认: true)
    Jquery Mobile 会自动监听与处理 location.hash的改变。禁用它会防止Jquery Mobile处理 location.hash的改变。使你可以自己处理他们,或者在文档中用完整的链接地址指到一个特定的id值上。

    设置默认的转场效果
    defaultTransition (字符串, 默认: 'slide'):设定使用AJAX进行页面转场的默认的转场效果。设为"none"的话则默认没有转场的动画。
    默认的jQuery Mobile的页面和对话框的效果都是通过ajax实现的。默认的页面切换效果是幻灯片切换,默认的对话框出现的效果是弹出。如果需要改变这些效果的话 ,同样是如下代码所示,设置$.mobile对象的defaultPageTransition和defaultDialogTransition属性就 可以了。
     $(document).bind("mobileinit", function() {
      $.mobile.defaultPageTransition = "fade";
      $.mobile.defaultDialogTransition = "fade";
     });
    jQuery Mobile提供了6种效果供用户选择,分别是:slide, slideup, slidedown, pop, fade, 和flip,用户可以按照上面的方法进行设置。

    设置加载时默认信息
    loadingMessage (字符串, 默认: "loading"):设置页面加载时显示的文本. 如果设置为false,将不会显示任何文字。
    加载信息会在加载页面时显示给用户看,要更改这个设置,只需要修改$.mobile对象的loadingMessage属性即可,如下:
      $(document).bind("mobileinit", function() {
      $.mobile.loadingMessage = "Please wait";
      });

    设置加载时错误信息
    pageLoadErrorMessage (字符串, 默认: "Error Loading Page"):通过ajax加载页面失败时出现的文本信息。
    $(document).bind("mobileinit", function() {
      $.mobile.pageLoadErrorMessage = 'Sorry, something went wrong. Please try again.';
    });

    设置页面的最小的卷动距离
    minScrollBack (字符串,默认:'150'):返回一个页面的最小的卷动距离。
    gradeA (返回一个布尔值, 默认: 返回$.support.mediaquery的值):浏览器必须符合所有支持的条件才会返回 true.
  • 相关阅读:
    算法:合并排序(Merge Sort)
    安全:Web 安全学习笔记
    算法:冒泡排序(Bubble Sort)、插入排序(Insertion Sort)和选择排序(Selection Sort)总结
    算法:四种冒泡排序(Bubble Sort)实现
    算法:阶乘的五种算法
    算法:递归知识文章汇总
    算法:插入排序(Insertion Sort)
    .NET:线程本地存储、调用上下文、逻辑调用上下文
    算法:Rate of Growth
    企业应用:一个够用的、通用的状态机(管理实体的业务状态)
  • 原文地址:https://www.cnblogs.com/lhj-blog/p/7269106.html
Copyright © 2020-2023  润新知