JQ插件模式开发UI组件
JQ插件开发方法：
1、$.extend() 扩展JQ（比较简单，功能略显不足）
$.extend({ sayHello:function(){ console.log("hello~"); } }); $.sayHello();
2、$.fn 向JQ添加新方法（这次选择这种方法）
$.fn.blue=(){ this.css("background","blue"); } $("div").blue(); $("p").blue();
3、$.widget() 应用JQ UI的部件工厂方式创建（比较高级，比较复杂，这里用不到）
UI-search 组件
首先是html部分，index.html
<div class="header-search ui-search"> ="ui-search-select">医院</div="ui-search-select-list"> a href="">科室a>疾病="ui-search-input"><input type="text" placeholder="请输入搜索内容"></="ui-search-submit" href> > >
然后是css部分，ui.css
/*搜索框*/ .ui-search{ background: url(img/ui-search.jpg) no-repeat center; font-size:14px; } .ui-search-select{ position: absolute; width:67px; height:38px; text-indent: 11px; line-height: color:#fff; top:2px; left: cursor:pointer; } .ui-search-select-list{ background-color: #fff;24px;1px; box-shadow: 3px 3px 3px rgba(0,.3); z-index:2; display: none; } .ui-search-select-list a{ block;100%; text-align: center;#8a8a8a; } .ui-search-select-list a:hover{ rgb(235,238,243); } .ui-search-input{210px;69px; 38px; padding-left:5px; } .ui-search-submit{ right:0;40px;38px; }
然后是jq部分，script.js
$.fn.uiSearch=var ui=$(this);//ui指当前组件的容器 出现下拉列表 $(".ui-search-select",ui).on("click",(){ $(".ui-search-select-list").show(); return false; 作用：阻止冒泡，当.ui-search-select-list事件触发后，冒泡到body元素上，会导致.ui-search-select-list再次被隐藏 }); 选择下拉选项 $(".ui-search-select-list a",1)">(){ $(".ui-search-select").text($(this).text()); $(".ui-search-select-list").hide(); ; }); 点击其他地方隐藏下拉列表 $("body").on("click",1)">).hide(); }); } 等DOM元素加载完再执行 $((){ $(".ui-search").uiSearch(); });
效果图
UI组件-UI Menu
首先是index.html
="nav-item-list ui-menu" id="nav-item-list"="ui-menu-item"> ="" class="ui-menu-item-depa">外科="ui-menu-item-dise">高血压>冠心病="ui-menu-item-list"> ="ui-menu-item-group"> ="ui-menu-item-group-caption"="ui-menu-item-group-item">神经外科="ui-menu-item-group-item active">内科>儿科>妇科>
然后是ui.css
UI Menu导航分类菜单 .ui-menu{13px;#fff; } .ui-menu-item{35px; padding:0 8px 0 35px; } .ui-menu-item:hover{ #fff; } .ui-menu-item:hover .ui-menu-item-depa{#333; } .ui-menu-item:hover .ui-menu-item-dise{#868686; } .ui-menu-item:hover .ui-menu-item-list{ block; } .ui-menu-item:hover .ui-menu-item-depa:before{ background-position: 0 0; } .ui-menu-item:nth-child(2) .ui-menu-item:hover .ui-menu-item-depa:before{ 0 -22px; } .ui-menu-item:nth-child(3) .ui-menu-item:hover .ui-menu-item-depa:before{ 0 -44px; } .ui-menu-item:nth-child(4) .ui-menu-item:hover .ui-menu-item-depa:before{ 0 -66px; } .ui-menu-item-depa{ float:left; relative; } .ui-menu-item-dise{right; .ui-menu-item-depa:before{ content:""; inline-block;22px;23px;url(img/icon-menu.jpg) -22px 0 no-repeat;-27px;6px; } .ui-menu-item:nth-child(2) .ui-menu-item-depa:before{ background-position-y:-22px; } .ui-menu-item:nth-child(3) .ui-menu-item-depa:before{-44px; } .ui-menu-item:nth-child(4) .ui-menu-item-depa:before{-66px; } .ui-menu-item-list{ none;189px;url(img/bg-menu.jpg) no-repeat;440px;394px;20px 30px 10px 30px; 1px 1px 1px rgba(0,.2); } .ui-menu-item-group{#868686; left; margin-bottom:20px; } .ui-menu-item-group-caption{rgb(120,118,120); .ui-menu-item-group-item{ .ui-menu-item-group-item:after{" |";#c6c6c6; margin:0 5px; } .ui-menu-item-group-item.active{#60bff2; }
效果图
（图标处是用的雪碧图）
UI Tab组件
这里存在选项卡组件的嵌套
index.html
="content-tab"="content-tab"="caption"="item item_current"="item"="block"="block-caption"="current">全部>东城区>西城区>朝阳区>丰台区>石景山区>海淀区>门头沟区>房山区>其他="block-wrap"="block-content"<!-- 医院列表 --> ="block-list"> ="block-list-item"> img src="img/hospital-1.jpg"="block-list-item-img"p ="block-list-item-title"> 北京协和医院span ="level">【三级甲等】spanp="block-list-item-phone">电话：东院咨询台 010-69155564="block-list-item-address">地址：【东院】北京市东城区帅富元一号【西苑】北京市西城区大木仓... 医院文案列表 ="block-text-list"="block-text-list-item">中国医学科学院肿瘤医院="block-more">更多医院="block-content" style="display: none;"="item"="display:none;" 科室内容 >
css是之前已经写好的，没有改动
script.js
uiTab Tab选项卡 // header 每个选项卡按钮item content 每个选项卡内容item prefix 选项卡激活样式 $.fn.uiTab=(header,content,prefix){ ); var tabs=$(header,ui); var cons=$(content,1)">var prefix=prefix || "item_current"; tabs.on("click",1)">(){ var index=$().index(); tabs.removeClass(prefix).eq(index).addClass(prefix);tab cons.hide().eq(index).show();content ; }); } (){ $(".content-tab").uiTab(".caption>.item",".block>.item"); $(".content-tab .block .item").uiTab(".block-caption>a",".block-wrap>.block-content","current"); });
效果图
UI组件 —— 回到顶部
首先是ui.css
ui backTop 回到顶部 .ui-backTop{ fixed; bottom:#ccc url(img/icon-go-up.png) no-repeat center; } .ui-backTop:hover:after{"回到顶部";#ccc; center; }
然后是script.js
回到顶部 $.fn.uiBackTop=function(){ var ui=$(); var el=$("<a href='#' class='ui-backTop'></a>"); ui.append(el);添加子元素 var height=$(window).height();窗口高度 $(window).on("scroll",function(){ var top=$("body").scrollTop() || $(document).scrollTop();$("body").scrollTop()存在兼容性问题 由于分辨率的原因，top始终小于height，因此可以根据实际情况调整判断条件 if(top>(height/3)){ el.show(); }else{ el.hide(); } }); $(el).on("click"回到顶部 }); } 等DOM元素加载完再执行 $(function(){ $("body").uiBackTop(); });
效果图
UI slider 幻灯片组件
无缝切换：本次暂时用不到，理解比较困难
补充知识点：在做切换箭头以及小圆点时，由于我给 a 添加了 href 属性，导致 a 有默认属性，在通过js控制切换时，使画面一闪而过
如果a没有实际的跳转地址时，就设置href属性值为 javascript:void(0)，来阻止它默认行为
index.html
="banner-slide ui-slide"="banner-slide"="ui-slide-wrap"="javascript:void(0)"="img/banner_1.jpg"="img/banner_2.jpg"="img/banner_3.jpg"="ui-slide-arrow"="javascript:void(0)"="ui-slide-arrow-left"="ui-slide-arrow-right"="ui-slide-process"="ui-slide-process-item focus"="ui-slide-process-item">
ui.css
ui slider 幻灯片组件 .ui-slide{544px;416px; relative; overflow:hidden; } .ui-slide-wrap{9999px; transition:all .5s;幻灯片切换时过渡效果*/ } .ui-slide-wrap a{left; } .ui-slide-arrow{80px;50%; margin-top:-40px; } .ui-slide-arrow-left{url(img/ui-slider-arrow.png) 0 0 no-repeat; absolute; } .ui-slide-arrow-right{url(img/ui-slider-arrow.png) -40px 0 no-repeat; .ui-slide-process{12px; center; } .ui-slide-process-item{url(img/ui-slider-process.png) 0 0 no-repeat; } .ui-slide-process-item.focus,.ui-slide-process-item:hover{ -23px 0; }
script.js
ui slider 幻灯片组件 $.fn.uiSlider=var wrap=$(".ui-slide-wrap"var pics=$(".ui-slide-wrap>a"var prev=$(".ui-slide-arrow-left"var next=$(".ui-slide-arrow-right"var points=$(".ui-slide-process-item"预定义 var current=0; var size=pics.length;图片数量 var width=pics.eq(0).width();图片宽度 var auto=true;能够自动滚动 ui.on("mouseover",1)">function(){鼠标移入时不能自动滚动 auto=; }).on("mouseout",1)">鼠标移出时恢复自动滚动 auto=true绑定自定义事件 wrap.on("move_prev",1)">(){ if(current<=0) current=size; current--;size3-1=2调回最后一张 wrap.triggerHandler("move_to"if(current>=size-1) current=-1; current++;-1+1=0调回第一张 wrap.triggerHandler("move_to"(event,index){ jquery中的on绑定事件中，function中第一个参数默认为event，如果要传参数的话，需要将event写上用来占位，第二个以及后面的才是参数 wrap.css("left",index*width*-1); points.removeClass("focus").eq(index).addClass("focus"); }).on("auto_move",1)">绑定自动滚动事件 setInterval((){ auto && wrap.triggerHandler("move_next");在能够自动滚动的情况下进行滚动 },1000); }).triggerHandler("auto_move");触发自动滚动事件 点击上一张，执行自定义事件move_prev triggerHandler 执行自定义事件 prev.on("click",1)">(){ wrap.triggerHandler("move_prev"); }); 点击下一张，执行自定义事件move_prev next.on("click",1)">(){ wrap.triggerHandler("move_next"点击小点点 points.on("click",1)">).index(); current=index; wrap.triggerHandler("move_to",index);传入当前点击第几个小点点 }); } (){ $(".ui-slide").uiSlider(); });
效果图
UI Cascading 多级联动组件
难点在于与后台的数据交互，这部分作为演示先用前端脚本代替
data.js 模拟数据库
模拟数据库 var storage = {}; storage.hospital = [ ['area','level','type','name','address','phone','imgUrl','time'],['朝阳区','三级甲等','卫生部直属医院','首都儿科研究所附属儿童医院','北京市朝阳区雅宝路2号','010-85695756','img/hospital-1.jpg','14:30''西城区','首都医科大学附属北京友谊医院','北京市西城区永安路95号','63016616','img/hospital-3.jpg','9:30' [ ['hospitalName',['departmentName'] ],['首都儿科研究所附属儿童医院',['儿科a','儿科b','儿科d''首都医科大学附属北京友谊医院',['departmentName-1''空军总医院',['departmentName-3''北京中医药大学东方医院',['departmentName-5''北京中医医院顺义医院',['departmentName-7'] ] ] 模拟远程获取数据 var AjaxRemoteGetData = {}; 获得城区 AjaxRemoteGetData.getDistinctArea = () { 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('结果'return arr; } 根据城区获取等级 AjaxRemoteGetData.getLeveByArea = ( area ){ console.log('远程数据获取','getLeveByArea','arguments:'var arr = ['医院等级'){ var _area = storage.hospital[i][0]; var _d = storage.hospital[i][1if(area == _area){ map[_d] = 1; } } 根据城区和等级获取医院名 AjaxRemoteGetData.getNameByAreaAndLevel = ( area,level ){ console.log('远程数据获取','getNameByAreaAndLevel',arguments); var arr = ['医院名称'var _level= storage.hospital[i][1var _d = storage.hospital[i][3if(level == _level && area == _area ){ map[_d] = 1根据城区和等级和医院名获取科室 AjaxRemoteGetData.getDepartmentArrByHospitalName = var arr = ['科室名称'var _hospitalName = storage.department[i][0var _d = storage.department[i][1if(hospitalName == _hospitalName ){ map[_d] = 1 arr; } AjaxRemoteGetData.getDistinctType=(){ console.log('远程数据获取','getDistinctType'var arr = ['医院类型'var _d = storage.hospital[i][2 arr; } AjaxRemoteGetData.getDistinctLevel= arr; } AjaxRemoteGetData.getHospitalArrByFilter=(type,area){ console.log('远程数据获取','getHospitalArrByFilter',1)">var arr = ['医院列表'var _type= storage.hospital[i][2]; if( (level == _level || level =='全部') && (area == _area || area == '全部' ) && (type == _type || type == '全部') ){ arr.push(storage.hospital[i]); } } console.log('结果' arr; }
在index.html 底部引入 data.js
控制台打印数据演示
补充：selects.index($this)和$(this).index() 的区别：
$(this).index()是获取当前元素的索引，是指同一父级元素下的兄弟元素中索引是第几。可能不是同一类型的。
selects.index($this)指定了类型。就是这里元素（我们这里是selects）可能不是同一父级下的。但是只要是selects元素就行。然后在所有的selects元素中，当前的元素索引。
$.each(data,fn) data是要遍历的数据，fn是操作的回调，固定用法就是 $.each()
本次多级联动实现原理：
选择一个select之后，下一个select会更新data-where记录，下面所有的select会根据当前的选择更新内容
index.html
form ="banner-search-form ui-cascading"="line" data-search 数据来源，接口名称 data-where 要传入的参数 --> select name="area" data-search="getDistinctArea" data-whereoption>医院地区select="level"="getLeveByArea">医院等级="name"="getNameByAreaAndLevel">医院名称="depa"="getDepartmentArrByHospitalName">医院科室form>
script.js
ui cascading 多级联动 $.fn.uiCascading=var selects=$("select"var val=$(this).val();当前选中的选项值 var index=selects.index(当前是哪一个select 更新下一个select的数据 var where=$(this).attr("data-where"); where=where?where.split(","):[];如果where有数据，则将字符串转为数组；否则为空数组 where.push($(this).val());将当前select选中的选项存入where selects.eq(index+1) .attr("data-where",where.join(",")) .triggerHandler("reloadData");将下一个select的data-where设置为where，并触发更新事件 触发下一个之后的所有select的数据的初始化 each用来循环 ui.find("select:gt("+(index+1)+")") .each((){ $(this).attr("data-where","").triggerHandler("reloadData"); }); }).on("reloadData",1)">绑定数据初始化事件 var method=$(this).attr("data-search");获取select的data-search属性值 this).attr("data-where").split(",");获取select的data-where属性值，并将字符串转为数组 var data=AjaxRemoteGetData[method].apply(this,where);获取数据，apply将数组作为参数传入 var select=$(); select.find("option").remove();先移出默认的option $.each(data,1)">(index,data){ console.log(arguments); 查看遍历data返回的数据结构 第一个参数是索引，第二个参数是数据值 var el="<option value='"+data+"'>"+data+"</option>"; select.append(el); }); }); selects.eq(0).triggerHandler("reloadData");默认第一个select触发更新事件 } (){ $(".ui-cascading").uiCascading(); });
效果图
1.第一步 设置响应头 header('Access-Control-Allow...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...