Login.HTML 界面javascript
head 中 調用的額CSS樣式和JS文件,我其中注釋掉的IOS風格的UI 以下圖所示!讓你選擇!
css
<link rel="stylesheet" href="./css/jquery.mobile-1.3.0.css"/> <script type="text/javascript" src="./js/jquery-1.8.3.js"></script> <script type="text/javascript" src="./js/jquery.mobile-1.3.0.js"></script> <script type="text/javascript" src="rte/cordova.js"></script> <script type="text/javascript" src="rte/rte.js"></script> <script type="text/javascript" src="js/main.js"></script> <!-- <link rel="stylesheet" href="./css/styles.css" /> IOS 風格 -->
HTML頁面源碼:html
<div data-role="page" id="page1"> <!-- page --> <div data-role="header"> <!-- header 頁眉 --> <a href="#" data-role="button" data-icon="home">首頁</a> <h1>用戶登陸</h1> <a href="#" data-role="button" class="ui-btn-right" data-icon="search">搜索</a> </div> <!-- 頁眉 End --> <br /> <div data-role="fieldcontain"> <label for="textinput1"> 用戶名: </label> <input id="textinput1" placeholder="" value="" type="text" /> <br /> <label for="textinput2"> 密 碼: </label> <input id="textinput2" placeholder="" value="" type="Password" /> </div> <br /> <div data-role="fieldcontain"> <div data-role="controlgroup" data-type="vertical"> <a href="index.html" data-role="button">登 錄</a> <a href="regisit.html" data-corners="false" data-role="button">注 冊</a> </div> </div> <!--page end -->
Register.HTML 用戶註冊頁面也雷同!
java
想加入Jquery Model 頁面的頁腳,以下圖的效果。
jquery
頁腳 <DIV>層ui
<div data-role="footer" data-id="fool" data-position="fixed" > <div data-role="navbar"> <ul> <li><a href="section1.html">播放列表</a></li> <li><a href="index.html" class="ui-btn-active">音樂試聽</a></li> <li><a href="section2.html">藝術家</a></li> </ul> </div> <!--/navbar --> </div><!-- /footer -->
Demo 下載地址:spa
http://pan.baidu.com/s/1dDtaifn code
關於IOS風格 我這有一個從JQuery Model 官網拿來的API文檔和Demohtm
http://pan.baidu.com/s/1mg9GOvY cordova