html5 手機頁面開發（easyui mobile）——登陸頁面

時間 2019-11-11

標籤 html5 html 手機頁面開發 easyui mobile 登陸欄目 HTML5 简体版

原文原文鏈接

1. html5

HTML5你們早就不陌生了，HTML最新版本，提供了不少富客戶端功能支持，可是在臺式系統由於受到某些瀏覽器限制發展緩慢，而移動設備由於沒有舊包袱，全部廠家都在向HTML5靠齊，所以移動設備（特別是最新的設備）的瀏覽器對HTML5支持度很是高。因此大多數智能移動設備上都能跑HTML5應用。javascript

關於HTML5，並非你想像中的那麼神祕。說白了，HTML5功能也是由HTML標籤來實現，只是這些標籤之前沒有出現過，你能夠像之前編寫普通html頁面那樣添加上HTML5某些新特性標籤，而後在支持HTML5的瀏覽器（好比chrome）上運行。想比較全面瞭解HTML5，我建議新手花一兩個小時過一遍w3cschool的HTML5教程，很是簡潔，可是能讓你瞭解什麼叫HTML5php

2.jQuery mobile

jQuery Mobile是用於建立移動web應用的前端開發框架，可使用於智能手機與平板電腦，它使用 HTML5 & CSS3 最小的腳原本佈局網頁。你們都知道，HTML原生的控件並非那麼「炫」，Jquery Mobile的主要做用之一是幫助不懂UI的開發人員讓本身的HTML有「炫」的感受。另外Jquery Mobile對HTML還提供了一些性能上的優化（好比Ajax轉場，提升頁面切換速度），而且提供了一些新的js事件供開發者調用。注：Jquery Mobile依賴於Jquery，因此HTML須要引用Jquery。css

easyui 中包含easyui.mobile.js 能夠很好的設計mobile頁面，能夠參考http://www.jeasyui.com/demo-mobile/main/index.php 中的demohtml

Jquery Mobile須要學習的內容蠻多的，我建議新手全面地過一遍Jquery Mobile的教程再作應用，我除了看w3cschool的教程外，還看了這位做者的文章（http://kayosite.com/web-app-by-jquery-mobile-and-html5-directory.html），最近還發現Jquer Mobile中文API網站也很不錯。前端

3. 簡單示例

1.隨意建一個HTML文件，注意頁面頭部要有<!DOCTYPE html>標籤，頁面引用如下三個必備文件（文件位置根據你的HTML相對位置來決定）。html5

<link rel="stylesheet" type="text/css" href="../style/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="../style/mobile.css">
    <link rel="stylesheet" type="text/css" href="../style/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.mobile.js"></script>

2.在<Body>標籤中編寫頁面元素，跟傳統的HTML有所不一樣的是，jquery mobile把一個<div data-role="page">當作一個頁面，在page中能夠定義三個主體區：頭部header、內容區content和底部footer，java

<body>  
<div data-role="page">  
  
  <div data-role="header">  
    <h1>歡迎來到個人主頁</h1>  
  </div>  
  
  <div data-role="content">  
    <p>我如今是一個移動端開發者!!</p>  
  </div>  
  
  <div data-role="footer">  
    <h1>底部文本</h1>  
  </div>  
  
</div>  
</body>

