Jquery实现挂号平台首页源码

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

按照国际惯例先放图

index.html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>城市医院预约平台</title>

    <link rel="stylesheet" type="text/css" href="css/layout.css">

    <link rel="stylesheet" type="text/css" href="css/base.css">

    <link rel="stylesheet" type="text/css" href="css/ui.css">

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

</head>

<body>

    <div id="top" class="top">

        <div class="wrap">

            <p class="call">010-114/116114电话预约</p>

            <p class="welcome">欢迎来到城市医院预约挂号统一平台&nbsp;请&nbsp;

                <a href="#">登录</a>

                <a href="#">注册</a>

                &nbsp;&nbsp;&nbsp;&nbsp;

                <a href="#">帮助中心</a>

            </p>

        </div>

    </div>

    <div id="header" class="header">

        <div class="wrap clearfix">

            <a class="logo" href="index.html"><img src="./img/logo.png"></a>

            <div class="search ui-search">

                <div class="ui-search-selected">医院</div>

                <div class="ui-search-select-list">

                    <a href="#1">科室</a>

                    <a href="#1">疾病</a>

                    <a href="#1">医院</a>

                </div>

                <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">

                <a href="#" class="ui-search-submit">&nbsp;</a>

            </div>

        </div>

    </div>

    <!-- 导航 -->

    <div id="nav" class="nav">

        <div class="wrap">

            <div class="link menu">全部科室

                <div class="menu-list ui-menu">

                    <div class="ui-menu-item">

                        <a href="#1" class="ui-menu-item-department">内科</a>

                        <a href="#1" class="ui-menu-item-disease">高血压</a>

                        <a href="#1" class="ui-menu-item-disease">冠心病</a>

                        <div class="ui-menu-item-detail">

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    内科

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    内科常见

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="ui-menu-item">

                        <a href="#1" class="ui-menu-item-department">外壳</a>

                        <a href="#1" class="ui-menu-item-disease">a疾病</a>

                        <a href="#1" class="ui-menu-item-disease">b疾病</a>

                        <div class="ui-menu-item-detail">

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    a疾病

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    b疾病

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="ui-menu-item">

                        <a href="#1" class="ui-menu-item-department">儿科</a>

                        <a href="#1" class="ui-menu-item-disease">c疾病</a>

                        <a href="#1" class="ui-menu-item-disease">d疾病</a>

                        <div class="ui-menu-item-detail">

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    c疾病

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                            <div class="ui-menu-item-detail-group">

                                <div class="ui-menu-item-detail-group-caption">

                                    d疾病

                                </div>

                                <div class="ui-menu-item-detail-group-list">

                                    <a href="#1">心脑血管科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">心血管内科</a>

                                    <a href="#1">神经内科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                    <a href="#1">内分泌科</a>

                                    <a href="#1">血液科</a>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <a href="#" class="link">按医院挂号</a>

            <a href="#" class="link">按科室挂号</a>

            <a href="#" class="link">按疾病挂号</a>

            <a href="#" class="link">最新公告</a>

            <a href="#" class="link right">社会知名医院</a>

        </div>

    </div>

    <!-- 轮播图 -->

    <div id="banner" class="banner">

        <div class="banner-slider ui-slider">

            <div class="ui-slider-wrap">

                <a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>

                <a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-1"></a>

                <a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-1"></a>

            </div>

            <div class="ui-slider-arrow">

                <a href="#l" class="item left">&nbsp;</a>

                <a href="#r" class="item right">&nbsp;</a>

            </div>

            <div class="ui-slider-process">

                <a href="#0" class="item item_focus">&nbsp;</a>

                <a href="#1" class="item item">&nbsp;</a>

                <a href="#2" class="item item">&nbsp;</a>

            </div>

        </div>

       <!--  二级联动 -->

        <div class="banner-search">

            <div class="caption"><span class="text">快速预约</span></div>

            <div class="form ui-cascading">

                <div class="line">

                    <select name="area" data-search="getDistinctArea" data-where="">

                        <option>医院地区</option>

                    </select>

                </div>

                <div class="line">

                    <select name="level" data-search="getLeveByArea" data-where="">

                        <option>医院等级1</option>

                        <option>医院等级2</option>

                    </select>

                </div>

                <div class="line">

                    <select name="name" data-search="getNameByAreaAndLevel" data-where="">

                        <option>医院名称2</option>

                    </select>

                </div>

                <div class="line">

                    <select name="department" data-search="getDepartmentArrByHospitalName" data-where="">

                        <option>医院科室3</option>

                    </select>

                </div>

            </div>

            <div class="submit">

                <input type="button" class="button" value="快速查询">

            </div>

        </div>

        <div class="banner-help">

            <div class="caption"><span class="text">帮助中心</span></div>

            <div class="list">

                <a href="#" class="link">账号指南</a>

                <a href="#" class="link">预约指南</a>

                <a href="#" class="link">账号找回</a>

                <a href="#" class="link">常见问题</a>

            </div>

        </div>

    </div>

    <div id="content" class="content">

        <div class="wrap clearfix">

            <!-- TAB选项卡 -->

            <div class="content-tab">

                <div class="caption">

                    <a href="#8" class="item item_focus">医院</a>

                    <a href="#7" class="item ">科室</a>

                </div>

                <div class="block">

                    <div class="item">

                        <div class="block-caption">

                            <a href="#1" class="block-caption-item block-caption-item_focus">全部</a>

                            <a href="#1" class="block-caption-item">东城区</a>

                            <a href="#1" class="block-caption-item">西城区</a>

                            <a href="#1" class="block-caption-item">朝阳区</a>

                            <a href="#1" class="block-caption-item">丰台区</a>

                            <a href="#1" class="block-caption-item">石景山区</a>

                            <a href="#1" class="block-caption-item">海淀区</a>

                            <a href="#1" class="block-caption-item">门头沟区</a>

                            <a href="#1" class="block-caption-item">房山区</a>

                            <a href="#1" class="block-caption-item">其他</a>

                        </div>

                        <div class="block-content">

                            <div class="block-wrap">

                                <div class="block-list clearfix">

                                    <div class="item">

                                        <img src="img/hospital-1.jpg" alt="xx医院" ／>

                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

                                        <div class="item-phone">电话：东院咨询台:010-69155564..</div>

                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

                                    </div>

                                    <div class="item">

                                        <img src="img/hospital-1.jpg" alt="xx医院" ／>

                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

                                        <div class="item-phone">电话：东院咨询台:010-69155564..</div>

                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

                                    </div>

                                    <div class="item">

                                        <img src="img/hospital-1.jpg" alt="xx医院" ／>

                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

                                        <div class="item-phone">电话：东院咨询台:010-69155564..</div>

                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

                                    </div>

                                    <div class="item">

                                        <img src="img/hospital-1.jpg" alt="xx医院" ／>

                                        <div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

                                        <div class="item-phone">电话：东院咨询台:010-69155564..</div>

                                        <div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div>

                                    </div>

                                </div>

                                <div class="block-text-list clearfix">

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                    <a href="#9" class="item">首都儿科研究所附属儿童医院 <span class="level">【三级甲等】</span></a>

                                </div>

                                <a class="block-more">更多医院</a>

                            </div>

                            <div class="block-wrap" style="display: none;">

                                其他城区内容

                            </div>

                        </div>

                    </div>

                    <div class="item" style="display: none;">

                        科室内容

                    </div>

                </div>

            </div>

            <!-- 新闻列表 -->

            <div class="content-news">

                <div class="caption"> 最新公告 <a href="#8" class="more">|更多</a> </div>

                <div class="list">

                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>

                    <a href="#9" class="link">防护策略升级通知</a>

                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>

                    <a href="#9" class="link">防护策略升级通知</a>

                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>

                    <a href="#9" class="link">防护策略升级通知</a>

                </div>

            </div>

            <div class="content-close">

                <div class="caption"> 停诊公告 <a href="#8" class="more">|更多</a> </div>

                <div class="list">

                    <a href="#9" class="link">首都医科大学附属北京安贞医院消...</a>

                    <a href="#9" class="link">首都医科大学附属北京安贞医院妇</a>

                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>

                    <a href="#9" class="link">北京安贞医院妇</a>

                    <a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a>

                    <a href="#9" class="link">北京安贞医院妇</a>

                </div>

            </div>

        </div>

    </div>

    <div id="footer" class="footer">

        Copyright © 2019XXX版权所有

    </div>

    <a href="#" class="go-top"></a>

    <script type="text/javascript" src="js/ui.js"></script>

    <script type="text/javascript" src="js/data.js"></script>

</body>

</html>

layout.css

body{

    margin:;

    padding:;

}

.clearfix:after{

    content: ' ';

    display: block;

    height:;

    line-height:;

    clear: both;

    zoom:;

}

.wrap{

    width: 1000px;

    margin:0 auto;

    position: relative;

}

.top {

    height: 30px;

    background-color: #f5f5f5;

}

.header{

    height: 92px;

}

.nav{

    height: 36px;

    background-color: #60bff2;

}

.banner{

    width: 802px;

    margin: 0 auto;

    height: 414px;

    padding: 9px 0 0 198px;

}

.banner-slider{

    float: left;

    width: 544px;

    height: 414px;

    background-color: #8edff3;

}

.banner-search{

    float: right;

    width: 250px;

    height: 255px;

    background-color: #eee;

}

.banner-help{

    float: right;

    width: 250px;

    height: 146px;

    background-color: #ccc;

    margin-top: 12px;

}

.content{

    padding: 10px 0 38px 0;

}

.content-tab{

    float: left;

    width: 742px;

    height: 490px;

    background-color: #eee;

}

.content-news,

.content-close{

    float: right;

    width: 248px;

    height: 236px;

    border: 1px solid #ccc;

}

.content-close{

    margin-top: 12px;

    border-color: red;

}

.footer{

    height: 70px;

    padding: 25px 0;

    background-color: #eceef2;

}

base.css

p{

    margin:;

    padding:;

    display: inline-block;

}

a{

    text-decoration: none;

}

select,input{

    border: none;

    outline: none;

}

/* #top 模块内样式 */

.top {

    line-height: 30px;

    font-size: 13px;

    color: #868686;

}

.top .call{

    float: left;

    padding-left: 20px;

    background: url(../img/icon-call.png) no-repeat center left;

}

.top .welcome{

    float: right;

}

.top a{

    color: #2da5e1;

    padding-left: 10px;

}

/* #header 模块内样式 */

.header .logo{

    width: 402px;

    height: 74px;

    padding: 9px 0;

    display: inline-block;

}

.header .logo img{

    width: 100%;

    height: 100%;

}

.header .search {

    width: 326px;

    height: 38px;

    position: absolute;

    right: 0px;

    top: 29px;

    /*background-color: orange;*/

}

/* #nav 模块内样式 */

.nav .link{

    display: inline-block;

    float: left;

    padding-left: 30px;

    line-height: 36px;

    color: #fff;

    font-size: 16px;

    min-width: 80px;

    text-align: center;

}

.nav .link_focus{

    color: #fff;

    background-color: #1fa4f0;

    padding: 0 20px;

}

.nav a:hover{

    color: #d7f3ff;

}

.nav .menu{

    width: 130px;

    padding-right: 30px;

    background-color: #1fa4f0;

    position: relative;

}

.nav .menu .menu-list{

    background-color: #1fa4f0;

    width: 100%;

    height: 423px;

    position: absolute;

    left:;

    top: 36px;

}

/* #banner 模块内样式 */

.banner-search{

    background-color: #fafafa;

}

.banner-help .caption,

.banner-search .caption{

    height: 22px;

    padding:15px 0 15px 0;

    text-align: center;

}

.banner-help .caption .text,

.banner-search .caption .text{

    display: inline-block;

    height: 22px;

    line-height: 22px;

    padding-left: 28px;

    color: #fec009;

    font-size: 16px;

    background: url(../img/icon-help.png) no-repeat  0 0;

}

.banner-search .form{

    height: 150px;

}

.banner-search .form .line{

    padding-bottom: 9px;

    text-align: center;

}

.banner-search .form .line select{

    width: 170px;

    font-size: 12px;

    z-index:;

    border:1px solid #dcdddd;

    height: 26px;

    line-height: 26px;

    padding: 2px 0 ;

    color: #666;

}

.banner-search .submit{

    height: 32px;

    text-align: center;

}

.banner-search .submit .button{

    width: 108px;

    height: 33px;

    background-color: #fecd09;

    font-size: 14px;

    color: #fff;

    border-radius: 3px;

}

.banner-help{

    background-color: #fafafa;

}

.banner-help .caption .text{

    color: #00b3ea;

    background-position: 0 -23px;

}

.banner-help .link{

    color: #00b3ea;

    display: inline-block;

    width: 86px;

    height: 26px;

    line-height: 26px;

    font-size: 14px;

    text-align: center;

    padding: 0 0 8px 26px;

}

/* #content 模块样式 */

.content-news{

    background-color: #fff;

    border: 1px solid #f4f6fa;

}

.content-close .caption,

.content-news .caption{

    height: 38px;

    line-height: 38px;

    background-color: #f4f6fa;

    text-indent: 20px;

    color: #fec009;

    font-size: 15px;

}

.content-close .more,

.content-news .more{

    float: right;

    padding-right: 22px;

    font-size: 12px;

    color: #868686;

}

.content-close .list,

.content-news .list{

    padding: 15px 20px 13px 35px;

    line-height: 29px;

    font-size: 12px;

    background: url(../img/list-yellow.jpg) 17px 20px no-repeat;

}

.content-close .list .link,

.content-news .list .link{

    display: block;

    color: #969696;

}

.content-close{

    background-color: #fff;

    border: 1px solid #f4f6fa;

}

.content-close .caption{

    color: #4ab4ed;

}

.content-close .list{

    background-image: url(../img/list-blue.jpg);

}

.content-tab{

    background: none;

}

.content-tab .caption{

    height: 34px;

    line-height: 34px;

    background-color: #f5f6fa;

}

.content-tab .caption .item{

    display: block;

    width: 112px;

    height: 34px;

    text-align: center;

    float: left;

    color: #00b3ea;

}

.content-tab .caption .item_focus{

    background-color: #60bff2;

    color: #fff;

}

.content-tab .block{

    border: 1px solid #f4f6fa;

    height: 452px;

}

.content-tab .block-caption{

    height: 26px;

    line-height: 26px;

    padding: 8px;

    border-bottom:  1px solid #f4f6fa;

}

.content-tab .block-caption-item{

    display: block;

    padding: 0 10px 0 10px;

    font-size: 12px;

    color: #4c4948;

    float: left;

}

.content-tab .block-caption-item_focus {

    background-color: #60bff2;

    color: #fff;

}

.content-tab .block-content{

    padding: 16px 12px;

}

.content-tab .block-content .block-more{

    display: block;

    line-height: 55px;

    text-align: center;

    color: #5084c4;

    font-size: 14px;

}

/*医院列表 - 容器*/

.content-tab .block-content .block-list{}

.content-tab .block-content .block-list .item{

    float: left;

    width: 216px;

    height: 102px;

    padding: 0 20px 10px 120px;

    position: relative;

    font-size: 12px;

}

.content-tab .block-content .block-list .item img{

    width: 110px;

    height: 98px;

    position: absolute;

    left:;

    top:;

}

.content-tab .block-content .block-list .item-name{

    color: #036eb7;

    font-size: 14px;

    line-height: 21px;

    padding-top: 13px;

}

.content-tab .block-content .block-list .item-level{

    float: right;

    font-size: 12px;

    color: #979797;

}

.content-tab .block-content .block-list .item-phone,

.content-tab .block-content .block-list .item-address{

    line-height: 18px;

    padding-bottom: 4px;

    color: #666;

}

/*医院文案列表 - 容器*/

.content-tab .block-content .block-text-list{}

.content-tab .block-content .block-text-list .item{

    display: block;

    width: 351px;

    height: 27px;

    font-size: 14px;

    color: #666;

    padding-top: 8px;

    float: left;

    border-bottom: 1px dashed #dcdddd;

}

.content-tab .block-content .block-text-list .item:nth-child(2n){

    margin-left: 13px;

}

.footer{

    line-height: 70px;

    text-align: center;

    font-size: 12px;

    color: #666;

}

/* 其他 */

.go-top{

  display: block;

  position: fixed;

  right: 2px;

  bottom: 2px;

  z-index:;

  width: 40px;

  height: 40px;

  color: #fff;

  background: rgb(102, 102, 102) url(../img/icon-go-up.png) center no-repeat;

}

.go-top:hover{

  background: rgb(102, 102, 102);

}

.go-top:hover:after{

  content: '回到顶部';

  display: block;

  line-height: 20px;

  text-align: center;

}

ui.css

/* 搜索 */

.ui-search{

    background: url(../img/ui-search.jpg) center no-repeat;

    font-size: 14px;

    color: #fff;

    position: relative;

}

.ui-search-selected{

    width: 70px;

    height: 38px;

    line-height: 38px;

    position: absolute;

    left:;

    top:;

    text-indent: 14px;

}

.ui-search-select-list{

    display: none;

    position: absolute;

    width: 67px;

    line-height: 24px;

    background-color: #fff;

    box-shadow: 3px 3px 5px rgba(0,0,0,.2);

    left: 2px;

    top: 36px;

    z-index:;

}

.ui-search-select-list a{

    display: block;

    color: #A5a2a2;

    text-align: center;

}

.ui-search-select-list a:hover{

    background-color: #ebeef5;

}

.ui-search-input{

    width: 208px;

    height: 26px;

    position: absolute;

    top: 5px;

    left: 73px;

    line-height: 26px;

    font-size: 13px;

    color: #A5A2A2;

}

.ui-search-submit{

    display: block;

    position: absolute;

    right:;

    top: 1px;

    width: 40px;

    height: 36px;

}

/* ui-menu 分类菜单 */

.ui-menu{}

.ui-menu-item{

    height: 22px;

    line-height: 22px;

    padding: 8px 5px 9px 6px;

    margin-left: 2px;

}

.ui-menu-item:hover{

    background-color: #fff;

}

.ui-menu-item-department{

    float: left;

    height: 22px;

    line-height: 22px;

    position: relative;

    padding-left: 30px;

    font-size: 14px;

    color: #fff;

}

.ui-menu-item-department:before{

    content: ' ';

    display: block;

    width: 22px;

    height: 21px;

    position: absolute;

    left:;

    top: 1px;

    background: url('../img/icon-menu.jpg') -22px 0 no-repeat;

}

.ui-menu-item:nth-child(2) .ui-menu-item-department:before{

    background-position-y: -22px;

}

.ui-menu-item:nth-child(3) .ui-menu-item-department:before{

    background-position-y: -66px;

}

.ui-menu-item-disease{

    font-size: 12px;

    float: right;

    padding-left: 5px;

    color: #d7f3ff;

}

.ui-menu-item:hover .ui-menu-item-department:before{

    background-position-x:;

}

.ui-menu-item:hover .ui-menu-item-department{

    color: #333;

}

.ui-menu-item:hover .ui-menu-item-disease{

    color: #868686;

}

.ui-menu-item:hover  .ui-menu-item-detail{

    display: block;

}

.ui-menu-item-detail{

    display: none;

    position: absolute;

    width: 500px;

    height: 393px;

    padding: 20px 10px 10px 29px;

    background: #fff url(../img/bg-menu.jpg) center no-repeat;

    top:;

    left: 190px;

    box-shadow: 5px 5px 2px rgba(0,0,0,.1);

    z-index:;

}

.ui-menu-item-detail-group{

    padding-bottom: 20px;

    text-align: left;

}

.ui-menu-item-detail-group-caption{

    width: 100%;

    display: block;

    height: 34px;

    line-height: 34px;

    color: #666;

    font-size: 16px;

    font-weight: bold;

}

.ui-menu-item-detail-group-list{

    line-height: 23px;

}

.ui-menu-item-detail-group-list a{

    display: inline-block;

    color: #868686;

    margin-right: 8px;

    font-size: 12px;

    padding-bottom:5px;

}

.ui-menu-item-detail-group-list a:after{

    content: '|';

    color: #eee;

    padding-left: 8px;

}

/* 回到顶部 */

.ui-backTop{

    display: none;

    position: fixed;

    right: 2px;

    bottom: 2px;

    z-index:;

    width: 40px;

    height: 40px;

    color: #fff;

    background: rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;

}

.ui-backTop:hover{

    background: rgba(102,102,102,.9);

}

.ui-backTop:hover:after{

    content: '回到顶部';

    display: block;

    line-height: 20px;

    text-align: center;

}

/*ui-slider 幻灯片组件*/

.ui-slider{

    width: 544px;

    height: 414px;

    position: relative;

    overflow: hidden;

}

.ui-slider-wrap{

    width: 99999px;

    height: 414px;

    position: absolute;

    left:;

    right:;

    transition: all .5s;

}

.ui-slider-wrap .item{

    display: block;

    float: left;

    width: 544px;

    height: 414px;

}

.ui-slider-arrow{

    width: 544px;

    height: 40px;

    position: absolute;

    top: 50%;

    margin-top: -20px;

}

.ui-slider-arrow .item{

    display: block;

    width: 40px;

    height: 40px;

    position: absolute;

    top:;

    background: url(../img/ui-slider-arrow.png) no-repeat;

}

.ui-slider-arrow .left{

    left:;

}

.ui-slider-arrow .right{

    right:;

    background-position: -40px 0;

}

.ui-slider-process{

    width: 544px;

    height: 12px;

    text-align: center;

    position: absolute;

    left:;

    bottom: 20px;

}

.ui-slider-process .item{

    display: inline-block;

    width: 16px;

    height: 16px;

    background: url(../img/ui-slider-process.png) no-repeat;

}

.ui-slider-process .item_focus,

.ui-slider-process .item:hover{

    background-position: -23px 0;

}

ui.js

// ui-search 定义

// 搜索框

$.fn.UiSearh = function(){

    var ui = $(this);

    $('.ui-search-selected',ui).on('click',function(){

        $('.ui-search-select-list').show();

        return false;

    });

    $('.ui-search-select-list a',ui).on('click',function(){

        $('.ui-search-selected').text( $(this).text() );

        $('.ui-search-select-list').hide();

        return false;

    });

    $('body').on('click',function(){

        $('.ui-search-select-list').hide();

    })

}

// ui-tab 定规

/**

 * @param {string} header  TAB组件，的所有选项卡 item

 * @param {string} content TAB组件，内容区域，所有 item

 * @param {string} focus_prefix  选项卡高亮样式前缀，可选

 */

$.fn.UiTab = function(header,content,focus_prefix){

    var ui = $(this);

    var tabs = $(header,ui);

    var cons = $(content,ui);

    var focus_prefix = focus_prefix || '';

    tabs.on('click',function(){

        var index = $(this).index();

        tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');

        cons.hide().eq(index).show();

        return false;

    })

}

