html5 手机页面开发（easyui mobile）——登录页面

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>

效果：

 

转载于:https://www.cnblogs.com/snowwang/p/6418916.html