Jquery實現掛號平臺首頁源碼

時間 2020-01-06

原文原文鏈接

帶二級導航、輪播海報、二級聯動、搜索功能、Tab選項卡javascript

按照國際慣例先放圖css

index.htmlhtml

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

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.cssjquery

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.cssapp

/* 搜索 */
.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.jside

// 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.jsui

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;
}