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; 100px;height: 100px;border-radius: 100px;overflow: hidden;"> <img src="../image/app/login.jpg" style="margin:0; 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=" 100%;height: 38px"></input> </div> <div> <input id="password" class="easyui-passwordbox" data-options="prompt:'密码'" style=" 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=" 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=" 100px;height: 35px"> <span style="font-size: 16px">注册</span> </a> </div> --> </div> </div> </body> </html>
效果：