3.前面說了一個<div data-role="page">標籤表示一個頁面，那麼jquery mobile支持一個<body>標籤中存在多個page，它們的ID必定要不一樣，便於區分。頁面初次加載時，默認只顯示第一個page！而多個頁面切換很是簡單，只須要在跳轉連接中加[#目標page的ID]便可。以下代碼實現的功能是：點擊[頁面②]連接後頁面切換到id爲pagetwo的頁面，而後點擊[頁面①]，又會回到pageone頁面。jquery

<div data-role="page" id="pageone">  
  <div data-role="content">  
    <a href="#pagetwo">頁面②</a>  
  </div>  
</div>  
  
<div data-role="page" id="pagetwo">  
  <div data-role="content">  
    <a href="#pageone">頁面①</a>  
  </div>  
</div>

4.若是要讓第二個頁面以dialog彈出框的形式顯示，則只須要在跳轉的<a>標籤中增長一個屬性[data-rel="dialog"]。不過若是pagetwo只有一個data-role=content內容區的話，彈出框是沒有關閉按鈕的，因此你須要給pagetwo定義一個header。web

div data-role="page" id="pageone">  
  <div data-role="content">  
    <p>Welcome!</p>  
    <a href="#pagetwo" data-rel="dialog">頁面②</a>  
  </div>  
</div>   
  
<div data-role="page" id="pagetwo">  
  <div data-role="header">  
    <h1></h1>  
  </div>  
  
  <div data-role="content">  
    <p>Goodbye!</p>  
    <a href="#pageone">頁面①</a>  
  </div>  
</div>

5.jquery mobile中js的事件和方法

1.jquery mobile用得最多的事件恐怕是pageinit，這個是指定page加載完成時調用的。而jquery的ready()反而用得比較少（這個後面章節說）。ajax

$(document).on("pageinit","#pageone",function(){  
  alert("頁面初始化");  
});

2.屏幕左右滑動事件和上下滾動事件

$(document).on("swipeleft",function(){  
    alert("向左滑動");  
});  
$(document).on("swiperight","#pagethree",function(){  
    alert("向右滑動");  
});  
$(document).on("scrollstart",function(){//關聯事件：scrollstop  
    //滾動頁面   注：不論上下滑動 仍是左右滑動都會觸發  
});

3.頁面轉場時用到的pagebeforechange事件，用於給第二個頁面進行參數傳遞，你只要輸入pagebeforechange關鍵字

$(document).unbind("pagebeforechange").bind("pagebeforechange", function(e, data) {  
  
});

4.傳統頁面的跳轉多是經過window.location來完成，jquery mobile提供了自帶的轉場方法，這種跳轉是經過Ajax加載第二個頁面，從速度上要比第一個高，可是用這種方式要注意不少問題

$.mobile.changePage("xx/two.html")

完整的jQuery- easyui -mobile登陸代碼示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="inital-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>安全培訓系統</title>
    <link rel="stylesheet" type="text/css" href="../style/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="../style/mobile.css">
    <link rel="stylesheet" type="text/css" href="../style/icon.css">
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.mobile.js"></script>
    <script type="text/javascript">
        document.onkeydown = function(e) {
        var event = e || window.event;
        var code = event.keyCode || event.which || event.charCode;
        if (code == 13) {
           login();
         }
        }
        $(function() {
        $("input[name='username']").focus();
        });

        function cleardata() {
        $('#loginForm').form('clear');
        }

       function login() {
             if ($("input[name='username']").val() == "" || $("input[name='password']").val() == "") 
             { 
                $("#showMsg").html("用戶名或密碼爲空，請輸入");
                 $("input[name='login']").focus();
                 }
                 //else{
                 //ajax異步提交
             //     $.ajax(
             //         type:"post",//post提交方式默認是get
             //         url:'login.php',
             //         data:$('#loginForm').serialize(),//序列化
             //         error:function(request){//設置表單提交出錯
          //          $("#showMsg").html(request);//登陸錯誤提示信息
             //         },
             //         success:function(data) {
             //             document.location = "index.html";
             //         }
             //         );
             // }
          document.location = "index.html";
    }
    </script>
</head>
<body>
   <div class="easyui-navpanel">
         <header>
             <div class="m-toolbar">
                 <span class="m-title">登入系統</span>
             </div>
         </header>
         <div style="margin: 20px auto;width: 100px;height: 100px;border-radius: 100px;overflow: hidden;">
              <img src="../image/app/login.jpg" style="margin:0;width: 100%;height: 100%">
         </div>
         <div style="padding: 0 20px">
          <form id="loginForm" method="post">
                <div  style="margin-bottom: 10px">
                 <input id="username" name= "username"class="easyui-textbox" data-options="prompt:'用戶名',incoCls:'icon-man'" style="width: 100%;height: 38px"></input>
             </div>
             <div>
                 <input id="password" class="easyui-passwordbox" data-options="prompt:'密碼'" style="width: 100%;height: 38px"></input>
             </div>
             <div id="showMsg" style="padding: 5px 0;text-align: center;color: red">
                 
             </div>
          </form>
             
             <div style="text-align: center;margin-top: 30px">
                 <a href="javascript:void(0)" onclick="login()" class="easyui-linkbutton" style="width: 100%;height: 40px" >
                     <span style="font-size: 16px">登陸</span>
                 </a>
             </div>
             <!--
             <div style="text-align: center;margin-top: 30px">
                 <a href="javascript:void(0)" class="easyui-linkbutton" plain="true" outline="true" style="width: 100px;height: 35px">
                     <span style="font-size: 16px">註冊</span>
                 </a>
             </div>
             -->
         </div>
            </div>
</body>
</html>