动态添加内容的标记增强
简介
要增强动态添加内容的标记，仅仅添加新元素是不够的。新内容需要 jQuery Mobile 的样式。由于此过程占用大量资源，因此尽量减少必要的增强功能至关重要。
增强级别
增强级别共有三个：
- 单个组件/小部件
- 页面内容
- 整页内容（页眉、内容、页脚）
增强单个组件/小部件
注意： 此方法只能在当前/活动页面上使用。
每个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中文网其他相关文章！
