Skip to content

Instantly share code, notes, and snippets.

@poonkave

poonkave/jqm1.4x.enhanceWithin

Created May 1, 2014 14:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save poonkave/1685b9799319bf44187b to your computer and use it in GitHub Desktop.
Save poonkave/1685b9799319bf44187b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jqm1.4x.enhanceWithin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>enhanceWithin demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$.mobile.document.on("click", "#insert-content", function () {
var $pageContent = $("#page-content");
var countries =
"<div>" +
"<div data-role='collapsible' data-collapsed='false'>" +
"<h2>Countries</h2>" +
"<ul data-role='listview'>" +
"<li><a href='http://en.wikipedia.org/wiki/Australia'>Australia</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Russia'>Russia</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Paraguay'>Paraguay</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Belgium'>Belgium</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Democratic_Republic_of_the_Congo'>Congo</a></li>" +
"</ul>" +
"</div>" +
"</div>";
var cities =
"<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&oacute;n</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Liege'>Li&egrave;ge</a></li>" +
"<li><a href='http://en.wikipedia.org/wiki/Kinshasa'>Kinshasa</a></li>" +
"</ul>" +
"</div>" +
"</div>";
$pageContent.append(countries).append(cities);
$pageContent.enhanceWithin();
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>jQuery Mobile 1.4.2 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" data-role="button">Insert</a>
</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment