前端系列之实战(城市医院预约挂号平台3.UI组件)
2018-02-05 09:36
393 查看
大将生来胆气豪，腰横秋水雁翎刀，风吹橐鼓山河动，电闪旌旗日月高，
天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。
书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写)
index.html
ui.css
ui.js
index.html
ui.js
ui.js
ui.css
index.html
ui.css
ui.js
源码参考
链接: https://pan.baidu.com/s/1ht60dl6 密码: twmx
天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。
书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写)
jQuery插件模块开发UI组件
首页.UI组件-UiSearch
index.html
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: #FFFFFF;
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: #a5a2a
4000
2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}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();
})
}
//页面的脚本逻辑
$(function(){
$('.ui-search').UiSearh();
})开发：选项卡组件
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">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a> <a href="#">注册</a> <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"> </a> </div> </div> </div> <div id="nav" class="nav"> <div class="wrap"> <div class="link menu">全部科室 <div class="menu-list"> </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"></div> <div class="banner-search"> <div class="caption"><span class="text">快速预约</span></div> <div class="form"> <div class="line"> <select name="area"> <option>医院地区</option> </select> </div> <div class="line"> <select name="level"> 19ae9 <option>医院等级</option> </select> </div> <div class="line"> <select name="name"> <option>医院名称</option> </select> </div> <div class="line"> <select name="department"> <option>医院科室</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"> <div class="content-tab"> <div class="caption"> <a href="#8" class="item item_focus">医院</a> <a href="#8" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="#banner" class="block-caption-item block-caption-item_focus">全部</a> <a href="#banner" class="block-caption-item">东城区</a> <a href="#banner" class="block-caption-item">西城区</a> <a href="#banner" class="block-caption-item">朝阳区</a> <a href="#banner" class="block-caption-item">丰台区</a> <a href="#banner" class="block-caption-item">石景山区</a> <a href="#banner" class="block-caption-item">海淀区</a> <a href="#banner" class="block-caption-item">门头沟区</a> <a href="#banner" class="block-caption-item">房山区</a> <a href="#banner" class="block-caption-item">其他</a> </div> <div class="block-content"> <div class="block-wrap"> <div class="block-list"> <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 © 2017慕课网版权所有 </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
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;
})
}
//页面的脚本逻辑
$(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-');
});首页.UI组件-UiBackTop
ui.js
//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 = $('body').scrollTop();
console.log(top);
if(top > windowHeight){
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
})
}
//页面的脚本逻辑
$(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.css
/*回到顶部*/
.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组件-UiSilder
index.html
<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"> </a> <a href="#r" class="item right"> </a> </div> <div class="ui-slider-process"> <a href="#0" class="item item_focus"> </a> <a href="#1" class="item item"> </a> <a href="#2" class="item item"> </a> </div> </div>
ui.css
/*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;
margin-top: -20px;
top: 50%;
}
.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-slider
//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();
wrap.triggerHandler('move_to',index);
})
}
//页面的脚本逻辑
$(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();
});源码参考
链接: https://pan.baidu.com/s/1ht60dl6 密码: twmx
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端系列之实战(城市医院预约挂号平台2.基本样式编写)
- 前端系列之实战(城市医院预约挂号平台1.框架搭建)
- Skype For Business 2015实战系列12：安装前端服务器
- Code First开发系列实战之使用EF搭建小型博客平台
- 【稀饭】react native 实战系列教程之自定义原生UI组件
- 深度学习系列——windows平台下跑微软caffe实战之运行mnist,cifar10
- 一言不合就动手系列篇一-仿电商平台前端搜索插件(filterMore)
- Python程序访问北京预约挂号平台
- 预约挂号对患者医生医院都有利
- 《基于.NET平台的分层架构实战》系列文章索引
- android开发实战系列（02）-- Linux平台JDK安装
- 移动前端重构实战系列
- Python程序访问北京预约挂号平台
- 【云星数据---mesos实战系列003】：marathon实战008--marathon部署一套最简单的前端程序
- 【腾讯TMQ】【UTP自动化测试平台系列之终章】前端探索之路
- 《基于.NET平台的分层架构实战》系列文章索引
- 医院如何玩转微信预约挂号服务
- 【airflow实战系列】 基于 python 的调度和监控工作流的平台
- 前端构建大法 Gulp 系列 (四)：gulp实战
- 克拉玛依中心医院-在线预约挂号平台