// ui-backTop

// 回到顶部

$.fn.UiBackTop = function(){

    var ui = $(this);

    var el = $('<a class="ui-backTop" href="#0"></a>');

    ui.append( el );

    var windowHeight = $(window).height();

    $(window).on('scroll',function(){

        var top = $('html,body').scrollTop();

        if(top > windowHeight){

            el.show();

        }else{

            el.hide();

        }

    });

    el.on('click',function(){

        $(window).scrollTop(0);

    });

}

// ui-slidder

//    1. 左右箭头需要能控制翻页

//    2. 翻页的时候，进度点，要联动进行focus

//  3. 翻到第三页的时候，下一页需要回到 第一页，翻到第一页的时候，同理

//  4. 进度点，在点击的时候，需要切换到对应的页面

//  5. 没有（进度点点击、翻页操作）的时候需要进行自动滚动

//  6. 滚动过程中，屏蔽其他操作（自动滚动、左右翻页、进度点点击）

//    7. 高级-无缝滚动

$.fn.UiSlider = function(){

    var ui = $(this);

    var wrap = $('.ui-slider-wrap');

    var btn_prev = $('.ui-slider-arrow .left',ui);

    var btn_next = $('.ui-slider-arrow .right',ui);

    var items  = $('.ui-slider-wrap .item',ui);

    var tips  =$('.ui-slider-process .item',ui);

    //    预定义

    var current = 0;

    var size = items.size();

    var width = items.eq(0).width();

    var enableAuto = true;

    //    设置自动滚动感应（如果鼠标在 wrap 中，不要自动滚动）

    ui

    .on('mouseover',function(){

        enableAuto = false;

    })

    .on('mouseout',function(){

        enableAuto = true;

    })

    //    具体操作

    wrap

    .on('move_prev',function(){

        if(current<=0){

            current = size;

        }

        current = current - 1 ;

        wrap.triggerHandler('move_to',current);

    })

    .on('move_next',function(){

        if( current >= size-1){

            current = -1;

        }

        current = current + 1 ;

        wrap.triggerHandler('move_to',current);

    })

    .on('move_to',function(evt,index){

        wrap.css('left',index*width*-1);

        tips.removeClass('item_focus').eq(index).addClass('item_focus');

    })

    .on('auto_move',function(){

        setInterval(function(){

            enableAuto && wrap.triggerHandler('move_next');

        },2000);

    })

    .triggerHandler('auto_move');

    //    事件

    btn_prev.on('click',function(){

        wrap.triggerHandler('move_prev');

    });

    btn_next.on('click',function(){

        wrap.triggerHandler('move_next');

    });

    tips.on('click',function(){

        var index = $(this).index();

        current = index;

        wrap.triggerHandler('move_to',index);

    })

}

// ui-cascading

// 二级联动

$.fn.UiCascading = function(){

    var ui = $(this);

    var selects = $('select',ui);

    selects

    .on('change',function(){

        var val = $(this).val();

        var index = selects.index(this);

        //    触发下一个 select 的更新，根据当前的值

        var where = $(this).attr('data-where');

        where = where ? where.split(',') : [];

        where.push( $(this).val() );

        selects.eq(index+1)

            .attr('data-where',where.join(','))

            .triggerHandler('reloadOptions');

        //    触发下一个之后的 select  的初始化（清除不应该的数据项）

        ui.find('select:gt('+ (index+1) +')').each(function(){

            $(this)

            .attr('data-where','')

            .triggerHandler('reloadOptions');

        })

    })

    .on('reloadOptions',function(){

        var method = $(this).attr('data-search');

        var args = $(this).attr('data-where').split(',');

        var data = AjaxRemoteGetData[ method ].apply( this, args );

        var select = $(this);

        select.find('option').remove();

        $.each( data , function(i,item){

            var el = $('<option value="'+item+'">'+item+'</option>');

            select.append(el);

        });

    });

    selects.eq(0).triggerHandler('reloadOptions');

}

// 页面的脚本逻辑

$(function () {

    $('.ui-search').UiSearh();

    $('.content-tab').UiTab('.caption > .item','.block > .item');

    $('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap' , 'block-caption-');

    $('body').UiBackTop();

    $('.ui-slider').UiSlider();

    $('.ui-cascading').UiCascading();

});

data.js

var storage = {};

