How Can I Efficiently Enhance the Markup of Dynamically Added Content in jQuery Mobile?

Markup Enhancement of Dynamically Added Content

Introduction

To enhance themarkupof dynamically added content, it's not sufficient to merely append new elements. The new content requires jQuery Mobile's styling. Since this process is resource-heavy, it's crucial to minimize the necessary enhancements.

Enhancement Levels

There are three enhancement levels:

1. Single component/widget
2. Page content
3. Full page content (header, content, footer)

Enhance a Single Component/Widget

Note: This method should only be used on the current/active page.

Each jQuery Mobile widget can be enhanced dynamically:

Listview

• Markup Enhancement: $('#mylist').listview('refresh');
• Example: https://jsfiddle.net/Gajotres/LrAyE/
• Note: refresh() affects only new listview elements.

Button

• Markup Enhancement: $('[type="button"]').button();
• Example: https://jsfiddle.net/Gajotres/m4rjZ/
• Note: Buttons can be created from basic divs as well: https://jsfiddle.net/Gajotres/L9xcN/

Navbar

• Markup Enhancement: $('[data-role="navbar"]').navbar();
• Example: https://jsfiddle.net/Gajotres/w4m2B/
• Dynamic Tab Addition: https://jsfiddle.net/Gajotres/V6nHp/

Text Inputs, Search Inputs & Textareas

• Markup Enhancement: $('[type="text"]').textinput();
• Example: https://jsfiddle.net/Gajotres/9UQ9k/

Sliders & Flip Toggle Switch

• Markup Enhancement: $('[type="range"]').slider();
• Example: https://jsfiddle.net/Gajotres/caCsf/
• Note: Sliders have some enhancements during the pagebeforecreate event: https://jsfiddle.net/Gajotres/NwMLP/
• Read more: https://stackoverflow.com/a/15708562/1848600

Checkbox & Radiobox

• Markup Enhancement: $('[type="radio"]').checkboxradio();
• Example: https://jsfiddle.net/Gajotres/VAG6F/
• Selection/Deselection: $("[type='radio']").eq(0).attr("checked", false).checkboxradio("refresh");

Select Menu

• Markup Enhancement: $('select').selectmenu();
• Example: https://jsfiddle.net/Gajotres/dEXac/

Collapsible

• Markup Enhancement: $('.selector').trigger('create');
• Example: https://jsfiddle.net/Gajotres/ck6uK/

Table

• Markup Enhancement: $.(".selector").table("refresh");
• Example: https://jsfiddle.net/Gajotres/Zqy4n/

Panels

• Panel Markup Enhancement: $('.selector').trigger('pagecreate');
• Content Markup Enhancement: $('.selector').trigger('pagecreate');
• Example: https://jsfiddle.net/Palestinian/PRC8W/

Enhance a Page Content

Enhance the entire page content:

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

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

Enhance a Full Page Content (Header, Content, Footer)

Use trigger('pagecreate');, but note that it should only be used once per page refresh.

Example: https://jsfiddle.net/Gajotres/DGZcr/

3rd Party Enhancement Plugins

• Button Text Change: https://jsfiddle.net/Gajotres/mwB22/

Get Correct Maximum Content Height

Use CSS to set the height of the content div relative to the header and footer heights.

Prevent Markup Enhancement

• Method 1: Add data-enhance="false" to the header, content, or footer container.
• Method 2: Add data-role="none" to elements that should not be enhanced.
• Method 3: Prevent certain HTML elements from enhancement: $.mobile.page.prototype.options.keepNative = "select, input";

The above is the detailed content of How Can I Efficiently Enhance the Markup of Dynamically Added Content in jQuery Mobile?. For more information, please follow other related articles on the PHP Chinese website!