JavaScript 플러그인 개발 튜토리얼(4)_javascript 기술
- WBOY원래의
- 2016-05-16 16:17:471147검색
1, 오프닝 분석
안녕하세요 지난 글 기억하시나요? 주로 '탭' 플러그인이 코드를 정리하고 구현하는 방법과 절차적 디자인과 객체지향 디자인을 결합하는 방법에 대해 이야기합니다
플러그인을 설계하는 방법은 두 가지 모두 장점과 단점이 있습니다. 이 기사 시리즈는 특정 시나리오에서 플러그인을 사용하는 방법을 결정할 수 있습니다. 이 글에서는 여전히 "Tab" 인스턴스인
에 초점을 맞추고 있습니다.관련 기능을 계속 확장해 나가겠습니다. 야야야, 쓸데없는 소리 그만하고 본론으로 들어가라. 실제 렌더링을 직접 업로드하세요:
보시다시피, 새로운 기능이 추가되었습니다. 초기화 중에 모듈 구성 정보 항목의 항목 수가 지정한 것보다 많으면 "추가 모듈"에 표시됩니다.
작업 항목의 숨겨진 목록에는 초기화 매개변수 구성도 조정되었습니다. 예를 들어 초기화 중 항목 수를 지정하는 추가 "displayMax"와 프로젝트 속성 "status"가 있습니다.
초기화 중에 불필요한 구성도 제거됩니다. 구성은 프로그램에서 동적으로 생성되므로 아래에서 자세히 분석해 보겠습니다.
(2), 예시분석
(1) 먼저 이 플러그인의 기능을 확인하세요. 플러그인이 호출되는 방식과 구성 매개변수 설명을 살펴보겠습니다. 다음 코드:
코드 복사 코드는 다음과 같습니다.
{
ButtonText: "모듈 추가" ,
결과: [
{
텍스트: "가이드 팁",
URL: "help.html",
showClose : "0"
} ,
{
텍스트: "학생 정보" ,
URL: "info.html",
showClose: "1"
} ,
{
텍스트: "학생 분류" ,
URL: "category.html" ,
showClose: "1"
} ,
{
텍스트: "빅 베어 {{bb}}" ,
URL: "bb.html" ,
showClose : "1"
} ,
{
텍스트: "베타 테스트 모듈" ,
URL: "test.html",
showClose : "1"
} ,
{
텍스트: "세 지방" ,
URL: "help.html",
showClose : "1"
} ,
{
텍스트: "네 명의 대머리 남자",
URL: "help.html",
showClose: "1"
}
] ,
displayMax : 5 // 최대 표시 항목
}
"bigbear.ui.createTab"에는 두 개의 매개변수가 포함되어 있습니다. 첫 번째는 dom 노드 개체이고 두 번째는 플러그인 매개변수 옵션입니다. "buttonText"는 "Tab" 플러그에 있는 작업 버튼의 텍스트 설명을 나타냅니다. -안에.
"result"는 텍스트 설명, 탭 항목을 클릭할 때 요청하는 데 사용되는 URL 등 탭 항목의 속성을 포함하는 배열입니다. "showClose"는 탭 옵션이 닫기 버튼을 표시하는지 여부를 나타냅니다.
"상태"도 초기화 중에 제거되며 구성이 프로그램에서 동적으로 생성됩니다. 1 - 기본 표시, 0 - 닫힌 상태, 2 - 기본 항목 수 초과로 표현되는 닫힌 상태가 있을 수 있습니다.
(2), 기능을 단계별로 소개합니다
1--- 선택적 매개변수를 통해 플러그인을 초기화합니다.
코드 복사 코드는 다음과 같습니다.
$(함수(){
Bigbear.ui.createTab($("#tab"),{
buttonText: "모듈 추가",
결과 : [
{
텍스트: "가이드 팁" ,
URL: "help.html",
showClose : "0"
},
{
텍스트: "학생 정보",
URL: "info.html",
showClose: "1"
},
{
텍스트: "학생 분류",
URL: "category.html",
showClose: "1"
},
{
텍스트: "큰 곰 {{bb}}" ,
URL: "bb.html" ,
showClose: "1"
},
{
텍스트: "베타 테스트 모듈" ,
URL: "test.html",
showClose: "1"
},
{
텍스트: "세 지방" ,
URL: "help.html",
showClose: "1"
},
{
> > 텍스트: "네 명의 대머리 남자" ,
URL: "help.html",
showClose: "1"
}
] ,
displayMax: 5 // 최대 표시 항목
}) ;
}) ;
2---, 초기화 중 항목 수 확인과 같은 시간 바인딩 및 관련 비즈니스 로직을 렌더링하고 완료합니다.
코드 복사 코드는 다음과 같습니다.
tabProto.init = function(){
if(this._isEmptyResult()){
this._setContent("暂无任何模块!") ;
}
var that = this ;
this.getElem().find(".title .adder")
.text(" " this.getOpts()["buttonText"])
.on("클릭",function(){
that.getElem().find(".console-panel").slideToggle(function(){
that._renderConsolePanel("0") ;
}) ;
}) ;
$.each(this.getOpts()["result"],function(i,item){
if(that._isDisplayMax(i 1)){
that._saveOrUpdateStatus(item,"1") ;
}
그렇지 않으면{
that._saveOrUpdateStatus(item,"2") ;
}
that._render(항목) ;
}) ;
if(!that._isDisplayMax(this.getOpts()["result"].length)){
this.getElem().find(".title .more-mod").fadeIn(function(){
$(this).find(".tag").on("클릭",function(){
var 루트 = $(this).next() ;
root.empty() ;
$.each(that._getItemListByStatus("2"),function(i,data){
$("").text(data["text"])
.on("클릭",function(){
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
}) ;
}
그렇지 않으면{
Alert("不能添加任何模块，目前已经是最大数weight！") ;
}
})
.appendTo(루트) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("클릭") ; // 假定是必须有一项，否则插件意义就不大了！
} ;
3---, 탭 전환 및 데이터 콘텐츠 렌더링 작업.
코드 복사 코드는 다음과 같습니다.
tabProto._setCurrent = 함수(색인){
var items = this.getElem().find(".title .items div").removeClass("active") ;
items.eq(index).addClass("active") ;
var 내용 = this.getElem().find(".content .c").hide() ;
내용.eq(index).show() ;
} ;
코드 복사 코드는 다음과 같습니다.
item.on("클릭",function(){
That._setCurrent($(this).index()) ;
That._getContent(data["url"]).done(function(result){
That._setContent(결과) ;
})
.fail(함수(){
새로운 오류 발생("Net Error !") ;
});
})
That._setCurrent($(this).index()) ;
That._getContent(data["url"]).done(function(result){
That._setContent(결과) ;
})
.fail(함수(){
새로운 오류 발생("Net Error !") ;
});
})
코드 복사 코드는 다음과 같습니다.
tabProto._setContent = 함수(html){
This.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = 함수(url){
$.ajax({
반환 url: url
}) ;
} ;
4--- 핵심 보조 데이터 연산 방식은 DOM을 포함하지 않습니다. This.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = 함수(url){
$.ajax({
반환 url: url
}) ;
} ;
코드 복사 코드는 다음과 같습니다.
/* 업데이트 시간 2015년 1월 26일 15:36 */
tabProto._isDisplayMax = 함수(크기){
var displayMax = this.getOpts()["displayMax"] || 5 ;
반환(크기 <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
If(!this.getOpts()["result"].length){
false 반환 ;
}
true를 반환합니다 ;
} ;
tabProto._saveOrUpdateStatus = 함수(항목,상태){
아이템["상태"] = 상태 ;
} ;
tabProto._getItemListByStatus = 함수(상태){
var 목록 = [] ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(상태 == 항목["상태"]){
list.push(항목);
}
}) ;
반품 목록 ;
} ;
tabProto._getStatusByIndex = 함수(색인){
var 상태 = null ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(색인 == 항목["색인"]){
상태 = 항목["상태"] ;
}
}) ;
반품상태 ;
} ;
tabProto._isDisplayMax = 함수(크기){
var displayMax = this.getOpts()["displayMax"] || 5 ;
반환(크기 <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
If(!this.getOpts()["result"].length){
false 반환 ;
}
true를 반환합니다 ;
} ;
tabProto._saveOrUpdateStatus = 함수(항목,상태){
아이템["상태"] = 상태 ;
} ;
tabProto._getItemListByStatus = 함수(상태){
var 목록 = [] ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(상태 == 항목["상태"]){
list.push(항목);
}
}) ;
반품 목록 ;
} ;
tabProto._getStatusByIndex = 함수(색인){
var 상태 = null ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(색인 == 항목["색인"]){
상태 = 항목["상태"] ;
}
}) ;
반품상태 ;
} ;
(3) 학습을 위한 완전한 코드 , 이 코드는 디렉토리 구조와 관련 파일을 포함하여 테스트되었습니다.
1,html
코드 복사 코드는 다음과 같습니다.
<본문>
大熊君{{bb}} - DXJ UI ------ 탭
添加school生信息
.dxj-ui-hd {
패딩:0px ;
여백 : 0 자동;
여백 상단:30px;
너비:780px;
높이:60px;
줄 높이: 60px;
배경: #3385ff;
색상:#fff;
글꼴 모음: "微软雅黑" ;
글꼴 크기: 28px;
텍스트 정렬: 중앙;
글꼴 두께:굵게;
}
.dxj-ui-bd {
패딩:0px ;
여백 : 0 자동;
너비:778px;
패딩탑 : 30px ;
패딩 바닥 : 30px ;
오버플로: 숨김;
테두리:1px 솔리드 #3385ff;
}
.dxj-ui-bd #탭 {
패딩:0px ;
여백 : 0 자동;
너비:720px;
오버플로: 숨김;
위치:상대;
}
.dxj-ui-bd #tab .title {
너비:720px;
오버플로: 숨김;
border-bottom:2px solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
너비:160px;
높이:32px;
줄 높이: 32px;
배경: #DC143C;
색상:#fff;
글꼴 모음: "微软雅黑" ;
글꼴 크기: 14px;
텍스트 정렬: 중앙;
글꼴 두께:굵게;
부동 : 왼쪽;
커서:포인터;
}
.dxj-ui-bd #tab .title .more-mod {
오버플로:숨김;
테두리:1px 솔리드 #DC143C;
너비:70px;
위치:절대;
오른쪽:0;
여백 오른쪽:6px;
디스플레이:없음;
}
.dxj-ui-bd #tab .title .more-mod .tag{
높이:32px;
줄 높이:32px;
너비:70px;
배경: #DC143C;
색상:#fff;
글꼴 계열: arial ;
글꼴 크기: 12px;
텍스트 정렬: 중앙;
커서:포인터;
}
.dxj-ui-bd #tab .title .more-mod .mods {
오버플로:숨김;
너비:70px;
디스플레이:없음;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
높이:24px;
줄 높이:24px;
너비:62px;
글꼴 계열: arial ;
글꼴 크기: 12px;
커서:포인터;
왼쪽 패딩:10px;
}
.dxj-ui-bd #tab .title .items {
높이:32px;
너비:480px;
오버플로: 숨김;
부동 : 왼쪽;
}
.dxj-ui-bd #tab .title .items div {
패딩:0px;
여백-왼쪽:10px;
너비:84px;
높이:32px;
줄 높이: 32px;
배경: #3385ff;
색상:#fff;
글꼴 계열: arial ;
글꼴 크기: 12px;
텍스트 정렬: 중앙;
위치:상대;
부동 : 왼쪽;
커서:포인터;
}
.dxj-ui-bd #tab .title .items div span.del {
너비:16px;
높이:16px;
줄 높이: 16px;
디스플레이:블록;
배경: #DC143C;
위치:절대;
오른쪽:0 ;
상단:0;
커서:포인터;
}
.dxj-ui-bd #tab .content {
너비:716px;
패딩 상단:30px;
오버플로: 숨김;
테두리:2px 솔리드 #3385ff;
테두리 상단:0px;
최소 높이:130px;
텍스트 정렬:가운데;
}
.dxj-ui-bd #tab .content 테이블 {
여백 : 0 자동 ;
}
.dxj-ui-bd #tab .content div.c {
패딩탑 : 20px ;
왼쪽 패딩:20px;
배경:#eee;
높이:140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
여백 상단 : 10px ;
글꼴 계열: arial ;
글꼴 크기: 12px;
}
.dxj-ui-bd #tab .console-panel {
너비:716px;
패딩 상단:20px;
패딩 바닥:20px;
오버플로: 숨김;
테두리:2px 솔리드 #3385ff;
테두리 상단:0px;
border-bottom:2px solid #3385ff;
배경:#fff;
디스플레이:없음;
}
.활성 {
글꼴 두께:굵게 ;
}
(function($){
var win = window ;
var bb = win.bigbear = win.bigbear || {
ui : {}
} ;
var ui = bb.ui = {} ;
var Tab = function(elem,opts){
this.elem = elem ;
this.opts = opts ;
} ;
var tabProto = Tab.prototype ;
/* update time 2015 1/26 15:36 */
tabProto._isDisplayMax = function(size){
var displayMax = this.getOpts()["displayMax"] || 5 ;
return (size <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
if(!this.getOpts()["result"].length){
return false ;
}
return true ;
} ;
tabProto._saveOrUpdateStatus = function(item,status){
item["status"] = status ;
} ;
tabProto._getItemListByStatus = function(status){
var list = [] ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(status == item["status"]){
list.push(item) ;
}
}) ;
return list ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(index == item["index"]){
status = item["status"] ;
}
}) ;
return status ;
} ;
tabProto._renderConsolePanel = function(status){
var that = this ;
var root = that.getElem().find(".console-panel") ;
this._resetConsolePanel() ;
$.each(that._getItemListByStatus(status),function(i,item){
var elem = $("").appendTo(루트) ;
$("")
.data("항목",항목)
.appendTo(elem) ;
$("").text(item["text"]).appendTo(elem) ;
}) ;
if(root.find("div").size()){
$("")
.on("클릭",function(){
var data = root.find("input[type=radio]:checked").data("item") ;
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
})
.trigger("클릭") ;
}
그렇지 않으면{
that._saveOrUpdateStatus(data,"2") ;
}
that.getElem().find(".title .adder").trigger("클릭") ;
})
.appendTo(루트) ;
}
그렇지 않으면{
root.text("暂无任何可添加的项目!") ;
}
} ;
/* 업데이트 시간 2015년 1/26 15:36 */
tabProto._setCurrent = 함수(색인){
var items = this.getElem().find(".title .items div").removeClass("active") ;
items.eq(index).addClass("active") ;
var 내용 = this.getElem().find(".content .c").hide() ;
내용.eq(index).show() ;
} ;
tabProto.getElem = 함수(){
this.elem을 반환하세요 ;
} ;
tabProto.getOpts = function(){
this.opts를 반환하세요 ;
} ;
tabProto._resetContent = function(){
this.getElem().find(".content").html("") ;
} ;
tabProto._setContent = 함수(html){
this.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = 함수(url){
$.ajax({
반환 url : url
}) ;
} ;
tabProto._deleteItem = 함수(elem){
var that = this ;
this.getElem().find(".title .items div")
.eq(elem.index())
.fadeOut(함수(){
that._resetContent() ;
that._saveOrUpdateStatus(elem.data("item"),"0") ;
that._triggerItem(elem.index() + 1) ;
}) ;
} ;
tabProto._triggerItem = function(next){
var nextStatus = this._getStatusByIndex(next) ;
var items = this.getElem().find(".title .items div") ;
next = items.eq(next) ;
if(next.size() && "1" == nextStatus){ //后继dom节点存在
next.trigger("click") ;
}
else{
items.eq(0).trigger("click") ;
}
} ;
tabProto._resetConsolePanel = function(){
this.getElem().find(".console-panel").empty() ;
} ;
tabProto.init = function(){
if(this._isEmptyResult()){
this._setContent("暂无任何模块!") ;
}
var that = this ;
this.getElem().find(".title .adder")
.text("+" + this.getOpts()["buttonText"])
.on("click",function(){
that.getElem().find(".console-panel").slideToggle(function(){
that._renderConsolePanel("0") ;
}) ;
}) ;
$.each(this.getOpts()["result"],function(i,item){
if(that._isDisplayMax(i + 1)){
that._saveOrUpdateStatus(item,"1") ;
}
else{
that._saveOrUpdateStatus(item,"2") ;
}
that._render(item) ;
}) ;
if(!that._isDisplayMax(this.getOpts()["result"].length)){
this.getElem().find(".title .more-mod").fadeIn(function(){
$(this).find(".tag").on("click",function(){
var root = $(this).next() ;
root.empty() ;
$.each(that._getItemListByStatus("2"),function(i,data){
$("").text(data["text"])
.on("click",function(){
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
}) ;
}
else{
alert("不能添加任何模块，目前已经是最大数量！") ;
}
})
.appendTo(root) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
} ;
tabProto._render = function(data){
var that = this ;
var item = $("").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
데이터["index"] = item.index() ;
item.on("클릭",function(){
that._setCurrent($(this).index()) ;
that._getContent(data["url"]).done(function(result){
that._setContent(결과) ;
})
.fail(함수(){
throw new Error("Net Error !") ;
});
})
.data("항목",data) ;
if("2" == 데이터["상태"]){
item.hide() ;
}
if("1" == 데이터["showClose"]){
$("X")
.on("클릭",function(){
if(win.confirm("是否删除此项?")){
that._deleteItem(항목) ;
거짓을 반환 ; // 阻止冒泡
}
})
.appendTo(항목) ;
}
} ;
ui.createTab = 함수(elem,opts){
var 탭 = 새 탭(elem,opts) ;
tab.init() ;
리턴 탭 ;
} ;
})(jQuery) ;
<본문>
大熊君{{bb}} - DXJ UI ------ 탭
添加school生信息
更多模块
2, CSS
코드 복사 코드는 다음과 같습니다.
.dxj-ui-hd {
패딩:0px ;
여백 : 0 자동;
여백 상단:30px;
너비:780px;
높이:60px;
줄 높이: 60px;
배경: #3385ff;
색상:#fff;
글꼴 모음: "微软雅黑" ;
글꼴 크기: 28px;
텍스트 정렬: 중앙;
글꼴 두께:굵게;
}
.dxj-ui-bd {
패딩:0px ;
여백 : 0 자동;
너비:778px;
패딩탑 : 30px ;
패딩 바닥 : 30px ;
오버플로: 숨김;
테두리:1px 솔리드 #3385ff;
}
.dxj-ui-bd #탭 {
패딩:0px ;
여백 : 0 자동;
너비:720px;
오버플로: 숨김;
위치:상대;
}
.dxj-ui-bd #tab .title {
너비:720px;
오버플로: 숨김;
border-bottom:2px solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
너비:160px;
높이:32px;
줄 높이: 32px;
배경: #DC143C;
색상:#fff;
글꼴 모음: "微软雅黑" ;
글꼴 크기: 14px;
텍스트 정렬: 중앙;
글꼴 두께:굵게;
부동 : 왼쪽;
커서:포인터;
}
.dxj-ui-bd #tab .title .more-mod {
오버플로:숨김;
테두리:1px 솔리드 #DC143C;
너비:70px;
위치:절대;
오른쪽:0;
여백 오른쪽:6px;
디스플레이:없음;
}
.dxj-ui-bd #tab .title .more-mod .tag{
높이:32px;
줄 높이:32px;
너비:70px;
배경: #DC143C;
색상:#fff;
글꼴 계열: arial ;
글꼴 크기: 12px;
텍스트 정렬: 중앙;
커서:포인터;
}
.dxj-ui-bd #tab .title .more-mod .mods {
오버플로:숨김;
너비:70px;
디스플레이:없음;
}
.dxj-ui-bd #tab .title .more-mod .mods div {
높이:24px;
줄 높이:24px;
너비:62px;
글꼴 계열: arial ;
글꼴 크기: 12px;
커서:포인터;
왼쪽 패딩:10px;
}
.dxj-ui-bd #tab .title .items {
높이:32px;
너비:480px;
오버플로: 숨김;
부동 : 왼쪽;
}
.dxj-ui-bd #tab .title .items div {
패딩:0px;
여백-왼쪽:10px;
너비:84px;
높이:32px;
줄 높이: 32px;
배경: #3385ff;
색상:#fff;
글꼴 계열: arial ;
글꼴 크기: 12px;
텍스트 정렬: 중앙;
위치:상대;
부동 : 왼쪽;
커서:포인터;
}
.dxj-ui-bd #tab .title .items div span.del {
너비:16px;
높이:16px;
줄 높이: 16px;
디스플레이:블록;
배경: #DC143C;
위치:절대;
오른쪽:0 ;
상단:0;
커서:포인터;
}
.dxj-ui-bd #tab .content {
너비:716px;
패딩 상단:30px;
오버플로: 숨김;
테두리:2px 솔리드 #3385ff;
테두리 상단:0px;
최소 높이:130px;
텍스트 정렬:가운데;
}
.dxj-ui-bd #tab .content 테이블 {
여백 : 0 자동 ;
}
.dxj-ui-bd #tab .content div.c {
패딩탑 : 20px ;
왼쪽 패딩:20px;
배경:#eee;
높이:140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
여백 상단 : 10px ;
글꼴 계열: arial ;
글꼴 크기: 12px;
}
.dxj-ui-bd #tab .console-panel {
너비:716px;
패딩 상단:20px;
패딩 바닥:20px;
오버플로: 숨김;
테두리:2px 솔리드 #3385ff;
테두리 상단:0px;
border-bottom:2px solid #3385ff;
배경:#fff;
디스플레이:없음;
}
.활성 {
글꼴 두께:굵게 ;
}
3,bigbear.js
复主代码 代码如下:
(function($){
var win = window ;
var bb = win.bigbear = win.bigbear || {
ui : {}
} ;
var ui = bb.ui = {} ;
var Tab = function(elem,opts){
this.elem = elem ;
this.opts = opts ;
} ;
var tabProto = Tab.prototype ;
/* update time 2015 1/26 15:36 */
tabProto._isDisplayMax = function(size){
var displayMax = this.getOpts()["displayMax"] || 5 ;
return (size <= displayMax) ? true : false ;
} ;
tabProto._isEmptyResult = function(){
if(!this.getOpts()["result"].length){
return false ;
}
return true ;
} ;
tabProto._saveOrUpdateStatus = function(item,status){
item["status"] = status ;
} ;
tabProto._getItemListByStatus = function(status){
var list = [] ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(status == item["status"]){
list.push(item) ;
}
}) ;
return list ;
} ;
tabProto._getStatusByIndex = function(index){
var status = null ;
var result = this.getOpts()["result"] ;
$.each(result,function(i,item){
if(index == item["index"]){
status = item["status"] ;
}
}) ;
return status ;
} ;
tabProto._renderConsolePanel = function(status){
var that = this ;
var root = that.getElem().find(".console-panel") ;
this._resetConsolePanel() ;
$.each(that._getItemListByStatus(status),function(i,item){
var elem = $("").appendTo(루트) ;
$("")
.data("항목",항목)
.appendTo(elem) ;
$("").text(item["text"]).appendTo(elem) ;
}) ;
if(root.find("div").size()){
$("")
.on("클릭",function(){
var data = root.find("input[type=radio]:checked").data("item") ;
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
})
.trigger("클릭") ;
}
그렇지 않으면{
that._saveOrUpdateStatus(data,"2") ;
}
that.getElem().find(".title .adder").trigger("클릭") ;
})
.appendTo(루트) ;
}
그렇지 않으면{
root.text("暂无任何可添加的项目!") ;
}
} ;
/* 업데이트 시간 2015년 1/26 15:36 */
tabProto._setCurrent = 함수(색인){
var items = this.getElem().find(".title .items div").removeClass("active") ;
items.eq(index).addClass("active") ;
var 내용 = this.getElem().find(".content .c").hide() ;
내용.eq(index).show() ;
} ;
tabProto.getElem = 함수(){
this.elem을 반환하세요 ;
} ;
tabProto.getOpts = function(){
this.opts를 반환하세요 ;
} ;
tabProto._resetContent = function(){
this.getElem().find(".content").html("") ;
} ;
tabProto._setContent = 함수(html){
this.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = 함수(url){
$.ajax({
반환 url : url
}) ;
} ;
tabProto._deleteItem = 함수(elem){
var that = this ;
this.getElem().find(".title .items div")
.eq(elem.index())
.fadeOut(함수(){
that._resetContent() ;
that._saveOrUpdateStatus(elem.data("item"),"0") ;
that._triggerItem(elem.index() + 1) ;
}) ;
} ;
tabProto._triggerItem = function(next){
var nextStatus = this._getStatusByIndex(next) ;
var items = this.getElem().find(".title .items div") ;
next = items.eq(next) ;
if(next.size() && "1" == nextStatus){ //后继dom节点存在
next.trigger("click") ;
}
else{
items.eq(0).trigger("click") ;
}
} ;
tabProto._resetConsolePanel = function(){
this.getElem().find(".console-panel").empty() ;
} ;
tabProto.init = function(){
if(this._isEmptyResult()){
this._setContent("暂无任何模块!") ;
}
var that = this ;
this.getElem().find(".title .adder")
.text("+" + this.getOpts()["buttonText"])
.on("click",function(){
that.getElem().find(".console-panel").slideToggle(function(){
that._renderConsolePanel("0") ;
}) ;
}) ;
$.each(this.getOpts()["result"],function(i,item){
if(that._isDisplayMax(i + 1)){
that._saveOrUpdateStatus(item,"1") ;
}
else{
that._saveOrUpdateStatus(item,"2") ;
}
that._render(item) ;
}) ;
if(!that._isDisplayMax(this.getOpts()["result"].length)){
this.getElem().find(".title .more-mod").fadeIn(function(){
$(this).find(".tag").on("click",function(){
var root = $(this).next() ;
root.empty() ;
$.each(that._getItemListByStatus("2"),function(i,data){
$("").text(data["text"])
.on("click",function(){
if(that._getItemListByStatus("1").length < that.getOpts()["displayMax"]){
that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
that._saveOrUpdateStatus(data,"1") ;
}) ;
}
else{
alert("不能添加任何模块，目前已经是最大数量！") ;
}
})
.appendTo(root) ;
}) ;
root.toggle() ;
}) ;
});
}
this.getElem().find(".title .items div")
.eq(0)
.trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
} ;
tabProto._render = function(data){
var that = this ;
var item = $("").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
데이터["index"] = item.index() ;
item.on("클릭",function(){
that._setCurrent($(this).index()) ;
that._getContent(data["url"]).done(function(result){
that._setContent(결과) ;
})
.fail(함수(){
throw new Error("Net Error !") ;
});
})
.data("항목",data) ;
if("2" == 데이터["상태"]){
item.hide() ;
}
if("1" == 데이터["showClose"]){
$("X")
.on("클릭",function(){
if(win.confirm("是否删除此项?")){
that._deleteItem(항목) ;
거짓을 반환 ; // 阻止冒泡
}
})
.appendTo(항목) ;
}
} ;
ui.createTab = 함수(elem,opts){
var 탭 = 새 탭(elem,opts) ;
tab.init() ;
리턴 탭 ;
} ;
})(jQuery) ;
（4），最后总结
(1) ，면向对象적 思考方式합리분리析功能需求。
(2),以类的方来组织我们的插件逻辑。
(3), 不断寀(3), 不断设计进行实例, 如何进行审过对 不要设计过島, 要游刃有余, 推荐过程化设计与면向对象思想设计상합합。
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.