storage.hospital = [

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

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

    ['朝阳区','三级甲等','卫生部直属医院','中日友好医院','北京市朝阳区樱花东路2号','84205288','img/hospital-2.jpg','8:30'],

    ['西城区','三级甲等','卫生部直属医院','首都医科大学附属北京友谊医院','北京市西城区永安路95号','63016616','img/hospital-3.jpg','9:30'],

    ['朝阳区','三级甲等','卫生部直属医院','首都医科大学附属北京地坛医院B附属','北京市朝阳区樱花东路2号','84205288','img/hospital-4.jpg','8:30'],

    ['朝阳区','三级合格','北京区县属医院','空军总医院','北京市朝阳区樱花东路2号','84205288','img/hospital-5.jpg','8:30'],

    ['海淀区','三级合格','北京区县属医院','航天中心医院(原721医院)','北京市海淀区玉泉路15号','59971160','img/hospital-6.jpg','8:30'],

    ['丰台区','三级甲等','北京区县属医院','北京中医药大学东方医院','北京丰台区方庄芳星园一区6号','67689655','img/hospital-1.jpg','8:30'],

    ['丰台区','三级合格','北京区县属医院','北京电力医院','北京市丰台区太平桥西里甲1号','84205288','img/hospital-2.jpg','8:30'],

    ['顺义区','三级甲等','北京区县属医院','北京中医医院顺义医院','北京市顺义区站前东街5号','84205288','img/hospital-3.jpg','8:30'],

    ['通州区','三级甲等','其他','首都医科大学附属北京潞河医院三级综合医院','北京市通州区新华南路82号','69543901','img/hospital-4.jpg','8:30'],

];

storage.department = [

    ['hospitalName', ['departmentName'] ],

    ['首都儿科研究所附属儿童医院',['儿科a','儿科b','儿科d'] ],

    ['中日友好医院',['科室a','科室b','科室c','科室d'] ],

    ['首都医科大学附属北京友谊医院', ['departmentName-1'] ],

    ['首都医科大学附属北京地坛医院B附属', ['departmentName-2'] ],

    ['空军总医院',['departmentName-3'] ],

    ['航天中心医院(原721医院)', ['departmentName-4'] ],

    ['北京中医药大学东方医院', ['departmentName-5'] ],

    ['北京电力医院', ['departmentName-6'] ],

    ['北京中医医院顺义医院', ['departmentName-7'] ] ,

    ['首都医科大学附属北京潞河医院三级综合医院', ['departmentName-8'] ] 

]

var AjaxRemoteGetData = {};

