前段时间看有人做的JQuery Mobile的界面很不错,认为移动的应用也会像桌面应用一样,慢慢的都走向WEB方式.
先贴出代码吧:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>LogIn</title>
- <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
- <link rel="stylesheet" href="jquery.mobile-1.0.1.min.css">
- <script src="jquery.js"></script>
- <script src="jquery.mobile-1.0.1.min.js"></script>
- <script type="text/javascript">
- jQuery(document).ready(function() {
- //输入事件
- $("input[id]").bind("focus",function () {
- if($(this).attr("id")=='username'||$(this).attr("id")=='password')
- $(this).attr("value","");
- });
- //提交
- $("#submit").bind("click", function() {
- if (valid()) {
- alert("获取的用户名为:"+$("#username").attr("value")+" 密码为:"+$("#password").attr("value"));
- var name = $("#username").attr("value");
- var passwd = $("#password").attr("value");
- $.ajax({
- type: "POST",
- url: "http://localhost/jqm/check.xml",
- data: $("form#loginform").serialize(),
- success: function(msg){
- $(msg).find('authUserResponse').each( function (i) {
- var login = $(this).children('return').text();
- alert(login);
- })
- /*if(msg=='success'){
- $.mobile.changePage("content/first.html","slidedown", true, true);
- }else{
- $.mobile.changePage("content/loginfalse.html","slidedown", true, true);
- }
- */
- }
- });
- }
- });
- });
- //输入信息验证
- function valid(){
- if($("#username").attr("value")==''||$("#password").attr("value")=='')
- {
- alert('用户名或密码不能为空!');
- //$.mobile.changePage("content/loginfalse.html","slidedown", true, true);
- return false;
- }
- return true;
- };
- </script>
- <style type="text/css">
- p {
- font-size: 1.5em;
- font-weight: bold;
- }
- #submit{
- float:center; margin:10px;
- }
- /*#toregist{
- float:left; margin:10px;
- }*/
- </style>
- <body>
- <!-- begin first page -->
- <section id="page1" data-role="page">
- <header data-role="header" data-theme="b" ><h1>XXXXXX移动平台</h1></header>
- <div data-role="content" class="content">
- <p style="backg"><font color="#2EB1E8" >登录</font></p>
- <form method="post" id="loginform">
- <input type="text" name="username" id="username" value="用户名"/><br>
- <input type="password" name="password" id="password" value="密码输入提示"/>
- <fieldset data-role="controlgroup" >
- <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
- <label for="checkbox-1">保持登录状态</label>
- </fieldset>
- <!--<a href="register.html" data-role="button" id="toregist" data-theme="e">注册</a>-->
- <a data-role="button" id="submit" data-theme="b">登录</a>
- </form>
- </div>
- <footer data-role="footer" ><h1>©2012 XXXX 学苑在线BBS</h1></footer>
- </section>
- <!-- end first page -->
- </body>
其中的那个check.xml文件如下:
- <?xml version="1.0" encoding="UTF-8"?>
- <root>
- <authUserResponse>
- <return>true</return>
- </authUserResponse>
- </root>
大概就是介样子吧: