带二级导航、轮播海报、二级联动、搜索功能、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">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> <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"> </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"> </a> <a href="#r" class="item right"> </a> </div> <div class="ui-slider-process"> <a href="#0" class="item item_focus"> </a> <a href="#1" class="item item"> </a> <a href="#2" class="item item"> </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: 0; padding: 0; } .clearfix:after{ content: ' '; display: block; height: 0; line-height: 0; clear: both; zoom: 1; } .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: 0; padding: 0; 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: 0; 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: 0; 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: 0; top:0; } .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: 9; 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: 0; top: 0; 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: 2; } .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: 0; 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: 0; 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: 0; } .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: 0; left: 190px; box-shadow: 5px 5px 2px rgba(0,0,0,.1); z-index: 9; } .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: 9; 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: 0; right: 0; 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: 0; background: url(../img/ui-slider-arrow.png) no-repeat; } .ui-slider-arrow .left{ left: 0; } .ui-slider-arrow .right{ right: 0; background-position: -40px 0; } .ui-slider-process{ width: 544px; height: 12px; text-align: center; position: absolute; left: 0; 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; }