The way to inject list view into the page with jQuery Mobile 1.2.0.
Official tutorial is a little bit complex, so that I wrote this gist.
For more details, refer the following article:
jQuery Mobileでリストビューを動的に挿入する方法 | 1000g. (Japanese only)
Created
October 14, 2012 14:33
-
-
Save 1000k/3888765 to your computer and use it in GitHub Desktop.
Dynamically injecting list view
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>page 1</title> | |
| <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" /> | |
| <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> | |
| <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> | |
| <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| //$("#page1").live("pageshow", function(e, data) { | |
| $("#inject").live("click", function() { | |
| showList(); | |
| }); | |
| function showList() { | |
| var $page = $("#page1"), | |
| $header = $page.children(":jqmData(role=header)"), | |
| $content = $page.children(":jqmData(role=content)"); | |
| var $listview = $("<ul>").attr({"data-role":"listview", "data-inset":"true"}) | |
| .append( | |
| $("<li>").attr({"data-wrapperrels":"div", "data-iconpos":"right", "data-icon":"arrow-l"}) | |
| .append($("<a>").attr({"href":"#", "title":"Home", "data-rel":"back"}) | |
| .append($("<h3>").text("FOO")) | |
| .append($("<p>").attr({"class":"ui-li-aside ui-li-desc"}).text("BAR")) | |
| ) | |
| ).appendTo(":jqmData(role=content)"); | |
| $header.find("h1").html("Injected"); | |
| $content.html($listview); | |
| $page.page(); | |
| $content.find(":jqmData(role=listview)").listview(); | |
| $.mobile.changePage($page); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div data-role="page" id="page1"> | |
| <div data-role="header"> | |
| <h1>Dynamic Injection</h1> | |
| </div> | |
| <div data-role="content"> | |
| <a href="#" data-role="button" id="inject">Inject!</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment