当前位置： 移动技术网 > IT编程>开发语言>Jquery > Jquery实现挂号平台首页源码

Jquery实现挂号平台首页源码

2020年01月06日  | 移动技术网IT编程  | 我要评论

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

按照国际惯例先放图

<!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=""><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;
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网