基於Jquery Mobile的用戶登錄 註冊的 Demo 小樣

 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

相關文章
相關標籤/搜索