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>

效果：