AjaxRemoteGetData.getDistinctArea = function() {

    console.log('远程数据获取','getDistinctArea');

    var map = {};

    var arr = ['医院地区'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _d = storage.hospital[i][0];

        map[_d] =1;

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getLeveByArea  = function( area ){

    console.log('远程数据获取','getLeveByArea','arguments:',arguments);

    var map = {};

    var arr = ['医院等级'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _area = storage.hospital[i][0];

        var _d = storage.hospital[i][1];

        if(area == _area){

            map[_d] = 1;

        }

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getNameByAreaAndLevel = function( area , level ){

    console.log('远程数据获取','getNameByAreaAndLevel','arguments:',arguments);

    var map = {};

    var arr = ['医院名称'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _area = storage.hospital[i][0];

        var _level= storage.hospital[i][1];

        var _d = storage.hospital[i][3];

        if(level == _level && area == _area ){

            map[_d] = 1;

        }

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getDepartmentArrByHospitalName = function( area,level,hospitalName ){

    console.log('远程数据获取','getDepartmentArrByHospitalName','arguments:',arguments);

    var map = {};

    var arr = ['科室名称'];

    for(i=1,j=storage.department.length; i<j ; i++){

        var _hospitalName = storage.department[i][0];

        var _d = storage.department[i][1];

        if(hospitalName == _hospitalName ){

            map[_d] = 1;

        }

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getDistinctType=function(){

    console.log('远程数据获取','getDistinctType');

    var map = {};

    var arr = ['医院类型'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _d = storage.hospital[i][2];

        map[_d] =1;

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getDistinctLevel=function(){

    console.log('远程数据获取','getDistinctLevel');

    var map = {};

    var arr = ['医院等级'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _d = storage.hospital[i][1];

        map[_d] =1;

    }

    for( k in map){

        arr.push(k);

    }

    console.log('结果',arr);

    return arr;

}

AjaxRemoteGetData.getHospitalArrByFilter=function(type,level,area){

    console.log('远程数据获取','getHospitalArrByFilter','arguments:',arguments);

    var map = {};

    var arr = ['医院列表'];

    for(i=1,j=storage.hospital.length; i<j ; i++){

        var _type= storage.hospital[i][2];

        var _area = storage.hospital[i][0];

        var _level= storage.hospital[i][1];

        var _d = storage.hospital[i][3];

        if(

                (level == _level || level =='全部') &&

                (area == _area || area == '全部' ) &&

                (type == _type || type == '全部')

            ){

            arr.push(storage.hospital[i]);

        }

    }

    console.log('结果',arr);

    return arr;

}

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

Jquery实现挂号平台首页源码2
第二个版本:点击预约挂号可跳转到排班表,获取之后7个星期的排班先放图首先是index.html <!DOCTYPE html> <html lang="en" ...
Bootrap 项目实战（微金所前端首页）第二部分（首页源码）
首页源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
Linux平台下源码安装mysql多实例数据库
Linux平台下源码安装mysql多实例数据库[root@linux-node1 ~]# netstat -tlunp | grep 330tcp6 0 0 :::3306 :::* LISTEN 6 ...
Android8.1 MTK平台 SystemUI源码分析之网络信号栏显示刷新
SystemUI系列文章 Android8.1 MTK平台 SystemUI源码分析之 Notification流程 Android8.1 MTK平台 SystemUI源码分析之电池时钟刷新 And ...
JS魔法堂：jQuery.Deferred(jQuery1.5-2.1)源码剖析
一.前言 jQuery.Deferred作为1.5的新特性出现在jQuery上,而jQuery.ajax函数也做了相应的调整.因此我们能如下的使用xhr请求调用,并实现事件处理函数晚绑定. var p ...
9款精致HTML5/jQuery日历时钟控件源码下载（源码请见百度云）链接：http://pan.baidu.com/s/1geIXe75 密码：7m4a
现在的网页应用越来越丰富,我们在网页中填写日期和时间已经再也不用手动输入了,而是使用各种各样的日期时间选择控件,大部分样式华丽的日期选择和日历控件都是基于jQuery和HTML5的,比如今天要分享的这 ...
JQuery实现分页程序代码，源码下载
Web开发,分页在所难免的,微软GridView.AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用 JQuery模板显示 ...
7款经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
九款酷炫基于jquery实现的应用及源码
1.HTML5 Loading动画加载五彩的圆环Loading 今天我们要分享一款基于HTML5的Loading加载动画特效,这款HTML5加载动画是一个五彩的圆环,圆环不停地转动从而体现加载正在进 ...

随机推荐

codeforces 922 B. Magic Forest（枚举、位运算（异或））
题目链接:点击打开链接 Imp is in a magic forest, where xorangles grow (wut?) A xorangle of order n is such a no ...
java架构之路-（微服务专题）初步认识微服务与nacos初步搭建
历史演变: 以前我们都是一个war包,包含了很多很多的代码,反正我开始工作的时候做的就是这样的项目,一个金融系统,代码具体多少行记不清楚了,内部功能超多,但是实际能用到的不多,代码冗余超大,每次部署大 ...
kali重置root密码
像这样,kali系统的root密码忘记了,只需一分钟时间,快速重置root密码第一步: 电脑开机后kali系统会进入引导界面,这是我们只需 “e” 进入启动前编辑命令(若系统没有出现这个页面,大家在 ...
《Head first设计模式》之模版方法模式
模板方法模式在一个方法中定义了一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 有些人没有咖啡就活不下去:有些人则离不开茶.两者共同的 ...
管理使用 FastDFS
启动管理tracker: 1. 启动文件+配置文件+命令 /usr/bin/fdfs_trackerd <config_file> [start | stop | restart] 举例: ...
解决mysql登录报错ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)问题
问题描述: 在ubuntu14.04上安装完MYSQL后,MYSQL默认给分配了一个默认密码,但当自己在终端上使用默认密码登录的时候,总会提示一个授权失败的错误. 报错信息:Access denied ...
kali帮助
kali help Attention 这是我N久前学习kali时自己打的东西,不保证没有纰漏啊…… 网址 kali:https://www.herojd.com/forum.php?mod=view ...
PVE裸机虚拟化环境安装之后的一些部署记录
pve镜像使用的是proxmox-ve_6.1-1 安装之后root登录 apt update 更新源的时候会出现一些问题,是因为其中有一个企业源报错的原因安装sudo和vim,否则不好管理非roo ...
JSP其余内置对象及四大范围对象的使用
一.application String getContextPath():获取虚拟路径String getRealPath():获取虚拟路径对应的绝对路径实例 application.jsp &l ...
使用JDK工具进行Java服务器应用程序故障排除
Java性能调优指南–有关提高Java代码性能的各种技巧. 最近又学到了很多新知识,感谢优锐课老师细致地讲解,这篇博客记录下自己所学所想. 1. 介绍在Java世界中,我们大多数人习惯于在Java应 ...

Jquery实现挂号平台首页源码

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

随机推荐

热门专题