实战项目：医院挂号网
本文所用的css名为ui.css,js名为ui.js
首页的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">
</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">
<div class="logo">
<a href="#" ><img src="./img/logo.png"></a>
</div>
<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 href="#6" class="link menu">全部科室
<div class="menu-list ui-menu">
<div class="ui-menu-item">
<a href="#1" class="ui-menu-item-department">内科</a>
<a href="#2" class="ui-menu-item-disease">冠心病</a>
<a href="#3" class="ui-menu-item-disease">高血压</a>
<div class="ui-menu-item-detail">
<div class="ui-menu-item-detail-group">
<div class="ui-menu-item-detail-group-caption">内科</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
</div>
<div class="ui-menu-item-detail-group-caption">内科常见疾病</div>
<div class="ui-menu-item-detail-group-list">
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
<a href="#1">心脑血管疾病</a>
</div>
</div>
</div>
</div>
</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 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-2"></a>
<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-3"></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"> </a>
<a href="#2" class="item"> </a>
</div>
</div>
<div class="banner-search">
<div class="caption">
<span class="text">
快速预约
</span>
</div>
<div class="form ui-cascading">
<div class="line">
<select name="area" data-search="getDistinctArea" data-where=""><option>医院地区</option></select>
</div>
<div class="line">
<select name="level" data-search="getLevelByArea" data-where=""><option>医院等级1</option></select>
</div>
<div class="line">
<select name="name" data-search="getNameByAreaAndLevel" data-where=""><option>医院名称2</option></select>
</div>
<div class="line">
<select name="department" data-search="getDepartmentArrByHosptialName" data-where=""><option>医院科室3</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 clearfix">
<a href="#7" class="item item_focus">医院</a>
<a href="#8" class="item">科室</a>
</div>
<div class="block">
<div class="item">
<div class="block-caption">
<a href="#1" class="block-caption-item block-caption-item_foucs">全部</a>
<a href="#1" class="block-caption-item">东城区</a>
<a href="#1" class="block-caption-item">西城区</a>
<a href="#1" class="block-caption-item">朝阳区</a>
<a href="#1" class="block-caption-item">丰台区</a>
<a href="#1" class="block-caption-item">石景山区</a>
<a href="#1" class="block-caption-item">海淀区</a>
<a href="#1" class="block-caption-item">门头沟区</a>
<a href="#1" class="block-caption-item">房山区</a>
<a href="#1" class="block-caption-item">其他</a>
</div>
<div class="block-content">
<div class="block-wrap">
<div class="block-list clearfix">
<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 href="#" 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 © 2019林不羁版权所有
</div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/ui.js"></script>
<script src="js/data.js"></script>
</html>
1 首页.UI组件-UiSearch
引用js，css
1.1 代码
/* 搜索 */
.ui-search{
background:url(../img/ui-search.jpg);
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{
position: absolute;
width:67px;
line-height: 24px;
background-color:#fff;
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:3px;
left:71px;
line-height: 26px;
font-size:13px;
color:#a5a2a2;
}
.ui-search-submit{
display: block;
width:40px;
height: 36px;
right: 0;
top:1px;
}
//函数的定义
$.fn.UiSearch=function(){
var ui=$(this);
$(".ui-search-selected",ui).on("click",function(){//在ui中查找.ui-search-selected
$(".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").UiSearch();
});
2.首页.UI组件-UiTab
2.1 代码
/*UiTab*/
.ui-menu-item{
height: 22px;
line-height: 22px;
padding: 8px 5px 9px 6px;
margin-left:2px;
}
.ui-menu-item:hover{
background-color: #fff;
}
.ui-menu-item-department{
float: left;
height: 22px;
line-height: 22px;
position: relative;
padding-left:30px;
font-size: 14px;
color:#eee;
}
.ui-menu-item-department:before{
content: ' ';
display: block;
height: 21px;
width: 22px;
position: absolute;
left:0;
top:1px;
background:url('../img/icon-menu.jpg') no-repeat -22px 0;
}
.ui-menu-item-disease{
font-size:12px;
float: right;
padding-left: 5px;
color:#d7f3ff;
}
.ui-menu-item:hover .ui-menu-item-department:before{
background-position-x: 0;
}
.ui-menu-item:hover .ui-menu-item-department{
color:#333;
}
.ui-menu-item:hover .ui-menu-item-disease{
color: #868686;
}
.ui-menu-item:hover .ui-menu-item-detail{
display: block;
}
.ui-menu-item-detail{
display: none;
position: absolute;
width:500px;
height: 392px;
padding:20px 10px 10px 29px ;
background: #fff url(../img/bg-menu.jpg) center no-repeat;
left:190px;
top:0;
}
.ui-menu-item-detail-group{
padding-bottom: 20px;
text-align: left;
}
.ui-menu-item-detail-group-caption{
display: block;
height: 34px;
line-height: 34px;
font-size: 16px;
color:#666;
width: 100%;
}
.ui-menu-item-detail-group-list{
line-height: 23px;
}
.ui-menu-item-detail-group-list a{
display: inline-block;
font-size: 12px;
color:#868686;
margin-right: 8px;
padding-bottom: 5px;
}
.ui-menu-item-detail-group-list a:hover{
color: #006db3;
}
.ui-menu-item-detail-group a:after{
content: "|";
color:#eee;
padding-left:8px;
}
/*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").UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap')
});
2.2 注意点
1.子孙选择符，子代选择符（父子关系）要加>
2.遇到的问题，tab切换时item-focus中的背景色不起作用
解决:class名item_focus写成了item-focus
3.知识点：
eq() 方法返回带有被选元素的指定索引号的元素。
索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。
例子：$(“p”).eq(1).css(“background-color”,“yellow”);
3.首页.UI组件-UiBackTop
3.1 代码
图片
/* 回到顶部 */
.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-backTop*/
$.fn.UiBackTop=function(){
var ui = $(this);
var el = $('<a href="#0" class="ui-backTop"></a>');
ui.append( el );
var windowHeight = $(window).height();
$(window).on('scroll',function(){
var top=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;//保证不同浏览器的兼容性
if(top > 400){//windowHeight(还是需要重新解决这个问题)
el.show();
}else{
el.hide();
}
});
el.on('click',function(){
$(window).scrollTop(0);
})
}
//页面的脚本逻辑
$(function(){
$(".ui-search").UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap')
$('body').UiBackTop();
});
3.2 注意要点
js处理回到顶部
1.scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
提示：当滚动条位于最顶部时，位置是 0。
2.问题：用于显示回到顶部的a标签在滑到窗体底部时没有显示出来
进一步发现问题：在滚动条滑动时，每一次取到的scrollTop值都是0
可供参考的文章：https://www.jianshu.com/p/46087c0ace05
js:关于scrollHeight和scrollTop取值为0的问题
初步原因是top值永远小于window.height
终极原因：var top1=document.body.scrollTop==0?document.documentElement.scrollTop:document.body.scrollTop;//保证不同浏览器的兼容性 ------可以
// var top=$(‘body’).scrollTop();一直是0的原因是浏览器兼容性的问题
参考：http://sc.chinaz.com/jiaobendemo.aspx?downloadid=1392792100509
回到顶部的插件，之后再研究一下
4.首页.UI组件-UiSlider
4.1 代码
/* 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;
width: 544px;
height: 414px;
float: left;
}
.ui-slider-arrow{
width: 544px;
height: 40px;
position: absolute;
top:50%;
margin-top:-20px;
}
.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-slidder
// 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(event,index){
wrap.css('left',index*width*-1);
tips.removeClass('item_focus').eq(index).addClass('item_focus');
})
.on('auto_move',function(){
setInterval(() => {
enableAuto && wrap.triggerHandler('move_next');
}, 2000);
})
.triggerHandler('auto_move');//一直调用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").UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap')
$('body').UiBackTop();
$('.ui-slider').UiSlider();
});
4.2 注意要点
1.overflow属性指定如果内容溢出一个元素的框，会发生什么。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
2.文字居中可使用line-height
一个div居中可使用margin-top 负边距的方法来实现
3.轮播图的左右箭头图片位置重叠的问题
因为.ui-slider-arrow .item 中设置了left:0;
在这种情况下 right中的right:0;就不起作用了.
4.background-position属性设置背景图像的起始位置。
一般都是left,top
例子(background-position: -50px 100px;)
0,0是左上角
5.transition 属性设置元素的过渡效果
例子:
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
2s过程中将width变成300px
6.https://www.runoob.com/jquery/event-triggerhandler.html
==triggerHandler() ==方法触发被选元素上指定的事件。
该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。
7.==setInterval() ==方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。(不会重复)
8.调试时输入argumens可以查看函数传入的参数
5.首页.UI组件-UiCascading 多级联动菜单
5.1 代码
data.js(模拟数据)
var storage = {};
storage.hospital = [
['area','level','type','name','address','phone','imgUrl','time'],
['朝阳区','三级甲等','卫生部直属医院','首都儿科研究所附属儿童医院','北京市朝阳区雅宝路2号','84305488'],
['朝阳区','三级甲等','卫生部直属医院','中日友好医院','北京市朝阳区樱花东路2号','84305488'],
['西城区','三级甲等','卫生部直属医院','首都医科大学附属北京友谊医院','北京市西城区永安路95号','84305488'],
['朝阳区','三级甲等','卫生部直属医院','首都医科大学附属北京地坛医院B附属','北京市朝阳区樱花东路95号','84305488'],
['朝阳区','三级合格','北京区县属医院','空军总医院','北京市西城区永安路95号','84305488'],
['海淀区','三级合格','北京区县属医院','航天中心医院（原721医院）','北京市海淀区玉泉路15号','84305488'],
['丰台区','三级甲等','北京区县属医院','北京中医药大学东方医院','北京市丰台区方庄芳星园一区6号','84305488'],
['丰台区','三级合格','北京区县属医院','北京电力医院','北京市丰台区太平桥西里甲1号','84305488'],
['顺义区','三级甲等','北京区县属医院','北京中医医院顺义医院','北京市顺义区站前东街5号','84305488'],
['通州区','三级甲等','其它','首都医科大学附属北京潞河医院三级综合医院','北京市通州区新华南路8号','84305488'],
];
storage.department = [
["hospitalName",['departmentName']],
['首都儿科研究所附属儿童医院',['儿科a','儿科b','儿科c']],
['中日友好医院',['科室a','科室b','科室c','科室d']],
['首都医科大学附属北京友谊医院',['departmentName-0']],
['首都医科大学附属北京地坛医院B附属',['departmentName-1']],
['空军总医院',['departmentName-2']],
['航天中心医院（原721医院）',['departmentName-3']],
['北京中医药大学东方医院',['departmentName-4']],
['北京电力医院',['departmentName-5']],
['北京中医医院顺义医院',['departmentName-6']],
['首都医科大学附属北京潞河医院三级综合医院',['departmentName-7']],
];
var AjaxRemoteGetData = {};
AjaxRemoteGetData.getDistinctArea = function(){
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('结果',arr);
return arr;
}
AjaxRemoteGetData.getLevelByArea = function( area ){
var map = {};
var arr = ['医院等级'];
for(i=1,j=storage.hospital.length; i<j ; i++){
var _area = storage.hospital[i][0];
var level = storage.hospital[i][1];
if(area == _area){
map[level] = 1;
}
}
for( k in map){
arr.push(k);
}
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getNameByAreaAndLevel = function( area , level ){
console.log('远程数据获取','getNameByAreaAndLevel','arguments:',arguments);
var map = {};
var arr = ['医院名称'];
for(i=1,j=storage.hospital.length;i<j;i++){
var _level = storage.hospital[i][1];
var hosptialName = storage.hospital[i][3];
var _area=storage.hospital[i][0];
if(level == _level&&area==_area){
map[hosptialName] = 1;
}
}
for( k in map){
arr.push(k);
}
console.log('结果',arr);
return arr;
}
AjaxRemoteGetData.getDepartmentArrByHosptialName = function( area,level,hospitalName){
console.log('远程数据获取','getDepartmentArrByHosptialName','arguments:',arguments);
var map = {};
var arr = ['科室名称'];
for(i=1,j=storage.department.length;i<j;i++){
var _hosptialName = storage.department[i][0];
var _d = storage.department[i][1];
var _dlen=_d.length;
for(k=0;k<_dlen;k++)
{
if(hospitalName == _hosptialName){
map[_d[k]] = 1;
}
}
}
for( k in map){
arr.push(k);
}
console.log('结果',arr);
return arr;
}
//UiCascading
$.fn.UiCascading = function(){
var ui = $(this);
var selects = $('select',ui);
selects
.on('change',function(){
var val = $(this).val();
var index = selects.index(this);
//触发一下个 select 的更新，根据当前的值
var where =$(this).attr('data-where');
where = where ? where.split(',') :[];
where.push( $(this).val());
selects.eq(index+1)
.attr('data-where',where.join(','))
.triggerHandler('reloadOptions');
//触发下一个之后的select 的初始化（清除不应该的数据项)
ui.find('select:gt('+(index+1)+')').each(function(){
$(this)
.attr('data-where','')
.triggerHandler('reloadOptions');
})
})
.on('reloadOptions',function(){
var method = $(this).attr("data-search");
var args = $(this).attr('data-where').split(',');
var data= AjaxRemoteGetData[ method ].apply(this,args);
var select =$(this);
select.find('option').remove();
$.each(data,function(i,item){
var el = $('<option value="'+item+'">'+item+'</option>');
select.append(el);
});
})
selects.eq(0).triggerHandler('reloadOptions');
}
//页面的脚本逻辑
$(function(){
$(".ui-search").UiSearch();
$('.content-tab').UiTab('.caption > .item','.block > .item');
$('.content-tab .block .item').UiTab('.block-caption > a','.block-content > .block-wrap')
$('body').UiBackTop();
$('.ui-slider').UiSlider();
$('.ui-cascading').UiCascading();
});
5.2 注意要点
html页面中select中的属性
data-search:调取数据的接口名称
data-where:传入接口的参数
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
