DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 通過Tabs方法基於easyUI+bootstrap制作工作站
通過Tabs方法基於easyUI+bootstrap制作工作站
編輯：關於JavaScript     

登陸頁如下所示：

這裡寫圖片描述
這裡寫圖片描述

下面給大家展示下具體實現代碼：

<!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>

這裡寫圖片描述

<!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>

關於JavaScript
Vue概念及常見命令介紹(1)
Vue.js介紹Vue.js是JavaScript MVVM（Model-View-ViewMode
javascript中強制執行toString()具體實現
原文：Enforcing toString() 譯文：javascript 中強制執行 toStri
JS實現5秒鐘自動封鎖div層的方法
本文實例講述了JS實現5秒鐘自動封鎖div層的方法。分享給大家供大家參考。具體實現方法如下：復制代碼

相關文章

JavaScript基礎知識JSON基礎正則表達式關於JavaScriptJavaScript技巧jQuery入門知識AJAX入門JavaScript綜合知識
小編推薦
js獲取Get值的方法 JS實現列表的響應式排版(推薦) Bootstrap編寫一個同時適用於PC、平板、手機的登陸頁面 Bootstrap基本組件學習筆記之input輸入框組(9) JavaScript實現添加、查找、刪除元素 js控制輸入框獲得和失去焦點時狀態顯示的方法教程 javascript運算符——邏輯運算符全面解析 js拖拽的原型聲明和用法總結 JavaScript學習筆記之ES6數組方法 JavaScript中計算網頁中某個元素的位置
熱門推薦
JS學習筆記:Javascript類的繼承 js獲取客戶端操作系統類型的方法【測試可用】 js動態改變select選擇變更option的index值示例 javascript判斷復選框是否選中的方法 淺談javascript中遇到的字符串對象處理 JavaScript中exec函數用法實例分析 jqGrid 學習筆記整理——進階篇(一 ) jQuery插件裡的opacity屬性的浏覽器兼容性 js實現文章文字大小字號功能完整實例
大家都在看
結合MS AJAX將js文件編譯到動態鏈接庫 門戶網站改版之用戶體驗 JS+CSS實現簡易的滑動門效果代碼 jquery 讀取頁面load get post ajax 四種方式代碼寫法 正負小數點後兩位浮點數實現原理及代碼 視覺設計師成長的三個階段小結 jQuery教程:檢測網頁標准的W3C盒子模型 Jquery獲取頁面傳值
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved