带二级导航、轮播海报、二级联动、搜索功能、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">欢迎来到城市医院预约挂号统一平台 请 a href="#">登录a> >注册> >帮助中心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"> <!-- 导航 --> ="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; }
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。