jQuery Mobile：動態添加內容的標記增強

Question

我想知道如何動態增強jQuery Mobile頁面？

我嘗試使用以下方法：

1. $('[data-role="page"]').trigger('create');

   和

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

另外，如何僅阻止復選框的增強標記？

Answer 1

免責聲明：

本文也可以在我的博客HERE中找到 。

介紹：

有幾種增強動態創建的內容標記的方法。 僅向jQuery Mobile頁面動態添加新內容還不夠，必須使用經典的jQuery Mobile樣式來增強新內容。 因為這是處理繁重的任務，所以需要有一些優先級，如果可能的話， jQuery Mobile需要做的工作盡可能少。 如果只需要樣式化一個組件，則不要增強整個頁面。

這一切意味着什么？ 當頁面插件調度pageInit事件時，大多數小部件都使用該事件來自動初始化自身。 它將自動增強在頁面上找到的小部件的所有實例。

但是，如果您在客戶端生成新的標記或通過Ajax加載內容並將其注入到頁面中，則可以觸發create事件來處理新標記中包含的所有插件的自動初始化。 可以在任何元素（甚至是頁面div本身）上觸發此操作，從而省去了手動初始化每個插件（列表視圖按鈕，選擇等）的任務。

考慮到這一點，讓我們討論增強級別。 其中有三種，它們從對資源的需求較少到對資源的​​需求較高的排序：

1. 增強單個組件/小部件
2. 增強頁面內容
3. 增強整頁內容（頁眉，內容，頁腳）

增強單個組件/小部件：

重要：以下增強方法僅在當前/活動頁面上使用。 對於動態插入的頁面，將這些頁面及其內容插入DOM后將得到增強。 調用動態創建的頁面/活動頁面以外的任何方法，將導致錯誤。

每個jQuery Mobile小部件都可以動態增強：

1. Listview ：

   標記增強：

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

   刪除列表視圖元素：

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

   增強示例： http : //jsfiddle.net/Gajotres/LrAyE/

   請注意，refresh（）方法僅影響追加到列表的新節點。 這樣做是出於性能原因。

   列表視圖的重點之一是過濾功能。 不幸的是，由於某種原因，jQuery Mobile將無法向現有列表視圖動態添加過濾器選項。 幸運的是，有一種解決方法。 如果可能，請刪除當前的列表視圖，並添加另一個打開了filer選項的列表視圖。

   這是一個工作示例： https : //stackoverflow.com/a/15163984/1848600

    $(document).on('pagebeforeshow', '#index', function(){ $('<ul>').attr({'id':'test-listview','data-role':'listview', 'data-filter':'true','data-filter-placeholder':'Search...'}).appendTo('#index [data-role="content"]'); $('<li>').append('<a href="#">Audi</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Mercedes</a>').appendTo('#test-listview'); $('<li>').append('<a href="#">Opel</a>').appendTo('#test-listview'); $('#test-listview').listview().listview('refresh'); }); 

2. 紐扣

   標記增強：

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

   增強示例： http : //jsfiddle.net/Gajotres/m4rjZ/

   還有一件事，您不需要使用輸入元素來創建按鈕，甚至可以使用基本的div來完成，這是一個示例： http : //jsfiddle.net/Gajotres/L9xcN/

3. 導航欄

   標記增強：

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

   增強示例： http : //jsfiddle.net/Gajotres/w4m2B/

   這是一個演示如何添加動態導航欄標簽的演示： http : //jsfiddle.net/Gajotres/V6nHp/

   在pagebeforecreate事件中還有一個： http : //jsfiddle.net/Gajotres/SJG8W/

4. 文字輸入，搜索輸入和文字區域

   標記增強：

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

   增強示例： http : //jsfiddle.net/Gajotres/9UQ9k/

5. 滑塊和翻轉撥動開關

   標記增強：

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

   增強示例： http : //jsfiddle.net/Gajotres/caCsf/

   pagebeforecreate事件期間的增強示例： http : //jsfiddle.net/Gajotres/NwMLP/

   滑塊有點可動態創建，請在此處了解更多信息： https : //stackoverflow.com/a/15708562/1848600

6. 復選框和單選框

   標記增強：

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

   或者，如果您要選擇/取消選擇另一個Radiobox / Checkbox元素：

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

   要么

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

   增強示例： http : //jsfiddle.net/Gajotres/VAG6F/

7. 選擇菜單

   標記增強：

    $('select').selectmenu(); 

   增強示例： http : //jsfiddle.net/Gajotres/dEXac/

8. 可折疊

   不幸的是，可折疊元素無法通過某些特定方法進行增強，因此必須使用trigger（'create'）來代替。

   增強示例： http : //jsfiddle.net/Gajotres/ck6uK/

9. 表

   標記增強：

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

   盡管這是表增強的標准方法，但目前我無法使其工作。 因此，請使用trigger（'create'）。

   增強示例： http : //jsfiddle.net/Gajotres/Zqy4n/

10. 面板 - 新

    面板標記增強：

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

    動態添加到面板的內容的標記增強功能：

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

    示例： http ： //jsfiddle.net/Palestinian/PRC8W/

