lukegalea/jqm_guiders.html

## jqm_guiders.html
<!DOCTYPE html>
<html><head>
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
  <title>Title</title>

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

  <link rel="stylesheet" type="text/css" href="./guider.css">
  <script type="text/javascript" src="./guider.js"></script>

  <script type="text/javascript">

  $('div').live('pageshow',function(event, ui){
  guider.createGuider({
    buttons: [{name: "Next"}],
    description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
    id: "first",
    next: "second",
    overlay: true,
    width: 280,
    title: "Welcome to Guiders.js!"
  }).show();

  guider.createGuider({
   buttons: [{name: "Next"}],
   description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
   id: "second",
   next: "third",
   overlay: true,
   title: "Welcome to Guiders.js!",
   attachTo: "#item2",
   width: 280,
   position: 6
   });

});
  </script>

</head>
<body>
  <div data-role="page" id="second-page" data-url="second-page">
    <div data-role="header">
        <h1>Title2</h1>
    </div><!-- /header -->

    <div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>Item 121</li>
            <li id="item2">Item 122</li>
            <li>Parent Item<ul data-role="listview">
                <li>Sub Item 1231</li>
                <li>Sub Item 1232</li>
                <li>Sub Item 1233</li>
                </ul>
            </li>
        </ul>
        <ul data-role="listview" data-inset="true">
            <li>Item 221</li>
            <li>Item 222</li>
            <li>Parent Item<ul data-role="listview">
                <li>Sub Item 2231</li>
                <li>Sub Item 2232</li>
                <li>Sub Item 2233</li>
                </ul>
            </li>
        </ul>
    </div>
</div>
</body></html>
	<!DOCTYPE html>
	<html><head>
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"/>
	<title>Title</title>

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
	<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

	<link rel="stylesheet" type="text/css" href="./guider.css">
	<script type="text/javascript" src="./guider.js"></script>

	<script type="text/javascript">

	$('div').live('pageshow',function(event, ui){
	guider.createGuider({
	buttons: [{name: "Next"}],
	description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
	id: "first",
	next: "second",
	overlay: true,
	width: 280,
	title: "Welcome to Guiders.js!"
	}).show();

	guider.createGuider({
	buttons: [{name: "Next"}],
	description: "Guiders are a user interface design pattern for introducing features of software. This dialog box, for example, is the first in a series of guiders that together make up a guide.",
	id: "second",
	next: "third",
	overlay: true,
	title: "Welcome to Guiders.js!",
	attachTo: "#item2",
	width: 280,
	position: 6
	});

	});
	</script>

	</head>
	<body>
	<div data-role="page" id="second-page" data-url="second-page">
	<div data-role="header">
	<h1>Title2</h1>
	</div><!-- /header -->

	<div data-role="content">
	<ul data-role="listview" data-inset="true">
	<li>Item 121</li>
	<li id="item2">Item 122</li>
	<li>Parent Item<ul data-role="listview">
	<li>Sub Item 1231</li>
	<li>Sub Item 1232</li>
	<li>Sub Item 1233</li>
	</ul>
	</li>
	</ul>
	<ul data-role="listview" data-inset="true">
	<li>Item 221</li>
	<li>Item 222</li>
	<li>Parent Item<ul data-role="listview">
	<li>Sub Item 2231</li>
	<li>Sub Item 2232</li>
	<li>Sub Item 2233</li>
	</ul>
	</li>
	</ul>
	</div>
	</div>
	</body></html>