-
Notifications
You must be signed in to change notification settings - Fork 60
/
Copy pathenhanceWithin.xml
53 lines (52 loc) · 3.41 KB
/
enhanceWithin.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<?xml version="1.0"?>
<entry type="method" name="enhanceWithin" return="jQuery">
<title>.enhanceWithin()</title>
<desc>Enhance all the children of all elements in the set of matched elements.</desc>
<longdesc>
<p>This method is responsible for performing all jQuery Mobile enhancement. Given a set of DOM elements it will enhance their children with all the widgets available.</p>
<p>The enhancement is based on each widget's <code>initSelector</code> property. This selector will be used to identify the elements upon which the widget will be instantiated.</p>
<p>You can shield elements and their children from enhancement by adding the attribute <code>data-enhance="false"</code> to an element. This will cause it, and all its children to be ignored by <code>.enhanceWithin()</code>. Unfortunately, checking elements to see whether they are children of an element that has been marked with <code>data-enhance="false"</code> is performance-intensive. Thus, the presence of <code>data-enhance="false"</code> will only be considered if the global flag <a href="/global-config/#ignoreContentEnabled"><code>$.mobile.ignoreContentEnabled</code></a> is set to <code>true</code>.</p>
<p><strong>Caveat:</strong> <code><placeholder name="name"/></code> does not attempt to resolve issues related to the order in which widgets are enhanced. For example, enhancing <a href="/filterable/"><code>filterable</code></a> widgets before <a href="/checkboxradio/"><code>checkboxradio</code></a> widgets are enhanced can cause the <code>checkboxradio</code> widgets to be displayed incorrectly. If this affects you, then you must ensure that the widgets which need to be enhanced early are instantiated before the rest of the widgets. One possibility for accomplishing this is to instantiate your widgets during the page widget's <code>pagebeforecreate</code> event.</p>
</longdesc>
<signature>
</signature>
<example>
<height>550</height>
<desc>Injecting new content at runtime and enhancing it with <code><placeholder name="name"/></code>.</desc>
<html><![CDATA[
<script>
$.mobile.document.on( "click", "#insert-content", function() {
var content =
"<div>" +
"<div data-role='collapsible' data-collapsed='false'>" +
"<h2>Cities</h2>" +
"<ul data-role='listview'>" +
"<li><a href='http://en.wikipedia.org/wiki/Sydney'>Sydney</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Yekaterinburg'>Yekaterinburg</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Asuncion'>Asunción</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Liege'>Liège</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Kinshasa'>Kinshasa</a></li>" +
"<li>" +
"<div data-role='controlgroup' data-type='horizontal'>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Add</a>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Remove</a>" +
"<a href='#' class='ui-btn ui-shadow ui-corner-all'>Edit</a>" +
"</div>" +
"</li>" +
"</ul>" +
"</div>" +
"</div>";
$( content ).appendTo( "#page-content" ).enhanceWithin();
});
</script>
<div data-role="header">
<h2>jQuery Mobile Example</h2>
</div>
<div role="main" class="ui-content" id="page-content">
<p>Content will be added at runtime when you click the button below.</p>
<p><a href="#" id="insert-content" class="ui-button ui-corner-all ui-shadow">Insert</a></p>
</div>
]]></html>
</example>
<category slug="methods"/>
</entry>