带二级导航、轮播海报、二级联动、搜索功能、Tab选项卡

按照国际惯例先放图

index.html

<!DOCTYPE html>
<html lang="zh-cn"> <head>
<meta charset="UTF-8">
<title>城市医院预约平台</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head> <body>
<div id="top" class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
<a href="#">登录</a>
<a href="#">注册</a>
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#">帮助中心</a>
</p>
</div>
</div>
<div id="header" class="header">
<div class="wrap clearfix">
<a class="logo" href="index.html"><img src="./img/logo.png"></a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit">&nbsp;</a>
</div>
</div>
</div>
<!-- 导航 -->
<div id="nav" class="nav">
<div class="wrap">
<div class="link menu">全部科室
<div class="menu-list ui-menu">
<div class="ui-menu-item">
<a href="#1" class="ui-menu-item-department">内科</a>
<a href="#1" class="ui-menu-item-disease">高血压</a>
<a href="#1" class="ui-menu-item-disease">冠心病</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
内科
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
内科常见
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item">
<a href="#1" class="ui-menu-item-department">外壳</a>
<a href="#1" class="ui-menu-item-disease">a疾病</a>
<a href="#1" class="ui-menu-item-disease">b疾病</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
a疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
b疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
</div>
</div>
<div class="ui-menu-item">
<a href="#1" class="ui-menu-item-department">儿科</a>
<a href="#1" class="ui-menu-item-disease">c疾病</a>
<a href="#1" class="ui-menu-item-disease">d疾病</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
c疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">
d疾病
</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">心血管内科</a>
<a href="#1">神经内科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
<a href="#1">内分泌科</a>
<a href="#1">血液科</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="link">按医院挂号</a>
<a href="#" class="link">按科室挂号</a>
<a href="#" class="link">按疾病挂号</a>
<a href="#" class="link">最新公告</a>
<a href="#" class="link right">社会知名医院</a>
</div>
</div>
<!-- 轮播图 -->
<div id="banner" class="banner">
<div class="banner-slider ui-slider">
<div class="ui-slider-wrap">
<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
<a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
</div>
<div class="ui-slider-arrow">
<a href="#l" class="item left">&nbsp;</a>
<a href="#r" class="item right">&nbsp;</a>
</div>
<div class="ui-slider-process">
<a href="#0" class="item item_focus">&nbsp;</a>
<a href="#1" class="item item">&nbsp;</a>
<a href="#2" class="item item">&nbsp;</a>
</div>
</div>
<!-- 二级联动 -->
<div class="banner-search">
<div class="caption"><span class="text">快速预约</span></div>
<div class="form ui-cascading">
<div class="line">
<select name="area" data-search="getDistinctArea" data-where="">
<option>医院地区</option>
</select>
</div>
<div class="line">
<select name="level" data-search="getLeveByArea" data-where="">
<option>医院等级1</option>
<option>医院等级2</option>
</select>
</div>
<div class="line">
<select name="name" data-search="getNameByAreaAndLevel" data-where="">
<option>医院名称2</option>
</select>
</div>
<div class="line">
<select name="department" data-search="getDepartmentArrByHospitalName" data-where="">
<option>医院科室3</option>
</select>
</div>
</div>
<div class="submit">
<input type="button" class="button" value="快速查询">
</div>
</div>
<div class="banner-help">
<div class="caption"><span class="text">帮助中心</span></div>
<div class="list">
<a href="#" class="link">账号指南</a>
<a href="#" class="link">预约指南</a>
<a href="#" class="link">账号找回</a>
<a href="#" class="link">常见问题</a>
</div>
</div>
</div> <div id="content" class="content">
<div class="wrap clearfix">
<!-- TAB选项卡 -->
<div class="content-tab">
<div class="caption">
<a href="#8" class="item item_focus">医院</a>
<a href="#7" class="item ">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="#1" class="block-caption-item block-caption-item_focus">全部</a>
<a href="#1" class="block-caption-item">东城区</a>
<a href="#1" class="block-caption-item">西城区</a>
<a href="#1" class="block-caption-item">朝阳区</a>
<a href="#1" class="block-caption-item">丰台区</a>
<a href="#1" class="block-caption-item">石景山区</a>
<a href="#1" class="block-caption-item">海淀区</a>
<a href="#1" class="block-caption-item">门头沟区</a>
<a href="#1" class="block-caption-item">房山区</a>
<a href="#1" class="block-caption-item">其他</a>
</div>
<div class="block-content">
<div class="block-wrap">
<div class="block-list clearfix">
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" />
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话:东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" />
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话:东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" />
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话:东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
<div class="item">
<img src="img/hospital-1.jpg" alt="xx医院" />
<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
<div class="item-phone">电话:东院咨询台:010-69155564..</div>
<div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
</div>
</div>
<div class="block-text-list clearfix">
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
<a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
</div>
<a class="block-more">更多医院</a>
</div>
<div class="block-wrap" style="display: none;">
其他城区内容
</div>
</div>
</div>
<div class="item" style="display: none;">
科室内容
</div>
</div>
</div>
<!-- 新闻列表 -->
<div class="content-news">
<div class="caption"> 最新公告 <a href="#8" class="more">|更多</a> </div>
<div class="list">
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">防护策略升级通知</a>
</div>
</div>
<div class="content-close">
<div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a> </div>
<div class="list">
<a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
<a href="#9" class="link">首都医科大学附属北京安贞医院妇</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">北京安贞医院妇</a>
<a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
<a href="#9" class="link">北京安贞医院妇</a>
</div>
</div>
</div>
</div>
<div id="footer" class="footer">
Copyright © 2019XXX版权所有
</div>
<a href="#" class="go-top"></a>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/data.js"></script>
</body> </html>

