如何有效增强 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中文网其他相关文章！