增強頁面內容：

如果我們要生成/重建整個頁面的內容，最好一次全部完成，可以這樣：

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

增強示例： http : //jsfiddle.net/Gajotres/426NU/

增強整頁內容（頁眉，內容，頁腳）：

對於我們來說不幸的是，trigger（'create'）無法增強頁眉和頁腳標記。 在這種情況下，我們需要大槍：

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

增強示例： http : //jsfiddle.net/Gajotres/DGZcr/

這幾乎是一個神秘的方法，因為在官方jQuery Mobile文檔中找不到它。 仍然很容易在jQuery Mobile Bug跟蹤器中找到警告，除非確實需要，否則不要使用它。

注意， .trigger（'pagecreate'）; 可以假設每個頁面刷新一次，我發現它是不正確的：

http://jsfiddle.net/Gajotres/5rzxJ/

第三方增強插件

有幾個第三方增強插件。 有些是對現有方法的更新，有些是修復損壞的jQM功能。

• 按鈕文字變更

  不幸的是找不到該插件的開發人員。 原始SO來源： 更改按鈕文字jquery mobile

   (function($) { /* * Changes the displayed text for a jquery mobile button. * Encapsulates the idiosyncracies of how jquery re-arranges the DOM * to display a button for either an <a> link or <input type="button"> */ $.fn.changeButtonText = function(newText) { return this.each(function() { $this = $(this); if( $this.is('a') ) { $('span.ui-btn-text',$this).text(newText); return; } if( $this.is('input') ) { $this.val(newText); // go up the tree var ctx = $this.closest('.ui-btn'); $('span.ui-btn-text',ctx).text(newText); return; } }); }; })(jQuery); 

  工作示例： http : //jsfiddle.net/Gajotres/mwB22/

獲取正確的最大內容高度

如果頁面的頁眉和頁腳具有恆定的高度，則可以使用一些CSS技巧輕松地將div設置為覆蓋全部可用空間：

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

這是Google maps api3演示的工作示例： http : //jsfiddle.net/Gajotres/7kGdE/

此方法可用於獲取正確的最大內容高度，並且必須與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;
}

這是一個實時jsFiddle示例： http : //jsfiddle.net/Gajotres/nVs9J/

要記住一件事。 此功能將正確地使您獲得最大的可用內容高度，同時可以用於拉伸相同的內容。 不幸的是，它不能用於將img拉伸到整個內容高度，img標簽的開銷為3px。

防止加價的方法：

可以通過幾種方法來完成此操作，有時您需要將它們結合起來以達到期望的結果。

• 方法1：

  它可以通過添加以下屬性來實現：

   data-enhance="false" 

  到頁眉，內容，頁腳容器。

  這也需要在應用加載階段啟用：

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

  在初始化jquery-mobile.js之前對其進行初始化（請看下面的示例）。

  關於此的更多信息可以在這里找到：

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  示例： http ： //jsfiddle.net/Gajotres/UZwpj/

  要重新創建頁面，請使用以下命令：

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

• 方法2：

  第二種選擇是使用此行手動執行此操作：

   data-role="none" 

  示例： http ： //jsfiddle.net/Gajotres/LqDke/

• 方法3：

  可以阻止某些HTML元素進行標記增強：

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

  示例： http ： //jsfiddle.net/Gajotres/gAGtS/

  在初始化jquery-mobile.js之前，再次對其進行初始化（請看下面的示例）。

標記增強問題：

有時，從頭開始創建組件時（例如listview），會發生此錯誤：

初始化之前無法在listview上調用方法

可以在標記增強之前通過組件初始化來防止此問題，這是解決此問題的方法：

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

標記覆蓋問題：

如果由於某種原因需要更改默認的jQuery Mobile CSS，則必須使用!important覆蓋完成。 如果沒有它，則無法更改默認的CSS樣式。

例：

#navbar li {
    background: red !important;
}

jsFiddle示例： http : //jsfiddle.net/Gajotres/vTBGa/

變化：

• 2013年1月2日-添加了動態導航欄演示
• 01.03.2013-添加了有關如何向列表視圖動態添加過濾的注釋
• 2013年7月3日-添加了新章節： 獲取正確的最大內容高度
• 2013年3月17日-在本章中添加了一些文字： 獲取正確的最大內容高度
• 2013年3月29日-添加了有關動態創建的滑塊的新內容並修復了示例錯誤
• 2013年3月4日-添加了有關動態創建的可折疊元素的新內容
• 04.04.2013-添加了第3方插件一章
• 20.05.2013-添加了動態添加的面板和內容
• 2013年5月21日-添加了另一種設置完整內容高度的方法
• 2013年6月20日-添加了新章節： 標記覆蓋問題
• 29.06.2013-添加了何時使用增強方法的重要說明

Answer 2

在JQMobile 1.4中，您可以對所有子項執行.enhanceWithin（） http://api.jquerymobile.com/enhanceWithin/

var content = '<p>Hi</p>';
$('#somediv').html(content);
$('#somediv').enhanceWithin();