首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

通过Tabs方法基于easyUI+bootstrap制作工作站

Posted in Javascript onMarch 28, 2016

登陆页如下所示：

通过Tabs方法基于easyUI+bootstrap制作工作站
通过Tabs方法基于easyUI+bootstrap制作工作站

下面给大家展示下具体实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<title>网络医院登陆</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
font-family: "微软雅黑";
font-size: 16px;
}
.main-box {
width: 100%;
height: 100%;
min-width: 960px;
overflow: hidden;
background: url(imges/bg.jpg) no-repeat center center;
}
.left-box,
.right-box {
width: 50%;
height: 100%;
float: left;
}
.left-box {
width: 50%;
height: 100%;
background: url(imges/leftboxbg.jpg) no-repeat center center;
z-index: 10;
position: relative;
}
.right-box {
width: 50%;
height: 100%;
position: relative;
}
.left-title {
width: 300px;
height: 236px;
margin: 150px auto;
}
.left-title img {
display: block;
width: 300px;
height: 186px;
}
.left-title p {
width: 300px;
height: 50px;
line-height: 50px;
color: white;
font-size: 18px;
text-align: center;
}
.loginavatar {
width: 160px;
height: 160px;
background: url(imges/loginavatar.png) no-repeat;
margin: 50px auto 50px;
}
ul li {
list-style: none;
display: block;
}
.right-title,
.right-title-zhuce {
width: 400px;
height: 255px;
/* border: 1px solid red; */
margin: 0px auto;
}
.login input {
display: block;
width: 350px;
color: black;
height: 40px;
border: 1px solid #42BD56;
margin: 10px auto 10px;
}
input::-webkit-input-placeholder {
color: black;
}
input:-moz-placeholder {
color: black;
}
input:-ms-input-placeholder {
color: black;
}
input.username {
text-indent: 50px;
background: url(imges/bg-loginid.png) no-repeat 0 -7px;
margin-top: 30px;
}
input.pwd {
text-indent: 50px;
background: url(imges/bg-loginpass.png) no-repeat 0 -7px;
}
input.sub {
background: #2A8C70;
border: none;
color: white;
border-radius: 5px;
}
.sub-ljzc,
.sub-fsdx {
width: 350px;
height: 42px;
margin: 10px auto 10px;
/* border: 1px solid red;*/
}
input.sub,
input.msg {
width: 160px;
height: 40px;
margin: 0px;
float: left;
}
input.msg {
background: none;
text-align: center;
}
.sub-ljzc .ljzc,
.sub-ljzc .ljdl,
.sub-fsdx .hqyzm {
float: right;
display: block;
width: 160px;
height: 40px;
background: white;
line-height: 40px;
text-align: center;
color: #30A080;
margin-right: 0px;
border: 1px solid #30A080;
border-radius: 5px;
margin: 0;
}
</style>
<script type="text/javascript">
$(function() {
var pwd = /^[a-zA-z]\w{3,15}$/;
var phone_num = /^1\d{10}$/;
$("#ljzc").click(function() {
$("#right-title").hide();
$("#right-title-zhuce").show();
});
$("#ljdl").click(function() {
$("#right-title").show();
$("#right-title-zhuce").hide();
});
$("#sub").click(function() {
if ($(".username").val() == "") {
alert("请输入电话号码！");
return false;
};
if (!phone_num.test($(".username").val().trim())) {
alert("电话号码有误,请检查");
return false;
};
if ($(".pwd").val() == "") {
alert("请输入密码！");
return false;
};
});
$(".hqyzm").click(function() {
if ($("#username").val() == "") {
alert("请输入注册电话号码！");
return false;
} else if (!phone_num.test($("#username").val().trim())) {
alert("注册电话号码有误,请重新填写！");
return false;
} else {
$('.hqyzm').css('color', 'red').prop("disabled", true); //发短消息不可再点击
var i = 10;
var n = setInterval(function() {
var j = i + 's';
$('.hqyzm').val(j);
i--;
if (i < -1) {
clearInterval(n);
$('.hqyzm').val('重新获取验证码!').prop("disabled", false);
}
}, 1000);
}
})
$("#ljzc-tj").click(function() {
if ($("#username").val() == "") {
alert("请输入注册电话号码！");
return false;
};
if (!phone_num.test($("#username").val().trim())) {
alert("注册电话号码有误,请重新填写！");
return false;
};
if ($(".msg").val() == "") {
alert("短息为空！");
return false;
};
if ($("#pwd").val() == "") {
alert("密码为空！");
return false;
};
if (!pwd.test($("#pwd").val().trim())) {
alert("密码有误，请重新填写，包含字母数字下划线，4-16位");
return false;
};
})
})
</script>
</head>
<body>
<div class="main-box">
<div class="left-box">
<div class="left-title">
<img src="imges/loginlogo.png" />
<p>医生工作站</p>
</div>
</div>
<div class="right-box">
<div class="loginavatar"></div>
<div class="right-title" id="right-title">
<form action="#" method="post " class="login " autocomplete="off">
<input type="text" class="username " placeholder="请输入账号 " />
<input type="password" class="pwd " placeholder="请输入密码 " />
<div class="sub-ljzc ">
<input type="submit" value="登陆 " class="sub" id="sub" />
<a class="ljzc " id="ljzc">立即注册</a>
</div>
</form>
</div>
<div class="right-title-zhuce" id="right-title-zhuce" style="display: none" ;>
<form action="#" method="post" class="login" autocomplete="off">
<input type="text" class="username" id="username" placeholder="请输入注册账号" />
<div class="sub-fsdx">
<input type="text" class="msg" />
<input type="button" class="hqyzm" value="获取验证码 ">
</div>
<input type="password" placeholder="请输入注册密码" class="pwd" id="pwd" />
<div class="sub-ljzc">
<input type="submit" value="立即注册" class="sub" id="ljzc-tj" />
<a class="ljdl" id="ljdl">立即登录</a>
</div>
</form>
</div>
</div>
</div>
</body>
</html>

通过Tabs方法基于easyUI+bootstrap制作工作站

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.3/easyui-lang-zh_CN.js"></script>
<title>网络医院主页</title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
overflow: hidden;
}
a:link {
text-decoration: none;
/* 指正常的未被访问过的链接*/
}
a {
text-decoration: none;
}
a:visited {
text-decoration: none;
/*指已经访问过的链接*/
}
a:hover {
text-decoration: none;
/*指鼠标在链接*/
}
a:active {
text-decoration: none;
/* 指正在点的链接*/
}
/**************main*********************/
.main {
width: 100%;
height: 100%;
background: pink;
overflow: hidden;
min-width:1200px;
}
.left-box {
height: 100%;
float: left;
width: 15%;
background: #30323e;
/*overflow-y: scroll;*/
}
.left-box-logo {
width: 160px;
height: 150px;
margin: 30px auto 0px;
}
.left-box-logo img {
width: 160px;
height: 100px;
}
.left-box-logo h3 {
color: white;
margin: 0;
line-height: 50px;
height: 50px;
text-align: center;
}
/*************tree li******************/
.tree {
/*border: 1px solid red;*/
height: auto;
}
.tree-box {
list-style: none;
line-height: 48px;
padding: 0;
margin: 0;
}
.tree-box li {
border-bottom: 1px solid #232243;
display: block;
}
.tree-box li:hover,
.tree-box li:focus,
.tree-box li:active {
background: #005eac;
}
.tree-box>li>a {
color: #A6A6A6;
margin-left: 20px;
}
.tree-box a {
display: block;
height: 48px;
width: 100%;
}
.tree-box-two a {
text-align: center;
color: white;
}
.hzgl a:before {
content: url(imges/icon-patient.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.pzgl a:before {
content: url(imges/icon-lineup.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.xgmm a:before {
content: url(imges/icon-lock.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
a.bg:before {
content: url(imges/bg-verticalsubmenu.png);
height: 100%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
/**************right-box**************/
.right-box {
height: 100%;
float: left;
width: 85%;
background: white;
font-size: 18px;
position: relative;
}
.time-now {
margin-left: 20px;
font-family: "微软雅黑";
line-height: 50px;
}
.right-title {
width: 98%;
margin: 10px auto 0px;
height: 50px;
background: #FF855E;
}
.right-title span {
margin-top: 8px;
}
.right-title .user-info {
float: right;
}
.right-title .user-info button {
margin-right: 20px;
}
#tab-page div {
background: #D2D2D9;
}
h1.welcome {
font-size: 80px;
font-family: "微软雅黑";
color: green;
margin: 15% auto;
text-align: center;
}
/*****************************************/
/* easy UI */
.tabs-header,
.tabs-tool {
background: green;
}
div.tabs-header {
border: 1px solid #cacacd;
border-bottom: 1px solid #e6e6e6;
}
ul.tabs {
border-bottom: 1px solid #cacacd;
height: 30px;
}
.tabs li.tabs-selected a.tabs-inner {
background: #E6E6E6;
color: #5a5a5a;
}
.tabs li a.tabs-inner {
background: #f2f2f2;
color: #5a5a5a;
border: 1px solid #cacacd;
padding: 0 15px;
border-radius: 0;
}
.tabs li a.tabs-inner:hover {
background: #E6E6E6;
}
.tabs li.tabs-selected a.tabs-inner {
border: 1px solid #cacacd;
border-bottom: 1px solid #E6E6E6;}
</style>
<script type="text/javascript">
$(function() {
//初始化tab
$("#tab-page").tabs({
tabWidth: 100, //tab头的宽度
tabHeight: 30, //tab头的高度
closable: true,
fit: true //tab铺满全屏
});
});
//打开新tab函数
function addTabs(title, url) {
if ($('#tab-page').tabs('exists', title)) {
$('#tab-page').tabs('select', title);
$('#tab-page').tabs('update', {
tab: select
});
var content = '<iframe class="tabIframe" style="width: 100%;" scrolling="scroll" frameborder="0" src="' + url + '"></iframe>';
$('#tab-page').tabs('add', {
title: title,
fit: true, //tab铺满全屏
content: content,
closable: true
});
var rH = $(".right-box").height();
var rhH = $(".right-head").height();
var hC = rH - 50;
$(".panel-body .tabIframe").height(hC);
} else {
var content = '<iframe class="tabIframe" style="width: 100%;" scrolling="scroll" frameborder="0" src="' + url + '"></iframe>';
$('#tab-page').tabs('add', {
title: title,
content: content,
fit: true, //tab铺满全屏
closable: true
});
var rH = $(".right-box").height();
var rhH = $(".right-head").height();
var hC = rH - 50;
$(".panel-body .tabIframe").height(hC);
}
}
</script>
</head>
<body>
<div class="main">
<div class="left-box">
<div class="left-box-logo">
<img src="imges/logo.png" />
<h3> -医生端- </h3>
</div>
<div class="tree">
<ul class="tree-box">
<li class="hzgl"><a href="#">患者管理</a></li>
<ul class="tree-box-two">
<li class="hzlb"><a class="bg" onclick="addTabs('患者列表','articleList.html')">患者列表</a></li>
<li class="hzzc"><a class="bg" onclick="addTabs('百度','https://www.baidu.com')">患者注册</a></li>
<li class="hzxq"><a class="bg" onclick="addTabs('360搜索','http://www.so.com/')">患者详情</a></li>
</ul>
<li class="pzgl"><a href="">排号管理</a></li>
<li class="xgmm"><a href="">病例管理</a></li>
<li class="pzgl"><a href="">加好管理</a></li>
<li class="xgmm"><a href="">修改密码</a></li>
<li class="pzgl"><a href="">退出</a></li>
</ul>
</div>
</div>
<div class="right-box">
<div class="right-title">
<span class="time-now">当前时间：2015年6月1日</span>
<span class="user-info">
<button type="button" class="btn btn-success">当前账户：libin</button>
<button type="button" class="btn btn-warning"> 退出</button>
</span>
</div>
<div id="tab-page" class=" " style="width: 100%;">
<div title="Home">
<h1 class="welcome">欢迎使用乐普网络医院</h1>
</div>
</div>
</div>
</div>
</body>
</html>

通过Tabs方法基于easyUI+bootstrap制作工作站

- Author -

李斌

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js FLASH幻灯片字符串中有连接符＆的处理方法
Mar 01 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 #Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 #Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 #Javascript
详解javascript跨浏览器事件处理程序
Mar 27 #Javascript
js事件处理程序跨浏览器解决方案
Mar 27 #Javascript
基于javascript实现九九乘法表
Mar 27 #Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 #Javascript
key(1) pycryto(1) kafka(2) 数据加密(1) 遍历文件夹(1) 公共键(1) shell脚本(1) python-pcl(1) Anaconda(2) 有序排列(1)
You might like
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
用JS判断IE版本的代码 超管用！
2011/08/09 Javascript
IE6背景图片不缓存问题解决方案及图片使用策略多个方法小结
2012/05/14 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JQuery标签页效果的两个实例讲解（4）
2015/09/17 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
Angular2安装angular-cli
2017/05/21 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
2019/09/21 Javascript
python重试装饰器示例
2014/02/11 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
python实现矩阵打印
2019/03/02 Python
详解Python装饰器
2019/03/25 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
python中return如何写
2020/06/18 Python
导致python中import错误的原因是什么
2020/07/01 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
阿玛尼美妆加拿大官方商城：Giorgio Armani Beauty加拿大
2017/10/24 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
投标单位介绍信
2014/01/09 职场文书
童装店创业计划书
2014/01/09 职场文书
班组建设经验交流材料
2014/05/12 职场文书
教育教学读书笔记
2015/07/02 职场文书
老乡会致辞
2015/07/28 职场文书
Nginx使用X-Accel-Redirect实现静态文件下载的统计、鉴权、防盗链、限速等
2021/04/04 Servers
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL