帶二級導航、輪播海報、二級聯動、搜索功能、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 href="https://www.cnblogs.com/chenyingying0/p/#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 = https://www.cnblogs.com/chenyingying0/p/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 =https://www.cnblogs.com/chenyingying0/p/ {}; 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; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21655.html
標籤：jQuery