首页 > 移动平台 > 详细

html5 手机页面开发(easyui mobile)——登录页面

时间:2017-02-20 13:58:22      阅读:7244      评论:0      收藏:0      [点我收藏+]

标签:表单   direct   底部   完整   ott   最小   代码示例   rdb   start   

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>

效果:

技术分享

 

html5 手机页面开发(easyui mobile)——登录页面

标签:表单   direct   底部   完整   ott   最小   代码示例   rdb   start   

原文:http://www.cnblogs.com/snowwang/p/6418916.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号