基于jQuery Easyui实现登陆框界面

2024-11-30 13:16:45

效果图

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实现登陆框界面，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

js实现简单登录功能的实例代码

复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Login.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> &l
Boostrap实现的登录界面实例代码

Bootstrap它是一个开源的web开发前端框架. 这几天我看了下Bootstrap的官方文档.看到其中的Basic-form,突然想实现下登录界面.然后想了下实现的思路,于是就打开了桌面的H5 builder码起来.代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框.发现问题后,第一想法是自己再定义个css进行一个控制.但是又不知道行业内的大牛是不是只用Bootstr
jQuery简单入门示例之用户校验demo示例

本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可
jquery实现用户登陆界面(示例讲解)

实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){
基于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%;
基于jQuery下拉选择框插件支持单选多选功能代码

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui. 下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码: 多选:呈现列表具体代码如下所示: /** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ * qu
jQuery EasyUI之验证框validatebox实例详解

1.样式 validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效.如果用户输入了无效的值,它将会更改输入框的背景颜色,并且显示警告图标和提示信息.该验证框可以结合form(表单)插件并防止表单重复提交. 2.练习1:验证输入字符长度及非空 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>validatebox</title>
基于jQuery实现下拉框

项目中经常会遇到下拉框,在扁平化和响应式布局大行其道的今天,使用jQuery来实现下拉框就十分的必要了,而且也会美观很多,这里就给大家推荐一段基于jQuery的下拉框代码. jQuery代码: 复制代码代码如下: $(function(){ $('#add').click(function(){ var $options = $('#select1 option:selected'); $options.a
基于jQuery实现复选框是否选中进行答题提示

最近是在项目需求中遇到的功能点,根据用户选择的选项给出相应的提示,下面给出了测试程序的效果图,看看是不是很满意,如果大家觉得还不错,请继续查看全文. 一.实现的原理: 第一步:判断用户选择哪一项,即哪个复选框被选中第二步:根据复选框的选中情况给出相应的提示二.下面来看主体程序: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&
jQuery EasyUI NumberBox(数字框)的用法

这里的options是选项,可以参考下表: 选项名类型描述默认值 min 数字文本框中可允许的最小值 null max 数字文本框中可允许的最大值 null precision 数字最高可精确到小数点后几位 0 例如:金额输入框最大值为"99999.99" 精确到两位小数. <input name="money" id="money" type="text" class="easyui-numbe
基于jQuery的弹出框插件

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"> <head> <meta http-e
基于jquery实现下拉框美化特效

平常我们用的原生select下拉框,大部分样式没办法修改,导致在不同的浏览器里面会跟设计图的风格大相径庭.所以为了能让它美化起来,就用JQ模拟了一个下拉框,可以随意定义样式.原生的下拉框也保留在div里面隐藏着,方便后台开发人员对其进行操作. 效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <ti
基于jquery实现select选择框内容左右移动添加删除代码分享

本文实例讲述了select选择框内容左右移动添加删除.分享给大家供大家参考.具体如下: select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动.多选移动和一键全部移动! 运行效果图: ----------------------查看效果----------------------- 小提示:浏览
基于jQuery的计算文本框字数的代码

一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背

基于jQuery Easyui实现登陆框界面

相关推荐

随机推荐