新增加记事页面设计
在新增加的记事页面中，注意我们是在index.html中增加相关的代码，并且注意其页面的data-role属性为page,代码如下：
<div data-role="page" id="note-editor-page" data-title="Edit Note">
<div data-role="header" data-position="fixed">
<a href="#notes-list-page" data-icon="back" data-rel="back">Cancel</a>
<h1>
Edit Note</h1>
<a id="save-note-button" href="" data-theme="b" data-icon="check">Save</a>
</div>
<div data-role="content">
<form action="" method="post" id="note-editor-form">
<label for="note-title-editor">
Title:</label>
<input type="text" name="note-title-editor" id="note-title-editor" value="" />
<label for="note-narrative-editor">
Narrative:</label>
<textarea name="note-narrative-editor" id="note-narrative-editor"></textarea>
</form>
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a id="delete-note-button" data-icon="delete" data-transition="slideup" data-rel="dialog">Delete</a>
</div>
</div>
<div data-role="header" data-position="fixed">
<a href="#notes-list-page" data-icon="back" data-rel="back">Cancel</a>
<h1>
Edit Note</h1>
<a id="save-note-button" href="" data-theme="b" data-icon="check">Save</a>
</div>
<div data-role="content">
<form action="" method="post" id="note-editor-form">
<label for="note-title-editor">
Title:</label>
<input type="text" name="note-title-editor" id="note-title-editor" value="" />
<label for="note-narrative-editor">
Narrative:</label>
<textarea name="note-narrative-editor" id="note-narrative-editor"></textarea>
</form>
</div>
<div data-role="footer" data-position="fixed" class="ui-bar">
<a id="delete-note-button" data-icon="delete" data-transition="slideup" data-rel="dialog">Delete</a>
</div>
</div>
其页面效果如下图：
其中的cancel按键用于返回记事列表用。