layout.css

body{
margin:;
padding:;
}
.clearfix:after{
content: ' ';
display: block;
height:;
line-height:;
clear: both;
zoom:;
} .wrap{
width: 1000px;
margin:0 auto;
position: relative;
} .top {
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.banner{
width: 802px;
margin: 0 auto;
height: 414px;
padding: 9px 0 0 198px;
}
.banner-slider{
float: left;
width: 544px;
height: 414px;
background-color: #8edff3;
}
.banner-search{
float: right;
width: 250px;
height: 255px;
background-color: #eee;
}
.banner-help{
float: right;
width: 250px;
height: 146px;
background-color: #ccc;
margin-top: 12px;
} .content{
padding: 10px 0 38px 0;
}
.content-tab{
float: left;
width: 742px;
height: 490px;
background-color: #eee;
} .content-news,
.content-close{
float: right;
width: 248px;
height: 236px;
border: 1px solid #ccc;
}
.content-close{
margin-top: 12px;
border-color: red;
} .footer{
height: 70px;
padding: 25px 0;
background-color: #eceef2;
}

base.css

p{
margin:;
padding:;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
} /* #top 模块内样式 */
.top {
line-height: 30px;
font-size: 13px;
color: #868686;
} .top .call{
float: left;
padding-left: 20px;
background: url(../img/icon-call.png) no-repeat center left;
} .top .welcome{
float: right;
} .top a{
color: #2da5e1;
padding-left: 10px;
} /* #header 模块内样式 */ .header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
/*background-color: orange;*/
} /* #nav 模块内样式 */
.nav .link{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .link_focus{
color: #fff;
background-color: #1fa4f0;
padding: 0 20px;
}
.nav a:hover{
color: #d7f3ff;
} .nav .menu{
width: 130px;
padding-right: 30px;
background-color: #1fa4f0;
position: relative;
} .nav .menu .menu-list{
background-color: #1fa4f0;
width: 100%;
height: 423px;
position: absolute;
left:;
top: 36px;
} /* #banner 模块内样式 */
.banner-search{
background-color: #fafafa;
} .banner-help .caption,
.banner-search .caption{
height: 22px;
padding:15px 0 15px 0;
text-align: center;
} .banner-help .caption .text,
.banner-search .caption .text{
display: inline-block;
height: 22px;
line-height: 22px;
padding-left: 28px;
color: #fec009;
font-size: 16px;
background: url(../img/icon-help.png) no-repeat 0 0;
}
.banner-search .form{
height: 150px;
} .banner-search .form .line{
padding-bottom: 9px;
text-align: center;
} .banner-search .form .line select{
width: 170px;
font-size: 12px;
z-index:;
border:1px solid #dcdddd;
height: 26px;
line-height: 26px;
padding: 2px 0 ;
color: #666;
}
.banner-search .submit{
height: 32px;
text-align: center;
} .banner-search .submit .button{
width: 108px;
height: 33px;
background-color: #fecd09;
font-size: 14px;
color: #fff;
border-radius: 3px;
} .banner-help{
background-color: #fafafa;
}
.banner-help .caption .text{
color: #00b3ea;
background-position: 0 -23px;
} .banner-help .link{
color: #00b3ea;
display: inline-block;
width: 86px;
height: 26px;
line-height: 26px;
font-size: 14px;
text-align: center;
padding: 0 0 8px 26px;
} /* #content 模块样式 */ .content-news{
background-color: #fff;
border: 1px solid #f4f6fa;
} .content-close .caption,
.content-news .caption{
height: 38px;
line-height: 38px;
background-color: #f4f6fa;
text-indent: 20px;
color: #fec009;
font-size: 15px;
} .content-close .more,
.content-news .more{
float: right;
padding-right: 22px;
font-size: 12px;
color: #868686;
}
.content-close .list,
.content-news .list{
padding: 15px 20px 13px 35px;
line-height: 29px;
font-size: 12px;
background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}
.content-close .list .link,
.content-news .list .link{
display: block;
color: #969696;
} .content-close{
background-color: #fff;
border: 1px solid #f4f6fa;
} .content-close .caption{
color: #4ab4ed;
} .content-close .list{
background-image: url(../img/list-blue.jpg);
} .content-tab{
background: none;
}
.content-tab .caption{
height: 34px;
line-height: 34px;
background-color: #f5f6fa;
}
.content-tab .caption .item{
display: block;
width: 112px;
height: 34px;
text-align: center;
float: left;
color: #00b3ea;
}
.content-tab .caption .item_focus{
background-color: #60bff2;
color: #fff;
} .content-tab .block{
border: 1px solid #f4f6fa;
height: 452px;
} .content-tab .block-caption{
height: 26px;
line-height: 26px;
padding: 8px;
border-bottom: 1px solid #f4f6fa;
} .content-tab .block-caption-item{
display: block;
padding: 0 10px 0 10px;
font-size: 12px;
color: #4c4948;
float: left;
}
.content-tab .block-caption-item_focus {
background-color: #60bff2;
color: #fff;
} .content-tab .block-content{
padding: 16px 12px;
}
.content-tab .block-content .block-more{
display: block;
line-height: 55px;
text-align: center;
color: #5084c4;
font-size: 14px;
}
/*医院列表 - 容器*/
.content-tab .block-content .block-list{} .content-tab .block-content .block-list .item{
float: left;
width: 216px;
height: 102px;
padding: 0 20px 10px 120px;
position: relative;
font-size: 12px;
} .content-tab .block-content .block-list .item img{
width: 110px;
height: 98px;
position: absolute;
left:;
top:;
} .content-tab .block-content .block-list .item-name{
color: #036eb7;
font-size: 14px;
line-height: 21px;
padding-top: 13px;
}
.content-tab .block-content .block-list .item-level{
float: right;
font-size: 12px;
color: #979797;
}
.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{
line-height: 18px;
padding-bottom: 4px;
color: #666;
} /*医院文案列表 - 容器*/
.content-tab .block-content .block-text-list{} .content-tab .block-content .block-text-list .item{
display: block;
width: 351px;
height: 27px;
font-size: 14px;
color: #666;
padding-top: 8px;
float: left;
border-bottom: 1px dashed #dcdddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
margin-left: 13px;
} .footer{
line-height: 70px;
text-align: center;
font-size: 12px;
color: #666;
}
/* 其他 */
.go-top{
display: block;
position: fixed;
right: 2px;
bottom: 2px;
z-index:;
width: 40px;
height: 40px;
color: #fff;
background: rgb(102, 102, 102) url(../img/icon-go-up.png) center no-repeat;
}
.go-top:hover{
background: rgb(102, 102, 102);
}
.go-top:hover:after{
content: '回到顶部';
display: block;
line-height: 20px;
text-align: center;
}

ui.css

/* 搜索 */
.ui-search{
background: url(../img/ui-search.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.ui-search-selected{
width: 70px;
height: 38px;
line-height: 38px;
position: absolute;
left:;
top:;
text-indent: 14px;
}
.ui-search-select-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left: 2px;
top: 36px;
z-index:;
}
.ui-search-select-list a{
display: block;
color: #A5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width: 208px;
height: 26px;
position: absolute;
top: 5px;
left: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2; }
.ui-search-submit{
display: block;
position: absolute;
right:;
top: 1px;
width: 40px;
height: 36px;
} /* ui-menu 分类菜单 */
.ui-menu{} .ui-menu-item{
height: 22px;
line-height: 22px;
padding: 8px 5px 9px 6px;
margin-left: 2px;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left: 30px;
font-size: 14px;
color: #fff;
}
.ui-menu-item-department:before{
content: ' ';
display: block;
width: 22px;
height: 21px;
position: absolute;
left:;
top: 1px;
background: url('../img/icon-menu.jpg') -22px 0 no-repeat;
} .ui-menu-item:nth-child(2) .ui-menu-item-department:before{
background-position-y: -22px;
}
.ui-menu-item:nth-child(3) .ui-menu-item-department:before{
background-position-y: -66px;
} .ui-menu-item-disease{
font-size: 12px;
float: right;
padding-left: 5px;
color: #d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position-x:;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #333;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item-detail{
display: none;
position: absolute;
width: 500px;
height: 393px;
padding: 20px 10px 10px 29px;
background: #fff url(../img/bg-menu.jpg) center no-repeat;
top:;
left: 190px;
box-shadow: 5px 5px 2px rgba(0,0,0,.1);
z-index:;
}
.ui-menu-item-detail-group{
padding-bottom: 20px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
width: 100%;
display: block;
height: 34px;
line-height: 34px;
color: #666;
font-size: 16px;
font-weight: bold;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
color: #868686;
margin-right: 8px;
font-size: 12px;
padding-bottom:5px;
} .ui-menu-item-detail-group-list a:after{
content: '|';
color: #eee;
padding-left: 8px;
}
/* 回到顶部 */
.ui-backTop{
display: none;
position: fixed;
right: 2px;
bottom: 2px;
z-index:;
width: 40px;
height: 40px;
color: #fff;
background: rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
background: rgba(102,102,102,.9);
}
.ui-backTop:hover:after{
content: '回到顶部';
display: block;
line-height: 20px;
text-align: center;
} /*ui-slider 幻灯片组件*/
.ui-slider{
width: 544px;
height: 414px;
position: relative;
overflow: hidden;
}
.ui-slider-wrap{
width: 99999px;
height: 414px;
position: absolute;
left:;
right:;
transition: all .5s;
}
.ui-slider-wrap .item{
display: block;
float: left; width: 544px;
height: 414px;
} .ui-slider-arrow{
width: 544px;
height: 40px;
position: absolute;
top: 50%;
margin-top: -20px;
}
.ui-slider-arrow .item{
display: block;
width: 40px;
height: 40px;
position: absolute;
top:;
background: url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
left:;
}
.ui-slider-arrow .right{
right:;
background-position: -40px 0;
}
.ui-slider-process{
width: 544px;
height: 12px;
text-align: center;
position: absolute;
left:;
bottom: 20px;
}
.ui-slider-process .item{
display: inline-block;
width: 16px;
height: 16px;
background: url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,
.ui-slider-process .item:hover{
background-position: -23px 0;
}

ui.js

// ui-search 定义
// 搜索框
$.fn.UiSearh = function(){
var ui = $(this); $('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
}); $('.ui-search-select-list a',ui).on('click',function(){ $('.ui-search-selected').text( $(this).text() );
$('.ui-search-select-list').hide(); return false;
}); $('body').on('click',function(){
$('.ui-search-select-list').hide();
})
}
// ui-tab 定规 /**
* @param {string} header TAB组件,的所有选项卡 item
* @param {string} content TAB组件,内容区域,所有 item
* @param {string} focus_prefix 选项卡高亮样式前缀,可选
*/ $.fn.UiTab = function(header,content,focus_prefix){ var ui = $(this);
var tabs = $(header,ui);
var cons = $(content,ui);
var focus_prefix = focus_prefix || ''; tabs.on('click',function(){
var index = $(this).index(); tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
cons.hide().eq(index).show(); return false;
})
} // ui-backTop
// 回到顶部
$.fn.UiBackTop = function(){
var ui = $(this);
var el = $('<a class="ui-backTop" href="#0"></a>');
ui.append( el ); var windowHeight = $(window).height(); $(window).on('scroll',function(){
var top = $('html,body').scrollTop();
if(top > windowHeight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
});
} // ui-slidder // 1. 左右箭头需要能控制翻页
// 2. 翻页的时候,进度点,要联动进行focus
// 3. 翻到第三页的时候,下一页需要回到 第一页,翻到第一页的时候,同理 // 4. 进度点,在点击的时候,需要切换到对应的页面 // 5. 没有(进度点点击、翻页操作)的时候需要进行自动滚动 // 6. 滚动过程中,屏蔽其他操作(自动滚动、左右翻页、进度点点击) // 7. 高级-无缝滚动 $.fn.UiSlider = function(){ var ui = $(this); var wrap = $('.ui-slider-wrap'); var btn_prev = $('.ui-slider-arrow .left',ui);
var btn_next = $('.ui-slider-arrow .right',ui); var items = $('.ui-slider-wrap .item',ui);
var tips =$('.ui-slider-process .item',ui); // 预定义 var current = 0;
var size = items.size();
var width = items.eq(0).width();
var enableAuto = true; // 设置自动滚动感应(如果鼠标在 wrap 中,不要自动滚动)
ui
.on('mouseover',function(){
enableAuto = false;
})
.on('mouseout',function(){
enableAuto = true;
}) // 具体操作
wrap
.on('move_prev',function(){
if(current<=0){
current = size;
}
current = current - 1 ;
wrap.triggerHandler('move_to',current);
})
.on('move_next',function(){
if( current >= size-1){
current = -1;
}
current = current + 1 ;
wrap.triggerHandler('move_to',current);
})
.on('move_to',function(evt,index){
wrap.css('left',index*width*-1);
tips.removeClass('item_focus').eq(index).addClass('item_focus');
})
.on('auto_move',function(){ setInterval(function(){
enableAuto && wrap.triggerHandler('move_next');
},2000); })
.triggerHandler('auto_move'); // 事件
btn_prev.on('click',function(){
wrap.triggerHandler('move_prev');
});
btn_next.on('click',function(){
wrap.triggerHandler('move_next');
});
tips.on('click',function(){
var index = $(this).index();
current = index;
wrap.triggerHandler('move_to',index);
}) }
// ui-cascading
// 二级联动
$.fn.UiCascading = function(){
var ui = $(this);
var selects = $('select',ui); selects
.on('change',function(){
var val = $(this).val();
var index = selects.index(this); // 触发下一个 select 的更新,根据当前的值
var where = $(this).attr('data-where');
where = where ? where.split(',') : [];
where.push( $(this).val() ); selects.eq(index+1)
.attr('data-where',where.join(','))
.triggerHandler('reloadOptions');
// 触发下一个之后的 select 的初始化(清除不应该的数据项)
ui.find('select:gt('+ (index+1) +')').each(function(){
$(this)
.attr('data-where','')
.triggerHandler('reloadOptions');
}) })
.on('reloadOptions',function(){
var method = $(this).attr('data-search');
var args = $(this).attr('data-where').split(',');
var data = AjaxRemoteGetData[ method ].apply( this, args );
var select = $(this);
select.find('option').remove();
$.each( data , function(i,item){
var el = $('<option value="'+item+'">'+item+'</option>');
select.append(el);
});
}); selects.eq(0).triggerHandler('reloadOptions');
} // 页面的脚本逻辑
$(function () { $('.ui-search').UiSearh(); $('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap' , 'block-caption-'); $('body').UiBackTop(); $('.ui-slider').UiSlider();
$('.ui-cascading').UiCascading(); });

data.js

var storage = {};

storage.hospital = [

    ['area','level','type','name','address','phone','imgUrl','time'],

    ['朝阳区','三级甲等','卫生部直属医院','首都儿科研究所附属儿童医院','北京市朝阳区雅宝路2号','010-85695756','img/hospital-1.jpg','14:30'],

    ['朝阳区','三级甲等','卫生部直属医院','中日友好医院','北京市朝阳区樱花东路2号','84205288','img/hospital-2.jpg','8:30'],
['西城区','三级甲等','卫生部直属医院','首都医科大学附属北京友谊医院','北京市西城区永安路95号','63016616','img/hospital-3.jpg','9:30'],
['朝阳区','三级甲等','卫生部直属医院','首都医科大学附属北京地坛医院B附属','北京市朝阳区樱花东路2号','84205288','img/hospital-4.jpg','8:30'],
['朝阳区','三级合格','北京区县属医院','空军总医院','北京市朝阳区樱花东路2号','84205288','img/hospital-5.jpg','8:30'],
['海淀区','三级合格','北京区县属医院','航天中心医院(原721医院)','北京市海淀区玉泉路15号','59971160','img/hospital-6.jpg','8:30'],
['丰台区','三级甲等','北京区县属医院','北京中医药大学东方医院','北京丰台区方庄芳星园一区6号','67689655','img/hospital-1.jpg','8:30'], ['丰台区','三级合格','北京区县属医院','北京电力医院','北京市丰台区太平桥西里甲1号','84205288','img/hospital-2.jpg','8:30'],
['顺义区','三级甲等','北京区县属医院','北京中医医院顺义医院','北京市顺义区站前东街5号','84205288','img/hospital-3.jpg','8:30'],
['通州区','三级甲等','其他','首都医科大学附属北京潞河医院三级综合医院','北京市通州区新华南路82号','69543901','img/hospital-4.jpg','8:30'], ]; storage.department = [
['hospitalName', ['departmentName'] ], ['首都儿科研究所附属儿童医院',['儿科a','儿科b','儿科d'] ],
['中日友好医院',['科室a','科室b','科室c','科室d'] ], ['首都医科大学附属北京友谊医院', ['departmentName-1'] ],
['首都医科大学附属北京地坛医院B附属', ['departmentName-2'] ],
['空军总医院',['departmentName-3'] ],
['航天中心医院(原721医院)', ['departmentName-4'] ],
['北京中医药大学东方医院', ['departmentName-5'] ],
['北京电力医院', ['departmentName-6'] ],
['北京中医医院顺义医院', ['departmentName-7'] ] ,
['首都医科大学附属北京潞河医院三级综合医院', ['departmentName-8'] ] ] var AjaxRemoteGetData = {}; AjaxRemoteGetData.getDistinctArea = function() { console.log('远程数据获取','getDistinctArea'); var map = {};
var arr = ['医院地区'];
for(i=1,j=storage.hospital.length; i<j ; i++){
var _d = storage.hospital[i][0];
map[_d] =1;
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getLeveByArea = function( area ){
console.log('远程数据获取','getLeveByArea','arguments:',arguments); var map = {};
var arr = ['医院等级'];
for(i=1,j=storage.hospital.length; i<j ; i++){ var _area = storage.hospital[i][0];
var _d = storage.hospital[i][1];
if(area == _area){
map[_d] = 1;
}
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getNameByAreaAndLevel = function( area , level ){
console.log('远程数据获取','getNameByAreaAndLevel','arguments:',arguments);
var map = {};
var arr = ['医院名称'];
for(i=1,j=storage.hospital.length; i<j ; i++){ var _area = storage.hospital[i][0];
var _level= storage.hospital[i][1];
var _d = storage.hospital[i][3];
if(level == _level && area == _area ){
map[_d] = 1;
}
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getDepartmentArrByHospitalName = function( area,level,hospitalName ){
console.log('远程数据获取','getDepartmentArrByHospitalName','arguments:',arguments);
var map = {};
var arr = ['科室名称'];
for(i=1,j=storage.department.length; i<j ; i++){ var _hospitalName = storage.department[i][0];
var _d = storage.department[i][1];
if(hospitalName == _hospitalName ){
map[_d] = 1;
}
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
} AjaxRemoteGetData.getDistinctType=function(){
console.log('远程数据获取','getDistinctType'); var map = {};
var arr = ['医院类型'];
for(i=1,j=storage.hospital.length; i<j ; i++){
var _d = storage.hospital[i][2];
map[_d] =1;
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getDistinctLevel=function(){
console.log('远程数据获取','getDistinctLevel'); var map = {};
var arr = ['医院等级'];
for(i=1,j=storage.hospital.length; i<j ; i++){
var _d = storage.hospital[i][1];
map[_d] =1;
}
for( k in map){
arr.push(k); }
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getHospitalArrByFilter=function(type,level,area){
console.log('远程数据获取','getHospitalArrByFilter','arguments:',arguments);
var map = {};
var arr = ['医院列表'];
for(i=1,j=storage.hospital.length; i<j ; i++){ var _type= storage.hospital[i][2];
var _area = storage.hospital[i][0];
var _level= storage.hospital[i][1]; var _d = storage.hospital[i][3];
if(
(level == _level || level =='全部') &&
(area == _area || area == '全部' ) &&
(type == _type || type == '全部')
){
arr.push(storage.hospital[i]);
}
}
console.log('结果',arr);
return arr;
}

Jquery实现挂号平台首页源码的更多相关文章

  1. Jquery实现挂号平台首页源码2

    第二个版本:点击预约挂号可跳转到排班表,获取之后7个星期的排班 先放图 首先是index.html <!DOCTYPE html> <html lang="en" ...

  2. Bootrap 项目实战(微金所前端首页)第二部分(首页源码)

    首页源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. Linux平台下源码安装mysql多实例数据库

    Linux平台下源码安装mysql多实例数据库[root@linux-node1 ~]# netstat -tlunp | grep 330tcp6 0 0 :::3306 :::* LISTEN 6 ...

  4. Android8.1 MTK平台 SystemUI源码分析之 网络信号栏显示刷新

    SystemUI系列文章 Android8.1 MTK平台 SystemUI源码分析之 Notification流程 Android8.1 MTK平台 SystemUI源码分析之 电池时钟刷新 And ...

  5. JS魔法堂:jQuery.Deferred(jQuery1.5-2.1)源码剖析

    一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var p ...

  6. 9款精致HTML5/jQuery日历时钟控件源码下载(源码请见百度云) 链接:http://pan.baidu.com/s/1geIXe75 密码:7m4a

    现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...

  7. JQuery实现分页程序代码,源码下载

    Web开发,分页在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用 JQuery模板显示 ...

  8. 7款经典炫酷的HTML5/jQuery动画应用示例及源码

    jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...

  9. 九款酷炫基于jquery实现的应用及源码

    1.HTML5 Loading动画加载 五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进 ...

随机推荐

  1. two measures precision and recall of classification

    In pattern recognition and information retrievial with binary classification , there are some measur ...

  2. ionic中的http,jsonp的使用

    要导入 import { HttpModule,JsonpModule } from '@angular/http'; 到app.module.ts       http,jsonp的区别 第一:在U ...

  3. Gorm与数据库(单复数)表结构之间的映射

    Gorm连接MySQL: import ( _ "github.com/go-sql-driver/mysql" "github.com/jinzhu/gorm" ...

  4. node.js+express+mongoose实现用户增删查改案例

    node.js+express+mongodb对用户进行增删查改 一.用到的相关技术 使用 Node.js 的 express 框架搭建web服务 使用 express 中间件 body-parse ...

  5. Java也疯狂-分享利用ffmpeg做视频转换的工具

    朋友需要经常将视频统一转换为mp4格式,市面上的工具很多,但是转换的体积.自动化程度等都不好,于是花了一个小时给朋友写了个给予ffmpeg的批量转换工具,功能简单但是很实用,也正好给学习Java的同学 ...

  6. 大数四则运算之加法运算--------C语言版(未考虑负数)

    /* 声明两个字符数组,用于存储大数,声明两个整数型数组便于计算,将字符数组中的元素转换为对应整数存于整数数组中,将低位放在整数数组低位,便于对齐计算 判断是否有进位,计算结果高位先输出,从数组后往前 ...

  7. window下建立vue.js项目

    安装node.js 直接下载安装文件安装就可以了 vue项目搭建 .到自己要件项目的文件夹运行cmd命令 .如果没有安装vue-cli .npm install -g vue-cli .vue ini ...

  8. linux使用和基础操作

    1.linux系统初使用 linux有图形终端和字符终端,关于linux学习以字符终端为主,即命令行操作: [root@centos7 ~]#runlevel 查看当前工作模式N 3 //3为字符终端 ...

  9. 五分钟了解抽象语法树(AST)babel是如何转换的?

    抽象语法树 什么是抽象语法树? It is a hierarchical program representation that presents source code structure acco ...

  10. Android中实现自定义View组件并使其能跟随鼠标移动

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建An ...