首页
所有分类
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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
AngularJS学习笔记之ng-options指令
Jun 16 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
JS实现的新闻列表自动滚动效果示例
Jan 30 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
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
游标(1) 排序失效(1) timestamp(1) ECharts(3) GTID(1) 重复数据(2) 临时表(1) ip连接(1) T-SQL(1) 表变量(1)
You might like
PHP操作Memcache实例介绍
2013/06/14 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP实现获取中英文首字母
2015/06/19 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jQuery中has()方法用法实例
2015/01/06 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
Python3实现发送QQ邮件功能（附件）
2020/12/23 Python
python数字图像处理之高级形态学处理
2018/04/27 Python
python tkinter界面居中显示的方法
2018/10/11 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Pycharm安装第三方库失败解决方案
2020/11/17 Python
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
Ariat官网：美国马靴和服装品牌
2019/12/16 全球购物
写一个函数，求一个字符串的长度。在main函数中输入字符串，并输出其长度
2015/11/18 面试题
北京华建集团SQL面试题
2014/06/03 面试题
学生的自我鉴定范文
2013/10/24 职场文书
最新自我评价范文
2013/11/16 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
安全责任协议书范本
2016/03/23 职场文书
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
只用20行Python代码实现屏幕录制功能
2021/06/02 Python