JQ插件模式開發UI組件
JQ插件開發方法：
1、$.extend() 擴展JQ（比較簡單，功能略顯不足）
$.extend({ sayHello:function(){ console.log("hello~"); } }); $.sayHello();
2、$.fn 向JQ添加新方法（這次選擇這種方法）
$.fn.blue=function(){ this.css("background","blue"); } $("div").blue(); $("p").blue();
3、$.widget() 應用JQ UI的部件工廠方式創建（比較高級，比較復雜，這里用不到）
UI-search 組件
首先是html部分，index.html
<div class="header-search ui-search"> <div class="ui-search-select">醫院</div> <div class="ui-search-select-list"> <a href="">科室</a> <a href="">疾病</a> <a href="">醫院</a> </div> <div class="ui-search-input"><input type="text" placeholder="請輸入搜索內容"></div> <a class="ui-search-submit" href=""> </a> </div>
然后是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:38px; color:#fff; top:2px; left:2px; cursor:pointer; } .ui-search-select-list{ background-color: #fff; width:67px; top:38px; line-height:24px; position: absolute; left:1px; box-shadow: 3px 3px 3px rgba(0,0,0,.3); z-index:2; display: none; } .ui-search-select-list a{ display: block; width:100%; text-align: center; color:#8a8a8a; } .ui-search-select-list a:hover{ background-color: rgb(235,238,243); } .ui-search-input{ width:210px; height:38px; position: absolute; top:2px; left:69px; line-height: 38px; padding-left:5px; } .ui-search-submit{ display: block; position: absolute; right:0; top:2px; width:40px; height:38px; }
然后是jq部分，script.js
$.fn.uiSearch=function(){ var ui=$(this);//ui指當前組件的容器 //出現下拉串列 $(".ui-search-select",ui).on("click",function(){ $(".ui-search-select-list").show(); return false; //作用：阻止冒泡，當.ui-search-select-list事件觸發后，冒泡到body元素上，會導致.ui-search-select-list再次被隱藏 }); //選擇下拉選項 $(".ui-search-select-list a",ui).on("click",function(){ $(".ui-search-select").text($(this).text()); $(".ui-search-select-list").hide(); return false; }); //點擊其他地方隱藏下拉串列 $("body").on("click",function(){ $(".ui-search-select-list").hide(); }); } //等DOM元素加載完再執行 $(function(){ $(".ui-search").uiSearch(); });
效果圖
UI組件-UI Menu
首先是index.html
<div class="nav-item-list ui-menu" id="nav-item-list"> <div class="ui-menu-item"> <a href="" class="ui-menu-item-depa">外科</a> <a href="" class="ui-menu-item-dise">高血壓</a> <a href="" class="ui-menu-item-dise">冠心病</a> <div class="ui-menu-item-list"> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">外科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">外科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item active">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-depa">內科</a> <a href="" class="ui-menu-item-dise">高血壓</a> <a href="" class="ui-menu-item-dise">冠心病</a> <div class="ui-menu-item-list"> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">內科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">外科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item active">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-depa">兒科</a> <a href="" class="ui-menu-item-dise">高血壓</a> <a href="" class="ui-menu-item-dise">冠心病</a> <div class="ui-menu-item-list"> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">兒科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">外科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item active">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> </div> </div> <div class="ui-menu-item"> <a href="" class="ui-menu-item-depa">婦科</a> <a href="" class="ui-menu-item-dise">高血壓</a> <a href="" class="ui-menu-item-dise">冠心病</a> <div class="ui-menu-item-list"> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">婦科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> <div class="ui-menu-item-group"> <div class="ui-menu-item-group-caption">外科</div> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item active">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> <a href="" class="ui-menu-item-group-item">神經外科</a> </div> </div> </div> </div>
然后是ui.css
/*UI Menu導航分類選單*/ .ui-menu{ font-size:13px; color:#fff; } .ui-menu-item{ height:35px; line-height:35px; padding:0 8px 0 35px; } .ui-menu-item:hover{ background-color: #fff; } .ui-menu-item:hover .ui-menu-item-depa{ color:#333; } .ui-menu-item:hover .ui-menu-item-dise{ color:#868686; } .ui-menu-item:hover .ui-menu-item-list{ display: 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{ background-position: 0 -22px; } .ui-menu-item:nth-child(3) .ui-menu-item:hover .ui-menu-item-depa:before{ background-position: 0 -44px; } .ui-menu-item:nth-child(4) .ui-menu-item:hover .ui-menu-item-depa:before{ background-position: 0 -66px; } .ui-menu-item-depa{ color:#fff; float:left; position: relative; } .ui-menu-item-dise{ color:#fff; float:right; padding-left:5px; } .ui-menu-item-depa:before{ content:""; display: inline-block; width:22px; height:23px; background:url(img/icon-menu.jpg) -22px 0 no-repeat; position: absolute; left:-27px; top: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{ background-position-y:-44px; } .ui-menu-item:nth-child(4) .ui-menu-item-depa:before{ background-position-y:-66px; } .ui-menu-item-list{ display: none; position: absolute; top:1px; left:189px; background-color: #fff; background:url(img/bg-menu.jpg) no-repeat; z-index:2; width:440px; height:394px; padding:20px 30px 10px 30px; box-shadow: 1px 1px 1px rgba(0,0,0,.2); } .ui-menu-item-group{ color:#868686; text-align: left; margin-bottom:20px; } .ui-menu-item-group-caption{ color:rgb(120,118,120); font-size:14px; } .ui-menu-item-group-item{ color:#868686; } .ui-menu-item-group-item:after{ content:" |"; color:#c6c6c6; margin:0 5px; } .ui-menu-item-group-item.active{ color:#60bff2; }
效果圖
（圖示處是用的雪碧圖）
UI Tab組件
這里存在選項卡組件的嵌套
index.html
<div class="content-tab" id="content-tab"> <div class="caption"> <a href="" class="item item_current">醫院</a> <a href="" class="item">科室</a> </div> <div class="block"> <div class="item"> <div class="block-caption"> <a href="" class="current">全部</a> <a href="">東城區</a> <a href="">西城區</a> <a href="">朝陽區</a> <a href="">豐臺區</a> <a href="">石景山區</a> <a href="">海淀區</a> <a href="">門頭溝區</a> <a href="">房山區</a> <a href="">其他</a> </div> <div class="block-wrap"> <div class="block-content"> <!-- 醫院串列 --> <div class="block-list"> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> <div class="block-list-item"> <img src="img/hospital-1.jpg" class="block-list-item-img"> <p class="block-list-item-title"> 北京協和醫院<span class="level">【三級甲等】</span> </p> <div class="block-list-item-phone">電話：東院咨詢臺 010-69155564</div> <div class="block-list-item-address">地址：【東院】北京市東城區帥富元一號【西苑】北京市西城區大木倉...</div> </div> </div> <!-- 醫院文案串列 --> <div class="block-text-list"> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> <a href="" class="block-text-list-item">中國醫學科學院腫瘤醫院<span class="level">【三級甲等】</span></a> </div> <a class="block-more">更多醫院</a> </div> <div class="block-content" style="display: none;">東城區</div> <div class="block-content" style="display: none;">西城區</div> <div class="block-content" style="display: none;">朝陽區</div> <div class="block-content" style="display: none;">豐臺區</div> <div class="block-content" style="display: none;">石景山區</div> <div class="block-content" style="display: none;">海淀區</div> <div class="block-content" style="display: none;">門頭溝區</div> <div class="block-content" style="display: none;">房山區</div> <div class="block-content" style="display: none;">其他</div> </div> </div> <div class="item" style="display:none;"> 科室內容 </div> </div> </div>
css是之前已經寫好的，沒有改動
script.js
// uiTab Tab選項卡 // header 每個選項卡按鈕item // content 每個選項卡內容item // prefix 選項卡激活樣式 $.fn.uiTab=function(header,content,prefix){ var ui=$(this); var tabs=$(header,ui); var cons=$(content,ui); var prefix=prefix || "item_current"; tabs.on("click",function(){ var index=$(this).index(); tabs.removeClass(prefix).eq(index).addClass(prefix);//tab cons.hide().eq(index).show();//content return false; }); } //等DOM元素加載完再執行 $(function(){ $(".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{ display: block; position: fixed; right:2px; bottom:2px; width:40px; height:40px; background:#ccc url(img/icon-go-up.png) no-repeat center; } .ui-backTop:hover:after{ content:"回到頂部"; display: block; color:#fff; background:#ccc; text-align: center; }
然后是script.js
//回到頂部 $.fn.uiBackTop=function(){ var ui=$(this); var el=$("<a href='https://www.cnblogs.com/chenyingying0/p/#' 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",function(){ $(window).scrollTop(0);//回到頂部 }); } //等DOM元素加載完再執行 $(function(){ $("body").uiBackTop(); });
效果圖
UI slider 幻燈片組件
無縫切換：本次暫時用不到，理解比較困難
補充知識點：在做切換箭頭以及小圓點時，由于我給 a 添加了 href 屬性，導致 a 有默認屬性，在通過js控制切換時，使畫面一閃而過
如果a沒有實際的跳轉地址時，就設定href屬性值為 javascript:void(0)，來阻止它默認行為
index.html
<div class="banner-slide ui-slide" id="banner-slide"> <div class="ui-slide-wrap"> <a href="javascript:void(0)"><img src="img/banner_1.jpg"></a> <a href="javascript:void(0)"><img src="img/banner_2.jpg"></a> <a href="javascript:void(0)"><img src="img/banner_3.jpg"></a> </div> <div class="ui-slide-arrow"> <a href="javascript:void(0)" class="ui-slide-arrow-left"> </a> <a href="javascript:void(0)" class="ui-slide-arrow-right"> </a> </div> <div class="ui-slide-process"> <a href="javascript:void(0)" class="ui-slide-process-item focus"></a> <a href="javascript:void(0)" class="ui-slide-process-item"></a> <a href="javascript:void(0)" class="ui-slide-process-item"></a> </div> </div>
ui.css
/*ui slider 幻燈片組件*/ .ui-slide{ width:544px; height:416px; position: relative; overflow:hidden; } .ui-slide-wrap{ width:9999px; height:416px; position: absolute; top:0; left:0; transition:all .5s;/*幻燈片切換時過渡效果*/ } .ui-slide-wrap a{ width:544px; height:416px; display: block; float:left; } .ui-slide-arrow{ position: absolute; height:80px; width:100%; top:50%; margin-top:-40px; } .ui-slide-arrow-left{ background:url(img/ui-slider-arrow.png) 0 0 no-repeat; left:0; width:40px; height:40px; position: absolute; } .ui-slide-arrow-right{ background:url(img/ui-slider-arrow.png) -40px 0 no-repeat; right:0; width:40px; height:40px; position: absolute; } .ui-slide-process{ width:100%; height:12px; position: absolute; left:0; bottom:24px; text-align: center; } .ui-slide-process-item{ width:12px; height:12px; display: inline-block; background:url(img/ui-slider-process.png) 0 0 no-repeat; } .ui-slide-process-item.focus, .ui-slide-process-item:hover{ background-position: -23px 0; }
script.js
//ui slider 幻燈片組件 $.fn.uiSlider=function(){ var ui=$(this); var wrap=$(".ui-slide-wrap",ui); var pics=$(".ui-slide-wrap>a",ui); var prev=$(".ui-slide-arrow-left",ui); var next=$(".ui-slide-arrow-right",ui); var points=$(".ui-slide-process-item",ui); //預定義 var current=0; var size=pics.length;//圖片數量 var width=pics.eq(0).width();//圖片寬度 var auto=true;//能夠自動滾動 ui.on("mouseover",function(){//滑鼠移入時不能自動滾動 auto=false; }).on("mouseout",function(){//滑鼠移出時恢復自動滾動 auto=true; }); //系結自定義事件 wrap.on("move_prev",function(){ if(current<=0) current=size; current--;//size3-1=2調回最后一張 wrap.triggerHandler("move_to",current); }).on("move_next",function(){ if(current>=size-1) current=-1; current++;//-1+1=0調回第一張 wrap.triggerHandler("move_to",current); }).on("move_to",function(event,index){ //jquery中的on系結事件中，function中第一個引數默認為event，如果要傳引數的話，需要將event寫上用來占位，第二個以及后面的才是引數 wrap.css("left",index*width*-1); points.removeClass("focus").eq(index).addClass("focus"); }).on("auto_move",function(){//系結自動滾動事件 setInterval(function(){ auto && wrap.triggerHandler("move_next");//在能夠自動滾動的情況下進行滾動 },1000); }).triggerHandler("auto_move");//觸發自動滾動事件 //點擊上一張，執行自定義事件move_prev //triggerHandler 執行自定義事件 prev.on("click",function(){ wrap.triggerHandler("move_prev"); }); //點擊下一張，執行自定義事件move_prev next.on("click",function(){ wrap.triggerHandler("move_next"); }); //點擊小點點 points.on("click",function(){ var index=$(this).index(); current=index; wrap.triggerHandler("move_to",index);//傳入當前點擊第幾個小點點 }); } //等DOM元素加載完再執行 $(function(){ $(".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'], ['朝陽區','三級甲等','衛生部直屬醫院','中日友好醫院','北京市朝陽區櫻花東路2號','84205288','img/hospital-2.jpg','8:30'], ['西城區','三級甲等','衛生部直屬醫院','首都醫科大學附屬北京友誼醫院','北京市西城區永安路95號','63016616','img/hospital-3.jpg','9:30'], ['朝陽區','三級甲等','衛生部直屬醫院','首都醫科大學附屬北京地壇醫院B附屬','北京市朝陽區櫻花東路2號','84205288','img/hospital-4.jpg','8:30'], ['朝陽區','三級合格','北京區縣屬醫院','空軍總醫院','北京市朝陽區櫻花東路2號','84205288','img/hospital-5.jpg','8:30'], ['海淀區','三級合格','北京區縣屬醫院','航天中心醫院(原721醫院)','北京市海淀區玉泉路15號','59971160','img/hospital-6.jpg','8:30'], ['豐臺區','三級甲等','北京區縣屬醫院','北京中醫藥大學東方醫院','北京豐臺區方莊芳星園一區6號','67689655','img/hospital-1.jpg','8:30'], ['豐臺區','三級合格','北京區縣屬醫院','北京電力醫院','北京市豐臺區太平橋西里甲1號','84205288','img/hospital-2.jpg','8:30'], ['順義區','三級甲等','北京區縣屬醫院','北京中醫醫院順義醫院','北京市順義區站前東街5號','84205288','img/hospital-3.jpg','8:30'], ['通州區','三級甲等','其他','首都醫科大學附屬北京潞河醫院三級綜合醫院','北京市通州區新華南路82號','69543901','img/hospital-4.jpg','8:30'], ]; storage.department = [ ['hospitalName', ['departmentName'] ], ['首都兒科研究所附屬兒童醫院',['兒科a','兒科b','兒科d'] ], ['中日友好醫院',['科室a','科室b','科室c','科室d'] ], ['首都醫科大學附屬北京友誼醫院', ['departmentName-1'] ], ['首都醫科大學附屬北京地壇醫院B附屬', ['departmentName-2'] ], ['空軍總醫院',['departmentName-3'] ], ['航天中心醫院(原721醫院)', ['departmentName-4'] ], ['北京中醫藥大學東方醫院', ['departmentName-5'] ], ['北京電力醫院', ['departmentName-6'] ], ['北京中醫醫院順義醫院', ['departmentName-7'] ] , ['首都醫科大學附屬北京潞河醫院三級綜合醫院', ['departmentName-8'] ] ] // 模擬遠程獲取資料 var AjaxRemoteGetData =https://www.cnblogs.com/chenyingying0/p/ {}; //獲得城區 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.getLeveByArea = function( area ){ console.log('遠程資料獲取','getLeveByArea','arguments:',arguments); var map = {}; var arr = ['醫院等級']; for(i=1,j=storage.hospital.length; i<j ; i++){ var _area = storage.hospital[i][0]; var _d = storage.hospital[i][1]; if(area == _area){ map[_d] = 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 _area = storage.hospital[i][0]; var _level= storage.hospital[i][1]; var _d = storage.hospital[i][3]; if(level == _level && area == _area ){ map[_d] = 1; } } for( k in map){ arr.push(k); } console.log('結果',arr); return arr; } //根據城區和等級和醫院名獲取科室 AjaxRemoteGetData.getDepartmentArrByHospitalName = function( area,level,hospitalName ){ console.log('遠程資料獲取','getDepartmentArrByHospitalName','arguments:',arguments); var map = {}; var arr = ['科室名稱']; for(i=1,j=storage.department.length; i<j ; i++){ var _hospitalName = storage.department[i][0]; var _d = storage.department[i][1]; if(hospitalName == _hospitalName ){ map[_d] = 1; } } for( k in map){ arr.push(k); } console.log('結果',arr); return arr; } AjaxRemoteGetData.getDistinctType=function(){ console.log('遠程資料獲取','getDistinctType'); var map = {}; var arr = ['醫院型別']; for(i=1,j=storage.hospital.length; i<j ; i++){ var _d = storage.hospital[i][2]; map[_d] =1; } for( k in map){ arr.push(k); } console.log('結果',arr); return arr; } AjaxRemoteGetData.getDistinctLevel=function(){ console.log('遠程資料獲取','getDistinctLevel'); var map = {}; var arr = ['醫院等級']; for(i=1,j=storage.hospital.length; i<j ; i++){ var _d = storage.hospital[i][1]; map[_d] =1; } for( k in map){ arr.push(k); } console.log('結果',arr); return arr; } AjaxRemoteGetData.getHospitalArrByFilter=function(type,level,area){ console.log('遠程資料獲取','getHospitalArrByFilter','arguments:',arguments); var map = {}; var arr = ['醫院串列']; for(i=1,j=storage.hospital.length; i<j ; i++){ var _type= storage.hospital[i][2]; var _area = storage.hospital[i][0]; var _level= storage.hospital[i][1]; var _d = storage.hospital[i][3]; if( (level == _level || level =='全部') && (area == _area || area == '全部' ) && (type == _type || type == '全部') ){ arr.push(storage.hospital[i]); } } console.log('結果',arr); return 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 class="banner-search-form ui-cascading"> <div class="line"> <!-- data-search 資料來源，介面名稱 data-where 要傳入的引數 --> <select name="area" data-search="getDistinctArea" data-where=""> <option>醫院地區</option> </select> </div> <div class="line"> <select name="level" data-search="getLeveByArea" data-where=""> <option>醫院等級</option> </select> </div> <div class="line"> <select name="name" data-search="getNameByAreaAndLevel" data-where=""> <option>醫院名稱</option> </select> </div> <div class="line"> <select name="depa" data-search="getDepartmentArrByHospitalName" data-where=""> <option>醫院科室</option> </select> </div> </form>
script.js
// ui cascading 多級聯動 $.fn.uiCascading=function(){ var ui=$(this); var selects=$("select",ui); selects.on("change",function(){ var val=$(this).val();//當前選中的選項值 var index=selects.index(this);//當前是哪一個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(function(){ $(this).attr("data-where","").triggerHandler("reloadData"); }); }).on("reloadData",function(){//系結資料初始化事件 var method=$(this).attr("data-search");//獲取select的data-search屬性值 var where=$(this).attr("data-where").split(",");//獲取select的data-where屬性值，并將字串轉為陣列 var data=https://www.cnblogs.com/chenyingying0/p/AjaxRemoteGetData[method].apply(this,where);//獲取資料，apply將陣列作為引數傳入 var select=$(this); select.find("option").remove();//先移出默認的option $.each(data,function(index,data){ //console.log(arguments); //查看遍歷data回傳的資料結構 //第一個引數是索引，第二個引數是資料值 var el="<option value='"+data+"'>"+data+"</option>"; select.append(el); }); }); selects.eq(0).triggerHandler("reloadData");//默認第一個select觸發更新事件 } //等DOM元素加載完再執行 $(function(){ $(".ui-cascading").uiCascading(); });
效果圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7125.html
標籤：jQuery
上一篇：前端——jQuery