如何有效增強 jQuery Mobile 中動態新增內容的標記？

動態加入內容的標記增強

簡介

要增強動態添加內容的標記，僅僅添加新元素是不夠的。新內容需要 jQuery Mobile 的樣式。由於此過程佔用大量資源，因此盡量減少必要的增強功能至關重要。

增強等級

增強等級共有三種：

1. 單一組件/小工具
2. 頁面內容
3. 整頁內容（頁眉、內容、頁腳）

增強單一元件/小工具

注意： 此方法只能在目前/活動頁面上使用。

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

Listview

• 標記增強： $('#mylist').listview('刷新');
• 範例： https://jsfiddle.net/Gajotres/LrAyE/
• 注意：刷新（）僅影響新的清單視圖元素。

按鈕

• 標記增強功能： $('[type="button"]').button( );
• 範例： https://jsfiddle.net/Gajotres/m4rjZ/
• 注意： 按鈕也可以從基本 div 建立： https://jsfiddle.net/Gajotres/L9xcN/

導航欄

• 標記增強： $('[data-role="navbar"]').navbar();
• 範例： https://jsfiddle.net/Gajotres/w4m2B/
• 動態選項卡新增： https://jsfiddle.net/Gajotres/V6nHp/

文字輸入、搜尋輸入和文字區域

• 標記增強： $('[type="text"]').textinput();
• 範例： https://jsfiddle.net/Gajotres/9UQ9k/

滑桿和翻轉切換開關

• 標記增強： $('[type="range"]').slider();
• 範例： https://jsfiddle.net/Gajotres/caCsf/
• 注意： 滑桿在pagebeforecreate 事件期間有一些增強功能：https://jsfiddle.net/Gajotres/NwMLP/
• 閱讀更多： https://stackoverflow.com/a/15708562/1848600

複選框和單選框

• 標記增強： $('[type="radio"]').checkboxradio();
• 範例： https://jsfiddle.net/Gajotres/VAG6F/
• 選擇/取消選擇： $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

選擇選單

• 標記增強： $('select').selectmenu();
• 範例： https://jsfiddle.net/Gajotres/dEXac/

可折疊

• 標記增強：
• 標記增強： $('.selector').trigger('create');

範例： https://jsfiddle.net/Gajotres/ck6uK/

• 表格
• 標記增強：

標記增強： $.(".selector").table("刷新");

範例：
• https://jsfiddle.net/Gajotres/Zqy4n/
• 面板
• 面板標記增強： $('.selector').trigger('pagecreate');

內容標記增強： $('.selector').trigger('pagecreate');

範例：

https://jsfiddle.net/Palestinian/PRC8W/

增強頁面內容

增強整個頁面內容：$('#index').trigger('create');

範例：

https://jsfiddle.net/Gajotres/426NU/

增強整頁內容（標題、內容、頁腳)

使用觸發器('pagecreate') ;，但請注意，每次頁面刷新只能使用一次。

• 範例： https:// /jsfiddle.net/Gajotres/DGZcr/

第3 方增強外掛程式

按鈕文字變更： https://jsfiddle.net/Gajotres/mwB22/

• 取得正確的最大值內容高度
• 使用CSS設定內容的高度div 相對於頁眉和頁腳高度。

防止標記增強方法 1：在頁眉、內容中加入 data-enhance="false"，或頁腳容器。 方法二：給不該存在的元素加上data-role="none" 方法三：阻止某些HTML元素增強：$.mobile.page.prototype.options.keepNative = "select, input";

以上是如何有效增強 jQuery Mobile 中動態新增內容的標記？的詳細內容。更多資訊請關注PHP中文網其他相關文章！