jquery mobile是基于jquery的移動端開發(fā)框架，省去了開發(fā)人員大量的代碼編寫時間，使開發(fā)效率大大提高。在實際開發(fā)中，我們常常需要用到登錄頁，那么jquery mobile如何實現(xiàn)登錄頁呢？下面我們來一步步看一下。

<div data-role="page" id="login" data-theme="b">
<div data-role="header" data-theme="a">
<h3>登錄</h3>
</div><!-- /header -->
<div data-role="content">    
<form method="post" action="#">
<div data-role="fieldcontain">
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value=""  />
</div> 
<div data-role="fieldcontain">
<label for="password">密碼:</label>
<input type="password" name="password" id="password" value=""  />
</div> 
<a href="#" data-role="button" data-theme="b" onclick="checkLogin()">登錄</a>     
<a href="#" data-role="button" onclick="register()">注冊</a>          
</form>  
</div><!-- /content -->

首先，我們需要一個div來承載整個登錄頁，我們可以給這個div一個唯一的id，譬如這里的id為“l(fā)ogin”。

然后，我們需要在這個div中定義一個header和content分別用于放置頁面標題和頁面內(nèi)容，分別使用data-role屬性指定為“header”和“content”。此外，我們還需要為header和content分別指定一個data-theme屬性，用于指定這兩個元素的主題。

在header中，我們可以定義一個h3標簽來顯示頁面標題，這個可以根據(jù)實際需求進行修改。

在content中，我們可以放置表單來獲取用戶的登錄信息。這里我們使用了一個form元素，并使用post方式提交表單，在action中指定了提交的地址。在表單中，我們使用了data-role為fieldcontain的div元素來包含輸入框。在每個div中，我們定義了一個label表示輸入框的提示信息，同時還有一個input元素用于輸入內(nèi)容。input元素中type為text或password，name和id用于獲取或更新值，value則是輸入框初始化值。

最后，在表單中還提供了兩個按鈕，一個用于登錄，一個用于注冊，這兩個按鈕的數(shù)據(jù)角色都指定為按鈕，同時用data-theme屬性定義了按鈕的主題色。button元素在點擊后會觸發(fā)相應(yīng)的JavaScript函數(shù)，例如這里的checkLogin()函數(shù)和register()函數(shù)。這兩個函數(shù)可以用于進行表單的校驗和數(shù)據(jù)的提交。