怎么用jQuery的Easyui实现登陆框界面
怎么用jQuery的Easyui实现登陆框界面
发布时间：2022-03-30 10:02:16 来源：高防服务器网 阅读：78 作者：iii 栏目：移动开发
这篇文章主要讲解了“怎么用jQuery的Easyui实现登陆框界面”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用jQuery的Easyui实现登陆框界面”吧！
效果图
CSS
a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%; height:750px; } .panel-title { text-align: center; font-size: 16px; } #bootom{ padding-top:50px; width:100%; height:100px; background: #eaf2ff; } #bootom_content{ margin-left:100px; width:80%; text-align: center; font-size:0.8em; } p{ line-height:20px; }
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <!-- 引用的css --> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="themes/default/panel.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="themes/icon.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="css/index.css" rel="external nofollow" > <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easyui.min.js"></script> <title>系统首页</title> </head> <script type="text/javascript"> console.info("==================") $('#p').panel('move',{ left:100, top:100 }); </script> <body> <div id="header" > <div class="logo" onclick="window.location.href='index.html'"> <strong信息系统</strong> </div> </div> <div id="picture" > <div data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}" class="easyui-panel " title="用户登录" > <div > <form id="ff" class="easyui-form" method="post" data-options="novalidate:true"> <table cellpadding="5"> <tr> <td><input class="easyui-textbox" data-options="prompt:'账号',validType:'name'" iconCls="icon-man" iconAlign=left /></td> </tr> <tr> <td><input class="easyui-textbox" data-options="prompt:'密码',validType:'password'" iconCls="icon-lock" iconAlign=left ></input></td> </tr> <tr> <td><input class="easyui-textbox" data-options="prompt:'验证码',validType:'validate'" iconCls="icon-filter" iconAlign=left /> <img src="" alt="" width="56" height="32" align='absMiddle' /> </td> </tr> </table> </form> <div > <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" >登录</a> <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" >注册</a> </div> </div> </div> </div> <div id="bootom"> <div id="bootom_content"> <p><strong>关于我们 法律声明 服务条款 联系我们</strong></p> <p> 地址：江西省南昌市经济开发区天祥大道 邮箱：330000 Copyright © 2017 - 2018 hacker_pangdaxing@qq.com 版权所有 </p> <p> 建议使用IE8以上版本浏览器 E-mail：hacker_pandaxing@qq.com </p> </div> </div> </body> <script> function submitForm(){ $('#ff').form('submit',{ onSubmit:function(){ return $(this).form('enableValidation').form('validate'); } }); } function clearForm(){ $('#ff').form('clear'); } </script> </html>
感谢各位的阅读，以上就是“怎么用jQuery的Easyui实现登陆框界面”的内容了，经过本文的学习后，相信大家对怎么用jQuery的Easyui实现登陆框界面这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是高防服务器网，小编将为大家推送更多相关知识点的文章，欢迎关注！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[