创建页面
接下来，我们开始创建相关的页面，首先将设计首页index.html,其目录结构如下：
其中index.html代码如下：
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../lib/jqm/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="../../lib/jqm/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../lib/jstorage/jstorage.min.js" type="text/javascript"></script>
<script src="app/DataContext.js" type="text/javascript"></script>
<script src="app/Controller.js" type="text/javascript"></script>
<script src="app/NoteModel.js" type="text/javascript"></script>
<script src="spec/TestHelper.js" type="text/javascript"></script>
<!—--- 这里添加相关的启动事件----->
<script src="../../Lib/jqm/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="notes-list-page" data-title="My Notes">
<div data-role="header" data-position="fixed">
<h1>
My Notes</h1>
<a href="#note-editor-page" class="ui-btn-right" data-theme="b" data-icon="plus">New</a>
</div>
<div data-role="content" id="notes-list-content">
</div>
</div>
<</body>
</html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../lib/jqm/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="../../lib/jqm/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="../../lib/jstorage/jstorage.min.js" type="text/javascript"></script>
<script src="app/DataContext.js" type="text/javascript"></script>
<script src="app/Controller.js" type="text/javascript"></script>
<script src="app/NoteModel.js" type="text/javascript"></script>
<script src="spec/TestHelper.js" type="text/javascript"></script>
<!—--- 这里添加相关的启动事件----->
<script src="../../Lib/jqm/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="notes-list-page" data-title="My Notes">
<div data-role="header" data-position="fixed">
<h1>
My Notes</h1>
<a href="#note-editor-page" class="ui-btn-right" data-theme="b" data-icon="plus">New</a>
</div>
<div data-role="content" id="notes-list-content">
</div>
</div>
<</body>
</html>
在上面的代码中，首先引用了jQuery Mobile的类库和相关的之前我们编写的各种js,注意我们留空了启动事件的部分暂时没编写，这部分的代码会在稍后进行编写，凡是希望应用在启动的时候进行相关初始化操作的代码，都可以在这里编写。
接下来代码中，就是使用jQuery mobile的模版，设置了页面的布局，其中分别用到了jQuery Mobile内置的样式模版定义了header部分和主体部分，如下图：
接下来，我们开始补充页面初始化时加载的脚本，如下代码：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../../lib/jqm/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="../../lib/jqm/jquery-1.6.4.min.js" type="text/javascript"></script>
<scriptsrc="../../lib/jstorage/jstorage.min.js" type="text/javascript"></script>
<script src="app/DataContext.js" type="text/javascript"></script>
<script src="app/Controller.js" type="text/javascript"></script>
<script src="app/NoteModel.js" type="text/javascript"></script>
<script src="spec/TestHelper.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
//Notes.testHelper.createDummyNotes();
Notes.controller.init();
});
</script>
<scriptsrc="../../Lib/jqm/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link href="../../lib/jqm/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css" />
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script src="../../lib/jqm/jquery-1.6.4.min.js" type="text/javascript"></script>
<scriptsrc="../../lib/jstorage/jstorage.min.js" type="text/javascript"></script>
<script src="app/DataContext.js" type="text/javascript"></script>
<script src="app/Controller.js" type="text/javascript"></script>
<script src="app/NoteModel.js" type="text/javascript"></script>
<script src="spec/TestHelper.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit",function(){
//Notes.testHelper.createDummyNotes();
Notes.controller.init();
});
</script>
<scriptsrc="../../Lib/jqm/jquery.mobile-1.0.min.js" type="text/javascript"></script>
要注意的是，我们在加载jQuery Mobile框架前，编写了mobileinit事件的代码，这个事件会在jQuery Mobile框架执行前进行相关的事件处理(具体可以参考：
http://jquerymobile.com/test/docs/api/globalconfig.html )。
在这个事件中会执行相关的函数调用，首先是调用TestHelper助手模块中的createDummyNotes()方法创建记事，接下来的的Notes.controller.init()是属于控制层的代码，我们稍后再编写。
通过以上过程的学习，你会发现我们的开发过程是遵守MVC架构的，其中的NoteModel类和DataContext数据模块可以被看作模型层，而jQuery Mobile则作为表现层的呈现，接下来开始编写控制层代码。
