博客

jQuery Mobile Page keepNativeSelector()方法

  • Post category:jquery

jQuery Mobile是一个专门为移动端开发设计的开源框架，提供了一系列的UI组件和API接口帮助我们开发出更加友好的手机应用。其中，Page是 jQuery Mobile 中最基本的组件之一，用于定义一个具有自动化生命周期处理机制的单页应用。

在开发中，我们可能会遇到一些需要自定义处理和维护某些元素的场景，这时候我们就需要使用jQuery Mobile提供的keepNativeSelector()方法来维护元素的自然状态。keepNativeSelector()方法是用于保留某些元素的自然状态，避免在应用元素特有的Jquery Mobile样式后，防止某些元素被修改或丢失原有的状态。

下面详细讲解一下“jQuery Mobile Page keepNativeSelector()方法”的使用方法和注意点。

keepNativeSelector()方法的基本用法

keepNativeSelector()方法接收一个字符串参数，用来指定哪些元素需要被保留自然状态。这里的自然状态可以理解为元素原本的默认样式或特性。

$.mobile.page.prototype.options.keepNativeSelector = 'select[data-role!="none"], textarea, input[data-role!="none"], button[data-role!="none"], .ui-slider';

通过以上代码，我们可以为所有 Page 组件的表单元素都添加 keepNativeSelector() 方法，代码的执行流程是当 Page 被初始化时，jQuery Mobile 会自动对应 Page 中的表单元素都使用 keepNativeSelector() 方法进行保留自然状态。

keepNativeSelector()方法的须知问题

  • keepNativeSelector() 方法只对 Page 有效，无法对组件级的元素产生作用（例如：按钮、对话框）。
  • keepNativeSelector() 方法只能用在需要修改或重写Page内容时进行调用，而不能作用在data-role属性值为“none”的元素上。

keepNativeSelector()方法的示例实现

示例1：利用keepNativeSelector()方法保留表单元素的默认状态

  1. 在 HTML 文件中添加一张图片
<img src="test.jpg" alt="test" class="origin-img">
  1. 在JS文件中为Page组件中的表单元素添加keepNativeSelector方法
$( document ).on( "pagecontainercreate", function () {
   $( ":input:not(select)" ).attr( "data-role", "none" );
});

$( "#formPage" ).on( "pagecreate", function () {
   $.mobile.keepNativeSelector = "input.data, input.time, input.datetime, input.datetime-local, input.email, input.month, input.number, input.range, input.search, input.tel, input.text, input.url, input.week, textarea";
   $.mobile.page.prototype.options.keepNativeSelector = $.mobile.keepNativeSelector;  
});

我们在上述代码块中将所有input元素与textarea元素和select元素的父级元素都设置为“data-role”属性不为“none”，从而让 jQuery Mobile 知道在此页面上我们需要保留所有的元素自然状态，避免jQuery Mobile为元素添加了默认样式。

示例2：在列表元素中使用 keepNativeSelector() 方法

  1. 像以往一样定义我们的列表元素
<section id="test-list">
    <ul data-role="listview" data-inset="true">
        <li><a href="#">item1</a></li>
        <li><a href="#">item2</a></li>
        <li><a href="#">item3</a></li>
    </ul>
</section>
  1. 在JS文件中给列表元素的父级添加 keepNativeSelector() 方法
$('#test-list').attr('data-enhanced', 'true');
$.mobile.keepNativeSelector = ':jqmData(role=none), :jqmData(role=list-divider), :jqmData(role=listview) > li > a';
$.mobile.page.prototype.options.keepNativeSelector = $.mobile.keepNativeSelector;

// 确认keepNativeSelector生效，使用Page事件log的方式，如下例：
$("#test-page").on("pagecreate", function(e) {
   console.log("===log=== this: ", this);
   console.log("===log=== options of event 'pagecreate': ", e);
});

通过以上代码给列表元素的父级增加了 keepNativeSelector() 实现，并在 console 展示了log日志的证明，我们就可以在列表元素中避免jQuery Mobile框架的样式重写，保留了原有元素的自然状态。

总之，在Web应用中，JavaScript的作用越来越异化，已经不仅仅是传统Web应用“页面更改、交互效果渲染”之外。在jQuery Mobile中，keepNativeSelector() 方法就是帮助我们使Web应用中的 JavaScript 代码具有更加现代化的高度管理性和可维护性，提升我们的应用的用户友好度的重要工具。

Tags: