通過Tabs方法基于easyUI+bootstrap制作工作站
更新時間：2016年03月28日 09:16:52 作者：李斌
本教程給大家介紹如何制作easyUI+bootstrap工作站，主要學習tabs方法，本文介紹非常詳細，具有參考借鑒價值，需要的朋友參考下吧
登陸頁如下所示：
下面給大家展示下具體實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<title>網絡醫(yī)院登陸</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); //發(fā)短消息不可再點擊
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>醫(yī)生工作站</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>
<!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>網絡醫(yī)院主頁</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> -醫(yī)生端- </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">歡迎使用樂普網絡醫(yī)院</h1>
</div>
</div>
</div>
</div>
</body>
</html>
您可能感興趣的文章:
- BootstrapTable+KnockoutJS自定義T4模板快速生成增刪改查頁面
- WebApi+Bootstrap+KnockoutJs打造單頁面程序
- Bootstrap與KnockoutJs相結合實現分頁效果實例詳解
- 使用BootStrap實現用戶登錄界面UI
- jQuery UI Bootstrap是什么?
- 基于Bootstrap的UI擴展 StyleBootstrap
- jquery ui bootstrap 實現自定義風格
- JS表格組件神器bootstrap table詳解（基礎版）
- 基于Bootstrap+jQuery.validate實現Form表單驗證
- Knockout結合Bootstrap創(chuàng)建動態(tài)UI實現產品列表管理
相關文章
JavaScript是單線程運行的，沒有內置的sleep函數，那么JavaScript sleep睡眠函數是怎樣實現的，感興趣的小伙伴們可以參考一下2021-07-07
本篇文章主要介紹了原生JS實現日歷組件的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
引入 TypeScript 到 Electron 項目可以幫助你捕捉錯誤并在編寫代碼時提供更好的自動完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下2024-04-04
我們時常在使用png圖片的時候，在ie6下發(fā)生背景不透明的問題，解決的方法實在是太多了，下面給大家介紹下一個js解決的方式，感興趣的朋友可以了解下的2013-01-01
本文通過一段實例代碼給大家介紹了基于js實現點擊按鈕可編輯效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的的朋友參考下吧2018-07-07
這篇文章主要介紹了JavaScript字典與集合詳解，集合是由一組無序且不重復的元素構成。我們可以將集合看成一種特殊的數組，它的特殊之處就是無序且不重復，這也就意味著我們不能通過下標的方式進行訪問，而且集合中不會出現重復的元素2022-07-07
javascript中SetInterval與setTimeout的定時器用法
Javascript的setTimeOut和setInterval函數應用非常廣泛，它們都用來處理延時和定時任務，比如打開網頁一段時間后彈出一個登錄框，頁面每隔一段時間發(fā)送異步請求獲取最新數據等，本文文章通過代碼示例給大家介紹javascript中SetInterval與setTimeout的定時器用法2015-08-08
使用Javascript Request獲取參數的時候總是提示出錯，本文為此問題提供詳細的解決方案，需要了解的朋友可以參考下2012-11-11
詳解JavaScript對Date對象的操作問題(生成一個倒數7天的數組)
最近項目需求要生成一個倒數7天的數組，下面小編把我的實現思路和代碼整理分享給大家，供大家參考，需要的朋友可以參考下2015-10-10
JavaScript立即執(zhí)行函數IIFE的用法詳解
在JavaScript開發(fā)中,立即執(zhí)行函數（Immediately Invoked Function Expression,簡稱IIFE）是一種非常實用的設計模式,本文將深入探討IIFE的基本概念、作用以及實際應用場景,并通過多個示例幫助開發(fā)者更好地掌握這一技術,需要的朋友可以參考下2025-02-02