实战项目：医院挂号网(ui组件开发)
2024-06-28 15:04:04
实战项目：医院挂号网
- 1 首页.UI组件-UiSearch
- 1.1 代码
- 2.首页.UI组件-UiTab
- 2.1 代码
- 2.2 注意点
- 3.首页.UI组件-UiBackTop
- 3.1 代码
- 3.2 注意要点
- 4.首页.UI组件-UiSlider
- 4.1 代码
- 4.2 注意要点
- 5.首页.UI组件-UiCascading 多级联动菜单
- 5.1 代码
- 5.2 注意要点
本文所用的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:传入接口的参数
实战项目：医院挂号网(ui组件开发)相关推荐
- .NET Core实战项目之CMS 第十三章 开发篇-在MVC项目结构介绍及应用第三方UI
作为后端开发的我来说,前端表示真心玩不转,你如果让我微调一个位置的样式的话还行,但是让我写一个很漂亮的后台的话,真心做不到,所以我一般会选择套用一些开源UI模板来进行系统UI的设计.那如何套用呢?今天 ...
- 六十五、完成Vue项目去哪儿网App首页开发（来源：慕课网）
2020/10/21. 周三.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/21 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里) 主要是里 ...
- Vue3 的学习教程汇总、源码解释项目、支持的 UI 组件库、优质实战项目
大家好,我是你们的 猫哥,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 关于猫哥,大家可以看看我的年终总结 前端工程师的 2020 年终总结 - 3 年之痒. 前言 猫哥是一个常年混迹在 GitHub 上 ...
- .NET Core实战项目之CMS 第十一章 开发篇-数据库生成及实体代码生成器开发
上篇给大家从零开始搭建了一个我们的ASP.NET Core CMS系统的开发框架,具体为什么那样设计我也已经在第十篇文章中进行了说明.不过文章发布后很多人都说了这样的分层不是很合理,什么数据库实体应该 ...
- mpvue项目中使用第三方UI组件库
原文链接 最新声明 本文编写时间较早,随着时间的推移,mpvue及其周边生态越来越完善,文中的案例已经不适合在项目使用.希望大家参考其他更新的文章~ 简介 微信小程序上线已有一年多时间啦,自美团的mp ...
- SpringBoot+Vue项目医院挂号系统的设计与实现
文末获取源码 开发语言:Java 使用框架:spring boot 前端技术:JavaScript.Vue .css3 开发工具:IDEA/MyEclipse/Eclipse.Visual Studi ...
- 慕课网实战项目《WebAPP书城整站开发》笔记一：底部边栏样式实现
推荐IMOOC实践课程: <WebAPP 书城整站开发> 效果图 下边栏正常状态 下边栏变化状态 任务分析: ( ...
- vue2 typescript 项目 如何引入antd -ui组件
背景 目前 antd 还没有写 .d.ts 类型的声明文件,所以无法在目前的项目中正常使用, 当在ts文件中导入ant-design-vue的时候 import {Button,message,Tre ...
最新文章
- javascript：12种JavaScript MVC框架之比较
- 窗口截图(可指定HWND窗口句柄)
- Fatal error: cannot allocate memory for the buffer pool
- sqlite3admin触发器创建
- 解决 'config.h' file not found。升级xcode 新版本导致旧的RN项目打开报错 解决方法。...
- [git]git忽略文件
- SqlHelper数据库访问类
- ubuntu 远程桌面及Qt安装
- 带界面的OCX制作实例
- 20145335 《信息安全系统设计基础》第2周学习总结
- iPad开发(相对于iPhone开发时专有的API)
- html5--3.1 form元素
- oracle 11g Flashback Data Archive(闪回数据归档)
- python 写一个scheme解释器（一）
- ztek usb转串口 linux,Z-TEK USB转串口驱动下载
- 探索式测试之隐喻（篮球）
- 数学建模之蒙特卡洛算法
- 大数据平台的作用有什么
- Win10的几个实用技巧系列之win10和win8系统哪个好用、系统任务栏和窗口假死的解决方法
- C++代码静态分析与优化(7)_vera++