Jquery实现挂号平台首页源码

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

按照国际惯例先放图

index.html

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

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

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

layout.css

body{
    margin: 0;
    padding: 0;
}
.clearfix:after{
    content: ' ';
    display: block;
    height:
    line-height:
    clear: both;
    zoom: 1;
}

.wrap{
    width: 1000px;0 auto;
    position: relative;
}

.top { 30px;
    background-color: #f5f5f5;
}
.header{ 92px;
}
.nav{ 36px; #60bff2;
}
.banner{ 802px; 0 auto; 414px; 9px 0 0 198px;
}
.banner-slider{
    float: left; 544px; #8edff3;
}
.banner-search{ right; 250px; 255px; #eee;
}
.banner-help{ 146px; #ccc;
    margin-top: 12px;
}

.content{ 10px 0 38px 0;
}
.content-tab{ 742px; 490px;

.content-news,.content-close{ 248px; 236px;
    border: 1px solid #ccc;
}
.content-close{ 12px;
    border-color: red;
}

.footer{ 70px; 25px 0; #eceef2;
}

base.css

p{ inline-block;
}
a{
    text-decoration: none;
}
select,input{ none;
    outline: none;
}

/* #top 模块内样式 */
.top {
    font-size: 13px;
    color: #868686;
}

.top .call{
    padding-left: 20px;
    background: url(../img/icon-call.png) no-repeat center left;
}

.top .welcome{ right;
}

.top a{ #2da5e1; 10px;
}

 #header 模块内样式 

.header .logo{ 402px; 74px; 9px 0;
.header .logo img{ 100%; 100%;
}
.header .search { 326px; 38px; absolute;
    right: 0px;
    top: 29px;
    background-color: orange;*/
}



 #nav 模块内样式 
.nav .link{ inline-block; #fff; 16px;
    min-width: 80px;
    text-align: center;
}
.nav .link_focus{ #1fa4f0; 0 20px;
}
.nav a:hover{ #d7f3ff;
}

.nav .menu{ 130px;
    padding-right:

.nav .menu .menu-list{ 423px;
    left: 36px;
}

 #banner 模块内样式  #fafafa;
}


.banner-help .caption,.banner-search .caption{ 22px;15px 0 15px 0;

.banner-help .caption .text,.banner-search .caption .text{ 28px; #fec009; url(../img/icon-help.png) no-repeat  0 0;
}
.banner-search .form{ 150px;
}

.banner-search .form .line{
    padding-bottom: 9px;

.banner-search .form .line select{ 170px;
    z-index:1px solid #dcdddd; 26px; 2px 0 ; #666;
}
.banner-search .submit{ 32px;

.banner-search .submit .button{ 108px; 33px; #fecd09; 14px;
    border-radius: 3px;
}

.banner-help{
.banner-help .caption .text{ #00b3ea;
    background-position: 0 -23px;
}


.banner-help .link{ 86px; center; 0 0 8px 26px;
}

 #content 模块样式 


.content-news{ 1px solid #f4f6fa;
}

.content-close .caption,.content-news .caption{ #f4f6fa;
    text-indent: 15px;
}

.content-close .more,.content-news .more{
.content-close .list,.content-news .list{ 15px 20px 13px 35px; 29px; url(../img/list-yellow.jpg) 17px 20px no-repeat;
}
.content-close .list .link,.content-news .list .link{ #969696;
}

.content-close{

.content-close .caption{ #4ab4ed;
}


.content-close .list{
    background-image: url(../img/list-blue.jpg);
}

.content-tab{
.content-tab .caption{ 34px; #f5f6fa;
}
.content-tab .caption .item{ 112px; #00b3ea;
}
.content-tab .caption .item_focus{ #60bff2; #fff;
}

.content-tab .block{ 1px solid #f4f6fa; 452px;
}

.content-tab .block-caption{ 8px;
    border-bottom:  1px solid #f4f6fa;
}

.content-tab .block-caption-item{ 0 10px 0 10px; #4c4948; left;
}
.content-tab .block-caption-item_focus {

.content-tab .block-content{ 16px 12px;
}
.content-tab .block-content .block-more{ 55px; #5084c4; 14px;
}
医院列表 - 容器
.content-tab .block-content .block-list{}

.content-tab .block-content .block-list .item{ 216px; 102px; 0 20px 10px 120px; relative;

.content-tab .block-content .block-list .item img{ 110px; 98px;0;
}

.content-tab .block-content .block-list .item-name{ #036eb7; 21px;
    padding-top: 13px;
}
.content-tab .block-content .block-list .item-level{ #979797;
}
.content-tab .block-content .block-list .item-phone,.content-tab .block-content .block-list .item-address{ 18px; 4px; #666;
}


医院文案列表 - 容器
.content-tab .block-content .block-text-list{}

.content-tab .block-content .block-text-list .item{ 351px; 27px; #666; 1px dashed #dcdddd;
}
.content-tab .block-content .block-text-list .item:nth-child(2n){
    margin-left: #666;
}
 其他 
.go-top{
  display:
  position: fixed;
  right: 2px;
  bottom:
  z-index: 9;
  width: 40px;
  height:
  color:
  background: rgb(102,102,102) url(../img/icon-go-up.png) center no-repeat;
}
.go-top:hover{
.go-top:hover:after{
  content: '回到顶部';
  line-height:
  text-align: center;
}

ui.css

 搜索 
.ui-search{ url(../img/ui-search.jpg) center no-repeat;
.ui-search-selected{ 14px;
}
.ui-search-select-list{ 67px; 24px;
    box-shadow: 3px 3px 5px rgba(0,.2); 2;
}
.ui-search-select-list a{ #A5a2a2;
.ui-search-select-list a:hover{ #ebeef5;
}
.ui-search-input{ 208px; 5px; 73px; #A5A2A2;

}
.ui-search-submit{ 1px; ui-menu 分类菜单 
.ui-menu{}

.ui-menu-item{ 8px 5px 9px 6px; 2px;
}
.ui-menu-item:hover{
.ui-menu-item-department{
.ui-menu-item-department:before{ 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{ -66px;
}

.ui-menu-item-disease{
.ui-menu-item:hover .ui-menu-item-department:before{
    background-position-x:  0;
}
.ui-menu-item:hover .ui-menu-item-department{ #333;
}
.ui-menu-item:hover .ui-menu-item-disease{
.ui-menu-item:hover  .ui-menu-item-detail{ block;
}
.ui-menu-item-detail{ 500px; 393px; 20px 10px 10px 29px; #fff url(../img/bg-menu.jpg) center no-repeat; 190px; 5px 5px 2px rgba(0,.1); 9;
}
.ui-menu-item-detail-group{
.ui-menu-item-detail-group-caption{
    font-weight: bold;
}
.ui-menu-item-detail-group-list{ 23px;
}
.ui-menu-item-detail-group-list a{ #868686;
    margin-right:5px;
}

.ui-menu-item-detail-group-list a:after{ '|'; #eee; 8px;
}
 回到顶部 
.ui-backTop{
    bottom: rgba(102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
.ui-backTop:hover:after{ center;
}

ui-slider 幻灯片组件
.ui-slider{
    overflow: hidden;
}
.ui-slider-wrap{ 99999px;
    transition: all .5s;
}
.ui-slider-wrap .item{

    width: 414px;
}

.ui-slider-arrow{ 50%; -20px;
}
.ui-slider-arrow .item{ url(../img/ui-slider-arrow.png) no-repeat;
}
.ui-slider-arrow .left{
.ui-slider-arrow .right{ -40px 0;
}
.ui-slider-process{ 20px;
}
.ui-slider-process .item{ url(../img/ui-slider-process.png) no-repeat;
}
.ui-slider-process .item_focus,.ui-slider-process .item:hover{ -23px 0;
}

ui.js

// ui-search 定义
// 搜索框
$.fn.UiSearh = function(){
    var ui = $(this);

    $('.ui-search-selected',ui).on('click',(){
        $('.ui-search-select-list').show();
        return false;
    });

    $('.ui-search-select-list a',1)">(){

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

        ;
    });

    $('body').on('click',1)">).hide();
    })
}
 ui-tab 定规

*
 * @param {string} header  TAB组件,的所有选项卡 item
 * @param {string} content TAB组件,内容区域,所有 item
 * @param {string} focus_prefix  选项卡高亮样式前缀,可选
 */

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

    );
    var tabs = $(header,ui);
    var cons = $(content,1)">var focus_prefix = focus_prefix || '';

    tabs.on('click',1)">(){
        var index = $().index();

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

        ;
    })
}

 ui-backTop 回到顶部
$.fn.UiBackTop = var el = $('<a class="ui-backTop" href="#0"></a>');
    ui.append( el );

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

    $(window).on('scroll',1)">var top = $('html,body').scrollTop();
        if(top > windowHeight){
            el.show();
        }else{
            el.hide();
        }
    });
    el.on('click',1)">(){
        $(window).scrollTop(0);
    });
}


 ui-slidder

    1. 左右箭头需要能控制翻页    2. 翻页的时候,进度点,要联动进行focus  3. 翻到第三页的时候,下一页需要回到 第一页,翻到第一页的时候,同理

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

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

  6. 滚动过程中,屏蔽其他操作(自动滚动、左右翻页、进度点点击)

    7. 高级-无缝滚动

$.fn.UiSlider = (){

    );

    var wrap = $('.ui-slider-wrap'var btn_prev = $('.ui-slider-arrow .left',1)">var btn_next = $('.ui-slider-arrow .right'var items  = $('.ui-slider-wrap .item'var tips  =$('.ui-slider-process .item'    预定义

    var current = 0;
    var size = items.size();
    var width = items.eq(0).width();
    var enableAuto = true;

        设置自动滚动感应(如果鼠标在 wrap 中,不要自动滚动)
    ui
    .on('mouseover',1)">(){
        enableAuto = ;
    })
    .on('mouseout',1)">;
    })


        具体操作
    wrap
    .on('move_prev',1)">if(current<=0){
            current = size;
        }
        current = current - 1 ;
        wrap.triggerHandler('move_to'if( current >= size-1){
            current = -1;
        }
        current = current + 1(evt,index){
        wrap.css('left',index*width*-1);
        tips.removeClass('item_focus').eq(index).addClass('item_focus');
    })
    .on('auto_move',1)">(){

        setInterval((){
            enableAuto && wrap.triggerHandler('move_next');
        },2000);

    })
    .triggerHandler('auto_move'    事件
    btn_prev.on('click',1)">(){
        wrap.triggerHandler('move_prev');
    });
    btn_next.on('click',1)">(){
        wrap.triggerHandler('move_next');
    });
    tips.on('click',1)">).index();
        current = index;
        wrap.triggerHandler('move_to' ui-cascading 二级联动
$.fn.UiCascading = var selects = $('select'var val = $().val();
        var index = selects.index();

            触发下一个 select 的更新,根据当前的值
        var where = $(this).attr('data-where');
        where = where ? where.split(',') : [];
        where.push( $().val() );

        selects.eq(index+1)
            .attr('data-where',where.join(',1)">))
            .triggerHandler('reloadOptions');
            触发下一个之后的 select  的初始化(清除不应该的数据项)
        ui.find('select:gt('+ (index+1) +')').each((){
            $()
            .triggerHandler('reloadOptions');
        })


    })
    .on('reloadOptions',1)">var method = $(this).attr('data-search'var args = $(this).attr('data-where').split(',1)">var data = AjaxRemoteGetData[ method ].apply( var select = $();
        select.find('option').remove();
        $.each( data,(i,item){
            var el = $('<option value="'+item+'">'+item+'</option>');
            select.append(el);
        });
    });

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

 页面的脚本逻辑
$( () {

    $('.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''西城区','首都医科大学附属北京友谊医院','北京市西城区永安路95号','63016616','img/hospital-3.jpg','9:30' [
    ['hospitalName',['departmentName'] ],['首都儿科研究所附属儿童医院',['儿科a','儿科b','儿科d''首都医科大学附属北京友谊医院',['departmentName-1''空军总医院',['departmentName-3''北京中医药大学东方医院',['departmentName-5''北京中医医院顺义医院',['departmentName-7'] ] 

]

var AjaxRemoteGetData = {};

AjaxRemoteGetData.getDistinctArea = () {
    
    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('结果'return arr;
}
AjaxRemoteGetData.getLeveByArea  = ( area ){
    console.log('远程数据获取','getLeveByArea','arguments:'var arr = ['医院等级'){

        var _area = storage.hospital[i][0];
        var _d = storage.hospital[i][1if(area == _area){
            map[_d] = 1;
        }
    }
     arr;
}
AjaxRemoteGetData.getNameByAreaAndLevel = ( area,level ){
    console.log('远程数据获取','getNameByAreaAndLevel',arguments);
    var arr = ['医院名称'var _level= storage.hospital[i][1var _d = storage.hospital[i][3if(level == _level && area == _area ){
            map[_d] = 1 arr;
}
AjaxRemoteGetData.getDepartmentArrByHospitalName = var arr = ['科室名称'var _hospitalName = storage.department[i][0var _d = storage.department[i][1if(hospitalName == _hospitalName ){
            map[_d] = 1 arr;
}

AjaxRemoteGetData.getDistinctType=(){
    console.log('远程数据获取','getDistinctType'var arr = ['医院类型'var _d = storage.hospital[i][2 arr;
}
AjaxRemoteGetData.getDistinctLevel= arr;
}
AjaxRemoteGetData.getHospitalArrByFilter=(type,area){
    console.log('远程数据获取','getHospitalArrByFilter',1)">var arr = ['医院列表'var _type= storage.hospital[i][2];

        if( 
                (level == _level || level =='全部') && 
                (area == _area || area == '全部' ) && 
                (type == _type || type == '全部')
            ){
            arr.push(storage.hospital[i]);
        }
    }
    console.log('结果' arr;
}

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...