Jquery实现挂号平台首页源码2

发布时间:2020-11-16 发布网站:脚本之家
前端之家收集整理的这篇文章主要介绍了Jquery实现挂号平台首页源码2前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

第二个版本:点击预约挂号可跳转到排班表,获取之后7个星期的排班

先放图

Jquery实现挂号平台首页源码2

Jquery实现挂号平台首页源码2

首先是index.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>index</<!-- 框架 -->
    link rel="stylesheet" href="css/layout.css" 基本样式 ="css/base.css"="css/ui.css"body 顶部 div 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"="#"="logo"><img src="./img/logo.png" alt="search ui-search">
                ="ui-search-selected">医院="ui-search-select-list">
                    ="#1">科室>疾病input type="text" name="search-content"="ui-search-input" placeholder="请输入搜索内容"="ui-search-submit"&nbsp; 导航 ="nav"="nav"=""='link'>首页>按医院挂号>按科室挂号>按疾病挂号>最新公告='link right'>社会知名医院 简介 ="about"="about"="a-title"="a-title-left"span>北京协和医院span ="yellow">关注医院="a-title-right">等级:>三级甲等>区域:>东城区>分类:>中国医科院所属医院="a-content"="a-content-left"="img/hospital-1.jpg"="a-content-center"="text"="t-span">医院(Hospital)一词是来自于拉丁文原意为“客人”。>医院(Hospital)一词>医院(Hospital)一词是来自于拉丁文>医院(Hospital)一词是来自于拉丁文原意为“客人”,因为一开始设立时,是供人避难,还备有休息间,使来者舒适,有招待意图。后来,才逐渐成为满足人类医疗需求,提供医疗服务的专业机构,收容和治疗病人的服务场所。后来,才逐渐成为满足人类医疗需求,提供医疗服务的专业机构,收容和治疗病人的服务场所。="a-content-right"="img/map-1.png" tab框 ="content"="content"="wrap clearfix"="content-tab" tab导航 -->
                ="caption"="#8"="item item_focus">预约挂号="#7"="item">医院介绍="#6">预约须知="#5">停诊信息="#4">查询取消 tab内容 ="block" 预约挂号 -->
                    >
                        table ='table1' cellpadding='0' cellspacingrules="rows">
                            tr ="bg1">
                                td colspan="2">开放预约科室tdtr="bg2">2301>
                                    ="detail.html">特殊门诊科>专科>麻醉科>内科table 预约规则 -->
                        ="content-news"="caption2"> 预约规则 ="more">(更新时间,每日8:30更新)="list"="table3">
                                        ="left">预约周期:>7天>房号时间:>8:30>(更新时间,每日8:30更新)(更新时间,每日8:30更新)>特殊规则:>北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部),是其临床医学院,同时也是中国医学科学院的临床医学研究所,中华人民共和国卫生部指定的诊治疑难重症的技术指导中心之一。br 医院介绍 ="item" style="display: none"="t-about">北京协和医院在中国乃至世界享有盛名。医院成立于1921年。现任院长赵玉沛。北京协和医院是中国最早承担外宾医疗任务的单位,医院专门设立外宾和高干门诊部,开设专门的高干、外宾、特需病区。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。2006年7月28日被中国奥委会定为“国家队运动员医疗服务指定医院”。>2017年11月11日下午,复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》,北京协和医院名列榜首 [1]  。2017年11月11日下午,复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》,北京协和医院名列榜首 [1]  。2017年11月11日下午,复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》,北京协和医院名列榜首 [1]  。>2018年12月4日消息,被国家卫健委公布为首批肿瘤多学科诊疗试点医院。 [2] 2019年11月10日,复旦版《2018年度中国医院排行榜》发布,北京协和居首。 预约须知 ="p-title">北京协和医院预约挂号须知>
                        
                        ="p-about">电话预约挂号:010(24小时)>网络预约挂号:010(24小时)>北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部),是其临床医学院。>一、预约时间范围:010(24小时)>1、北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。>2、北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。>3、北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。>二、预约实名制:>北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。它隶属于中国协和医科大学(2006年改为北京协和医学院/清华大学医学部)。>三、预约挂号:>1、北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。北京协和医院是一所位于北京市东城区,集医疗、科研、教学为一体的大型综合医院。>四、医生停诊>2017年11月11日下午,复旦大学医院管理研究所正式发布了《2016年度中国医院排行榜》和《2016年度中国医院专科声誉排行榜》。>五、医生停诊>六、爽约处理:>七、其他注意事项:>

                        ="p-footer" 停诊信息 ='table1 table2' cellpadding='all'>日期>星期>时段>特长>职称>挂号费>可挂号数>剩余号数>替换方式>2019-11-14>1>上午>呼吸内科门诊>主治医师>5.00>0>不可替换 查询取消 ='inner'="i-wrap"label for>预约识别码:label="button" value="查询订单">            
         底部 ="footer"="footer">
        Copyright &copy; 2019 xxx版权所有
    script ="js/jquery-1.7.1.js"script="js/ui.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;
}
.content{10px 0 38px 0;
    margin-top: 42px;
}
.content-tab{
    float:left;#eee;
}
.content-news{right;285px;
    border:1px solid #ccc;
}
.footer{132px;25px 0;#eceef2;
}

base.css

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

/*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;inline-block;
}
.header .logo img{100%;100%;
}
.header .search{326px;38px; absolute;
    right:
    top:29px;
    background-color:orange;*/
}

nav模块样式
.nav .link{ inline-block; left;#fff;16px;
    min-width:80px;
    text-align: center;
}
.nav .link_focus{ #fff; #1fa4f0; 0 20px;
}
.nav a:hover{#d7f3ff;
}
.nav .menu{130px;
    padding-right:#1fa4f0;
.nav .menu .menu-list{423px;
    left:36px;
}

简介模块样式
.about{250px; 30px;
}
.about .wrap{#f5f5f5;960px;230px; 20px;
}
.a-title{1000;50px;
    border-bottom:1px solid #ddd;
}
.a-title-left{left;
}
.a-title-right{right;
}
.a-title-right span{ 13px;
    margin-right:5px;
}
.a-title-right span a{blue;
}
.yellow{ #fec009;
    margin-left: 5px;
}
.a-content{150px;
}
.a-content-left{200px;
    padding-top: 10px;
}
.a-content-center{450px; 23px;
}
.a-content-center .text{ relative; 24px; 12px;
    text-indent: 28px;
.a-content-center .text:nth-child(2) .t-span:before {
    background-position-y: -18px;
}
.a-content-center .text:nth-child(3) .t-span:before { -36px;
}
.a-content-center .text:nth-child(4) .t-span:before { -54px;
}
.t-span:before{ ''; 22px; 18px; 0; 1px; url(../img/icon-tel.png) 0 0 no-repeat;
}
.a-content-right{ right; 250px;
.a-content-right img{ 249px; 172px;
}
content模块样式*/
预约挂号
.table1{1px solid #f5f5f5; 70%; left;
}
.bg1{ #f5f5f5; 30px;
.bg2 { 20%; rgb(242,252,254); center;
    vertical-align: top;#868686;15px;
}
.table1 td{10px;
}
.bg1 td{ 25px;
}
.table1 td a{ #000; 123px; 15px; 25px;
}
医院介绍
.t-about { 2em; 25px;
    margin-bottom: 10px;
}
预约须知
.p-title{
    font-weight:bold;18px;center; 15px;
}
.p-about{14px;
.p-about span{bold;
}
.p-footer{ 35px;bold;
}
停诊信息
.table2{
.table2 td { 10px; center;
}
查询取消
.inner{ 0 auto;
    border-top: 1px solid #eee; 50px;
}
.i-wrap{ 400px; 90px;
}
.i-wrap input{1px solid #ddd;
.i-wrap input[type="button"]{ 101px; #60bff2; 27px;none;
}
预约规则1px solid #f4f6fa;
}
.content-news .caption2{48px;#f4f6f6;
.content-news .more{12px;#00b3ea;
}
.content-news .list{ 5px;
    overflow-y: scroll;300px;
}
.content-news .list .link{#969696;
}
.table3 td{ 21px;
.table3 td.left{ 26%;top;#444;
}
.content-tab .caption{34px;1px solid #00b3ea;
}
.content-tab .caption .item{112px;#00b3ea;
.content-tab .caption .item_focus{#60bff2;#fff;
}
.content-tab .block{1000px;
}

底部 70px; #666;
}

ui.css

搜索
.ui-search{url(../img/ui-search.jpg) center no-repeat;
.ui-search-selected{70px;14px;
}
.ui-search-select-list{ none;67px;24px;
    box-shadow:3px 3px 5px rgba(0,.2);2px;
    z-index:2;
}
.ui-search-select-list a{#a5a2a2;center;
}
.ui-search-select-list a:hover{#ebeef5;
}
.ui-search-input{208px;26px;5px;71px;#a5a2a2;
}
.ui-search-submit{1px;40px;ui-menu分类菜单
.ui-menu{}
.ui-menu-item{22px;8px 5px 9px 6px;2px;
}
.ui-menu-item:hover{
.ui-menu-item-department{13px;
}
.ui-menu-item-department:before{21px;url(../img/icon-menu.jpg) -22px 0 no-repeat;
}
.ui-menu-item:nth-child(2) .ui-menu-item-department:before{-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:
.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); 99;
}

.ui-menu-item-detail-group{
    padding-bottom:
.ui-menu-item-detail-group-caption{#666;
.ui-menu-item-detail-group-list{23px;
}
.ui-menu-item-detail-group-list a{
.ui-menu-item-detail-group-list a:after{'|';#ddd;12px;
}

回到顶部
.ui-backTop{ fixed; 2px;
    bottom:9;rgba(102,102,.9) url(../img/icon-go-up.png) center no-repeat;
}
.ui-backTop:hover{
.ui-backTop:hover:after{'回到顶部';center;
}

ui-slider幻灯片组件
.ui-slider{544px;414px;
    overflow:hidden;
}
.ui-slider-wrap{99999px;
    transition:all .5s;
}
.ui-slider-wrap .item{414px;
}
.ui-slider-arrow{-20px;50%;
}
.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.UISearch=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
/**
 * [UiTab description]
 * @param {[type]} header  [tab选项卡切换部分classname]
 * @param {[type]} content [tab选项卡内容区域部分classname]
 * @param {[type]} focus_prefix [tab选项卡高亮样式前缀,可选]
 */
$.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 = $("body").scrollTop() || $(document).scrollTop();
        if(top>windowHeight){
            el.show();
        }else{
            el.hide();
        }
    });
    el.on('click',1)">(){
        $(window).scrollTop(0);
    });
}

ui-排班表
$.fn.UiDate= 循环计算日期
    var table=$('.d-date-table'for(var i=0;i<49;i++){
        生成单日元素
        var column=$("<div class='d-date-table-column'></div>");
        table.append(column);
        插入星期日期
        var div1=$("<div class='d-date-table-title'></div>");
        column.append(div1);
        var span1=$("<span class='dayText'></span>");
        var br=$("<br>"var span2=$("<span class='dateText'></span>");
        div1.append(span1);
        div1.append(br);
        div1.append(span2);
        插入其他元素
        var div2=$("<div class='d-date-table-item'></div>"var div3=$("<div class='d-date-table-item spe'>约满</div>"var div4=$("<div class='d-date-table-item'></div>");
        column.append(div2);
        column.append(div3);
        column.append(div4);

        var dayText=$('.dayText').eq(i);
        var dateText=$('.dateText'计算明天日期
        var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var data = new Date();
        data.setTime(data.getTime()+24*60*60*1000*i);
        var year = data.getFullYear();
        var month= data.getMonth()+1;
        var date = data.getDate();
        var day= week[data.getDay()];星期
        显示星期和日期
        dayText.html(day);
        dateText.html(year+'-'+month+'-'+date);
    }

    获取元素
    var leftBtn=$('#leftBtn'var rightBtn=$('#rightBtn'预定义
    var current=0;
    var width=$('.d-date').width();
    点击事件
    leftBtn.on('click',1)">(){
        current--;
        if(current<=0){
            current=0;
        }
        table.css('left',current*width*-1);
    });
    
    rightBtn.on('click',1)">(){
        current++if(current>=6){
            current=6);
    });
    
    console.log(current);
}



页面的脚本逻辑
$((){
    $('.ui-search').UISearch();
    $('.content-tab').UiTab('.caption>.item','.block>.item');
    $('body').UiBackTop();
    $('body').UiDate();
})

然后是detail.html

>detail 科室排班表样式 ="css/detail.css" 科室排班表 >    
            ="d-title"="span1"
                    科室排班表
                    ="index.html">返回科室列表="d-container"="d-left"="leftBtn"="img/icon-scheduling-left.jpg"='d-left-item'>下午>晚上="d-date"="d-date-table" 单天排班信息 ="d-date-table-column"="d-date-table-title"="dayText">星期二="dateText">2019-11-20="d-date-table-item"="d-date-table-item spe">约满="d-right"="rightBtn"="img/icon-scheduling-right.jpg"='d-right-item'="d-rule"="d-rule-title">预约规则>

                    ="d-rule-subtitle">退号时间:>这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。这是预约挂号的特殊规则。="d-footer"
                    !您还没有选择就诊日期
                >        
         2019 XXX版权所有
    >

 

detail.css

 

.content{30px;
}
.d-title{
.span1 a{5px;
}
内容区域
.d-container{ 1000px; 320px; 1px solid #f5f5f5;
}
左箭头列
.d-left{33px; 1px solid #f5f5f5;
    cursor:pointer;10;
}
.d-left-item{ 90px;rgb(241,248,255);14px;
}
排班表格
.d-date{650px; hidden; relative;
}
排班表实际容器
.d-date-table{4550px;all 1s;0;
}
单列排班
.d-date-table-column{92px;
    border-left:
.d-date-table-column:nth-child(7n){
    border-right:
.d-date-table-title{ 44px;
.d-date-table-title span{
.d-date-table-item{
.d-date-table-item.spe{rgb(225,238,1)">
.d-date-table-item:last-child{右箭头列
.d-right{
.d-right-item{ 270px;
}

.d-rule{ 243px; 286px; 17px; scroll;
}
.d-rule span{25px;
}
.d-rule .d-rule-title{#000;
.d-rule .d-rule-subtitle{#000;
}
.d-footer{both;
}

总结


以上是前端之家为你收集整理的Jquery实现挂号平台首页源码2全部内容,希望文章能够帮你解决Jquery实现挂号平台首页源码2所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。