前端系列之实战(城市医院预约挂号平台3.UI组件)

大将生来胆气豪，腰横秋水雁翎刀，风吹橐鼓山河动，电闪旌旗日月高，
天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。

书接上文: 前端系列之实战(城市医院预约挂号平台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: #a5a2a2;
}.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">欢迎来到城市医院预约挂号统一平台&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"></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"><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&nbsp;&copy;&nbsp;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">&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>

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

前端系列之实战(城市医院预约挂号平台3.UI组件)相关推荐

前端系列之实战(城市医院预约挂号平台2.基本样式编写)
伤情最是晚凉天,憔悴厮人不堪言,吆酒催肠三杯醉,寻香惊梦五更寒, 钗头凤斜倾有泪,徒迷花寥我无缘,小楼寂寞心与月,也难如钩也难圆! 书接上文:前端系列之实战(城市医院预约挂号平台1.框架搭建) 基本样 ...
基于JAVA+SpringBoot+MYSQL的医院预约挂号平台
后台管理端:基本资料>医院基本信息>医院医生基本信息预约管理>用户预约信息评论管理>评论列表前台用户端:医院搜索,医院列表,找医生,找科室,登录注册,提交预约信息等
2023最新SSM计算机毕业设计选题大全（附源码+LW）之java阳光学院校医院预约挂号平台32np3
对于即将毕业或者即将做课设的同学而言,由于经验的欠缺,面临的第一个难题就是选题,确定好题目之后便是开题报告,如果选题首先看自己学习那些技术,不同技术适合做不同的产品,比如自己会些简单的Java语言,会 ...
java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw
java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构开 ...
基于SSM+Layui实现医院预约挂号系统
项目编号:BS-YL-010 基于SSM的医院在线预约挂号平台.前端使用layui框架.分为管理员.医生.患者三个角色,功能完善.适合练习java web开发,也可以用作课程设计和毕业设计. 运行环境 ...
JAVA医院预约挂号系统毕业设计开题报告
本文给出的java毕业设计开题报告,仅供参考!(具体模板和要求按照自己学校给的要求修改) 选题目的和意义目的:本课题主要目标是设计并能够实现一个基于web网页的医院预约挂号系统,整个网站项目使用了B ...
Java+SSM+JSP实现医院预约挂号系统
文末获取源码开发语言:Java 框架:ssm 技术:JSP JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclip ...
医院挂号小程序,预约挂号小程序,微信小程序医院预约挂号系统毕业设计作品
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序医院预约挂号系统,前台用户使用小程序,后台管理使用基Java+MySql技术:通过后台设置医院信息.录入医院科室信息.录入医生信息 ...
基于SSM实现医院预约挂号系统
项目编号:BS-YL-003 数据库:mysql 开发工具: IDEA/ECLIPSE 语言:JAVA 框架:后台SSM,前端BootStrap 本系统使用SSM框架技术,实现病人在系统中进行医院的预 ...

前端系列之实战(城市医院预约挂号平台3.UI组件)

jQuery插件模块开发UI组件

首页.UI组件-UiSearch

开发：选项卡组件

首页.UI组件-UiBackTop

首页.UI组件-UiSilder

前端系列之实战(城市医院预约挂号平台3.UI组件)相关推荐

最新文章

热门文章