基于jQuery Easyui实现登陆框界面


Posted in jQuery onJuly 10, 2017

效果图

基于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" style="background:url(images/index.jpg) no-repeat; background-size: cover;">
  <div data-options=" region:'east',split:true,style:{position:'absolute',right:50,top:150}"
 class="easyui-panel " title="用户登录" style="width:300px;text-align: center;">
      <div style="padding:10px 60px 20px 60px">
        <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 style="width:100%;height:32px"/></td>
            </tr>
            <tr>
              <td><input class="easyui-textbox" data-options="prompt:'密码',validType:'password'" iconCls="icon-lock" iconAlign=left style="width:100%;height:32px"></input></td>
            </tr>
            <tr>
              <td><input class="easyui-textbox" data-options="prompt:'验证码',validType:'validate'" iconCls="icon-filter" iconAlign=left style="width:55%;height:32px" />    
              <img src="" alt="" width="56" height="32" align='absMiddle' /> </td>
            </tr>
          </table>
        </form>
        <div style="text-align:center;padding:5px; ">
          <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" style="width:45%;height:32px">登录</a>    
          <a href="#" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" style="width:45%;height:32px">注册</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 相关文章推荐
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 #jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 #jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
php中strtotime函数用法详解
2014/11/15 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
JS简单获得节点元素的方法示例
2018/02/10 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
Python中super的用法实例
2015/05/28 Python
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python与mysql数据库交互的实现
2020/01/06 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
培训主管的岗位职责
2013/11/23 职场文书
化学教学随笔感言
2014/02/19 职场文书
给老婆的道歉信
2015/01/20 职场文书
Java spring单点登录系统
2021/09/04 Java/Android
MySQL数据库表约束讲解
2022/06/21 MySQL