大将生来胆气豪，腰横秋水雁翎刀，风吹橐鼓山河动，电闪旌旗日月高，
天上麒麟原有种，穴中蝼蚁岂能逃，太平待到归来日，朕与将军解战袍。
书接上文: 前端系列之实战(城市医院预约挂号平台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">欢迎来到城市医院预约挂号统一平台 请
<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">
<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
扫一扫
1604
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
