1. html5
HTML5大家早就不陌生了，HTML最新版本，提供了很多富客戶端功能支持，但是在台式系統因為受到某些瀏覽器限制發展緩慢，而移動設備因為沒有舊包袱，所有廠家都在向HTML5靠齊，因此移動設備（特別是最新的設備）的瀏覽器對HTML5支持度非常高。所以大多數智能移動設備上都能跑HTML5應用。
關於HTML5，並不是你想像中的那么神秘。說白了，HTML5功能也是由HTML標簽來實現，只是這些標簽以前沒有出現過，你可以像以前編寫普通html頁面那樣添加上HTML5某些新特性標簽，然后在支持HTML5的瀏覽器（比如chrome）上運行。想比較全面了解HTML5，我建議新手花一兩個小時過一遍w3cschool的HTML5教程，非常簡潔，但是能讓你了解什么叫HTML5
2.jQuery mobile
jQuery Mobile是用於創建移動web應用的前端開發框架，可以使用於智能手機與平板電腦，它使用 HTML5 & CSS3 最小的腳本來布局網頁。大家都知道，HTML原生的控件並不是那么“炫”，Jquery Mobile的主要作用之一是幫助不懂UI的開發人員讓自己的HTML有“炫”的感覺。另外Jquery Mobile對HTML還提供了一些性能上的優化（比如Ajax轉場，提高頁面切換速度），並且提供了一些新的js事件供開發者調用。注：Jquery Mobile依賴於Jquery，所以HTML需要引用Jquery。
easyui 中包含easyui.mobile.js 可以很好的設計mobile頁面，可以參考http://www.jeasyui.com/demo-mobile/main/index.php 中的demo
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相對位置來決定）。
<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，
<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頁面。
<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。
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()反而用得比較少（這個后面章節說）。
$(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>
效果：
