1000k/description.md

## description.md

      
    Raw
  

              description.md
            
          
    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)

  
## dynamic_injection.html
<!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>
	<!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>