Javascript jQuery Mobile：动态添加内容的标记增强

我想知道如何动态增强jQuery移动页面

我曾尝试使用以下方法：

$（'[data role=“page”]'）。触发器（'create'）

及

$（'[data role=“page”]'）。page（）

另外，如何防止仅对复选框进行增强标记？

免责声明： 这篇文章也可以在我的博客中找到

简介： 有几种方法可以增强动态创建的内容标记。仅仅向jQuery Mobile页面动态添加新内容是不够的，新内容必须使用经典的jQuery Mobile样式进行增强。由于这是一项相当繁重的任务，因此需要确定一些优先级，如果可能的话，jQuery Mobile需要尽可能少地进行增强。如果只需要设置一个组件的样式，不要增强整个页面

这一切意味着什么？当page plugin发送一个pageInit事件时，大多数小部件使用该事件自动初始化自己。它将自动增强在页面上找到的小部件的任何实例

但是，如果在客户端生成新标记或通过Ajax加载内容并将其注入页面，则可以触发create事件来处理新标记中包含的所有插件的自动初始化。这可以在任何元素（甚至页面div本身）上触发，从而节省了手动初始化每个插件（listview按钮、select等）的任务

考虑到这一点，让我们讨论增强级别。其中有三种，它们从对资源要求较低的资源到要求较高的资源进行分类：

增强单个组件/小部件

增强页面内容

增强整页内容（页眉、内容、页脚）

增强单个组件/小部件： 重要提示：以下增强方法仅用于当前/活动页面。对于动态插入的页面，一旦插入DOM，这些页面及其内容将得到增强。在动态创建的页/活动页以外的页上调用任何方法都将导致错误

每个jQuery Mobile小部件都可以动态增强：

:

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

删除listview元素：

$('#mylist li').eq(0).addClass('ui-screen-hidden'); 

增强示例：

请注意，refresh（）方法仅影响附加到列表的新节点。这样做是出于性能原因

listview的一个亮点是过滤功能。不幸的是，由于某些原因，jQuery Mobile将无法向现有listview动态添加筛选器选项。幸运的是，有一个解决办法。如果可能，请删除当前listview，并在启用文件管理器选项的情况下添加另一个listview

下面是一个工作示例：

增强示例：

还有一件事，您不需要使用输入元素来创建按钮，甚至可以使用基本div来创建按钮，下面是一个示例：

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

增强示例：

下面是如何添加动态导航栏选项卡的演示：

在创建前的页面中还有一个事件：

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

增强示例：

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

增强示例：

pagebeforecreate事件期间的增强示例：

滑块的动态创建有点麻烦，请在此处阅读更多信息：

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

或者，如果要选择/取消选择另一个Radiobox/Checkbox元素：

$("input[type='radio']").eq(0).attr("checked",false).checkboxradio("refresh");

或

增强示例：

标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

增强示例：

不幸的是，不能通过某些特定的方法增强可折叠元素，所以必须改用触发器（'create'）

增强示例：

标记增强：

$(".selector").table("refresh");

虽然这是一种标准的表格增强方法，但在这一点上，我无法让它工作。所以改用触发器（'create'）

增强示例：

-新

面板标记增强：

$('#mylist').listview('refresh');

$('[type="button"]').button();

$('[data-role="navbar"]').navbar();

$('[type="text"]').textinput();   

$('[type="range"]').slider();  

$('[type="radio"]').checkboxradio();

$('select').selectmenu();  

$('.selector').trigger('pagecreate');

 $(document).bind('mobileinit',function(){
      $.mobile.page.prototype.options.keepNative = "select, input";
 });    

动态添加到面板的内容的标记增强：

$('.selector').trigger('pagecreate');

例如：

增强页面内容： 在生成/重建整个页面内容的情况下，最好一次生成/重建所有内容，可以通过以下方式完成：

$('#index').trigger('create');

增强示例：

增强整页内容（页眉、内容、页脚）： 不幸的是，触发器（'create'）不能增强页眉和页脚标记。在这种情况下，我们需要大炮：

$('#index').trigger('pagecreate');

增强示例：

这几乎是一种神秘的方法，因为我在官方jquerymobile文档中找不到它。尽管如此，在jquerymobile的bug跟踪器中还是可以很容易地找到它，并警告说除非确实需要，否则不要使用它

注意，.trigger（'pagecreate'）假设每页刷新只能使用一次，我发现它不真实：

第三方增强插件 有几个第三方增强插件。有些是对现有方法的更新，有些是为了修复损坏的jQM功能

• 按钮文本更改
  不幸的是，我找不到这个插件的开发者。原始资料来源：
  下面是一个使用谷歌地图api3的工作示例：
  此方法可用于获得正确的最大内容高度，并且必须与pageshow事件一起使用

  function getRealContentHeight() {
      var header = $.mobile.activePage.find("div[data-role='header']:visible");
      var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
      var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
      var viewport_height = $(window).height();
  
      var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
      if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
          content_height -= (content.outerHeight() - content.height());
      } 
      return content_height;
  }
  

  到页眉、内容、页脚容器
  这也需要在应用程序加载阶段打开：

  $(document).one("mobileinit", function () {
      $.mobile.ignoreContentEnabled=true;
  });
  

  在初始化jquery-mobile.js之前初始化它（参见下面的示例）。
  有关这方面的更多信息，请参见：
  例如：
  要重新创建页面，请使用以下命令：

  $('#index').live('pagebeforeshow', function (event) {
      $.mobile.ignoreContentEnabled = false;
      $(this).attr('data-enhance','true');
      $(this).trigger("pagecreate")
  });
  

• 方法2：
  第二个选择是做我自己