Skip to content

Instantly share code, notes, and snippets.

@poonkave

poonkave/Panel_load_listview.html

Created March 7, 2013 17:13
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/5109803 to your computer and use it in GitHub Desktop.
Save poonkave/5109803 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Panel_load_listview.html
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$(document).on('pageinit', '#home', function () {
// code
var _menuLoaded = false;
$('#menuPanel').load('menu.html', function () {
$(this).find(":jqmData(role=listview)").listview();
$(this).trigger("updatelayout");
$.mobile.loading("hide");
_menuLoaded = true;
});
$("#menuPanel").on("panelopen", function (event, ui) {
if (!_menuLoaded) {
$.mobile.loading("show");
return;
}
$("#menuPanel").off("panelopen");
});
});
</script>
</head>
<body>
<div data-role="page" data-theme="c" id="home">
<div data-role="panel" id="menuPanel" data-display="reveal" data-dismissible="false">
</div>
<div data-role="header">
Left Panel - Dynamic Listview
</div>
<div data-role="content">
Example using <a href="http://api.jquery.com/load/" target="_blank"> $.load() </a> to build listview inside jQM Panel<br/>
<br/><br/>
<a href="#menuPanel" data-role="button" data-inline="true">Show left panel</a>
</div>
</div>
<div data-role="page" data-theme="c" id="page2">
<div data-role="header">
page2
</div>
<div data-role="content">
I am page2
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment