欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery实现挂号平台首页源码

程序员文章站 2022-06-23 22:31:24
带二级导航、轮播海报、二级联动、搜索功能、Tab选项卡 按照国际惯例先放图 index.html 城市医院预约平台

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

按照国际惯例先放图

Jquery实现挂号平台首页源码

index.html

<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <title>城市医院预约平台</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/ui.css">
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>

<body>
    <div id="top" class="top">
        <div class="wrap">
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;
                <a href="#">登录</a>
                <a href="#">注册</a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#">帮助中心</a>
            </p>
        </div>
    </div>
    <div id="header" class="header">
        <div class="wrap clearfix">
            <a class="logo" href="index.html"><img src="./img/logo.png"></a>
            <div class="search ui-search">
                <div class="ui-search-selected">医院</div>
                <div class="ui-search-select-list">
                    <a href="#1">科室</a>
                    <a href="#1">疾病</a>
                    <a href="#1">医院</a>
                </div>
                <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
                <a href="#" class="ui-search-submit">&nbsp;</a>
            </div>
        </div>
    </div>
    <!-- 导航 -->
    <div id="nav" class="nav">
        <div class="wrap">
            <div class="link menu">全部科室
                <div class="menu-list ui-menu">
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">内科</a>
                        <a href="#1" class="ui-menu-item-disease">高血压</a>
                        <a href="#1" class="ui-menu-item-disease">冠心病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    内科
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    内科常见
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">外壳</a>
                        <a href="#1" class="ui-menu-item-disease">a疾病</a>
                        <a href="#1" class="ui-menu-item-disease">b疾病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    a疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    b疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui-menu-item">
                        <a href="#1" class="ui-menu-item-department">儿科</a>
                        <a href="#1" class="ui-menu-item-disease">c疾病</a>
                        <a href="#1" class="ui-menu-item-disease">d疾病</a>
                        <div class="ui-menu-item-detail">
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    c疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                            <div class="ui-menu-item-detail-group">
                                <div class="ui-menu-item-detail-group-caption">
                                    d疾病
                                </div>
                                <div class="ui-menu-item-detail-group-list">
                                    <a href="#1">心脑血管科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">心血管内科</a>
                                    <a href="#1">神经内科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                    <a href="#1">内分泌科</a>
                                    <a href="#1">血液科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" class="link">按医院挂号</a>
            <a href="#" class="link">按科室挂号</a>
            <a href="#" class="link">按疾病挂号</a>
            <a href="#" class="link">最新公告</a>
            <a href="#" class="link right">社会知名医院</a>
        </div>
    </div>
    <!-- 轮播图 -->
    <div id="banner" class="banner">
        <div class="banner-slider ui-slider">
            <div class="ui-slider-wrap">
                <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>
                <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>
                <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>
            </div>
            <div class="ui-slider-arrow">
                <a href="#l" class="item left">&nbsp;</a>
                <a href="#r" class="item right">&nbsp;</a>
            </div>
            <div class="ui-slider-process">
                <a href="#0" class="item item_focus">&nbsp;</a>
                <a href="#1" class="item item">&nbsp;</a>
                <a href="#2" class="item item">&nbsp;</a>
            </div>
        </div>
       <!--  二级联动 -->
        <div class="banner-search">
            <div class="caption"><span class="text">快速预约</span></div>
            <div class="form ui-cascading">
                <div class="line">
                    <select name="area" data-search="getdistinctarea" data-where="">
                        <option>医院地区</option>
                    </select>
                </div>
                <div class="line">
                    <select name="level" data-search="getlevebyarea" data-where="">
                        <option>医院等级1</option>
                        <option>医院等级2</option>
                    </select>
                </div>
                <div class="line">
                    <select name="name" data-search="getnamebyareaandlevel" data-where="">
                        <option>医院名称2</option>
                    </select>
                </div>
                <div class="line">
                    <select name="department" data-search="getdepartmentarrbyhospitalname" data-where="">
                        <option>医院科室3</option>
                    </select>
                </div>
            </div>
            <div class="submit">
                <input type="button" class="button" value="快速查询">
            </div>
        </div>
        <div class="banner-help">
            <div class="caption"><span class="text">帮助中心</span></div>
            <div class="list">
                <a href="#" class="link">账号指南</a>
                <a href="#" class="link">预约指南</a>
                <a href="#" class="link">账号找回</a>
                <a href="#" class="link">常见问题</a>
            </div>
        </div>
    </div>

    <div id="content" class="content">
        <div class="wrap clearfix">
            <!-- tab选项卡 -->
            <div class="content-tab">
                <div class="caption">
                    <a href="#8" class="item item_focus">医院</a>
                    <a href="#7" class="item ">科室</a>
                </div>
                <div class="block">
                    <div class="item">
                        <div class="block-caption">
                            <a href="#1" class="block-caption-item block-caption-item_focus">全部</a>
                            <a href="#1" class="block-caption-item">东城区</a>
                            <a href="#1" class="block-caption-item">西城区</a>
                            <a href="#1" class="block-caption-item">朝阳区</a>
                            <a href="#1" class="block-caption-item">丰台区</a>
                            <a href="#1" class="block-caption-item">石景山区</a>
                            <a href="#1" class="block-caption-item">海淀区</a>
                            <a href="#1" class="block-caption-item">门头沟区</a>
                            <a href="#1" class="block-caption-item">房山区</a>
                            <a href="#1" class="block-caption-item">其他</a>
                        </div>
                        <div class="block-content">
                            <div class="block-wrap">
                                <div class="block-list clearfix">
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院" />
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院" />
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院" />
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                    <div class="item">
                                        <img src="img/hospital-1.jpg" alt="xx医院" />
                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>
                                        <div class="item-phone">电话:东院咨询台:010-69155564..</div>
                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>
                                    </div>
                                </div>
                                <div class="block-text-list clearfix">
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>
                                </div>
                                <a class="block-more">更多医院</a>
                            </div>
                            <div class="block-wrap" style="display: none;">
                                其他城区内容
                            </div>
                        </div>
                    </div>
                    <div class="item" style="display: none;">
                        科室内容
                    </div>
                </div>
            </div>
            <!-- 新闻列表 -->
            <div class="content-news">
                <div class="caption"> 最新公告 <a href="#8" class="more">|更多</a> </div>
                <div class="list">
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">防护策略升级通知</a>
                </div>
            </div>
            <div class="content-close">
                <div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a> </div>
                <div class="list">
                    <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>
                    <a href="#9" class="link">首都医科大学附属北京安贞医院妇</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">北京安贞医院妇</a>
                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>
                    <a href="#9" class="link">北京安贞医院妇</a>
                </div>
            </div>
        </div>
    </div>
    <div id="footer" class="footer">
        copyright © 2019xxx版权所有
    </div>
    <a href="#" class="go-top"></a>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
</body>

</html>

layout.css

body{
    margin: 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;
}