JavaScript 플러그인 개발 튜토리얼(5)_javascript 기술

 /* 항목 선택기 */
 #항목 선택기 {
     여백 : 0 자동;
     너비 : 220px ;
     오버플로:숨김;
     테두리:2px 실선 #ccc;
 }
 #item-selector .title {
     테두리 하단:1px 단색 #ccc;
     오버플로:숨김;
 }
 #item-selector .title div {
     너비:190px;
     테두리:0px ;
     색상:#999;
     글꼴 계열: arial ;
     글꼴 크기: 14px;
     높이:28px;
     줄 높이:28px;
     부동:왼쪽;
     커서:포인터;
 }
 #item-selector .title 범위 {
     디스플레이:블록;
     높이:30px;
     줄 높이:30px;
     너비:29px;
     부동:왼쪽;
     텍스트 정렬:가운데;
     테두리 왼쪽:1px 단색 #ccc;
     커서:포인터;
 }
 #item-selector .content {
     너비 : 220px ;
     오버플로:숨김;
 }
 #item-selector .content .items {
     오버플로:숨김;
 }
 #item-selector .content .items div {
     왼쪽 패딩:20px;
     너비 : 200px ;
     높이:32px;
     줄 높이:32px;
     글꼴 모음: "微软雅黑" ;
     글꼴 크기: 14px;
     글꼴 두께:굵게;
     커서:포인터;
 }
 .item-hover {
     배경:#3385ff;
     색상:#fff;
 }

함수 ItemSelector(elem,opts){
    this.elem = 요소 ;
    this.opts = 선택 ;
} ;
var ISProto = ItemSelector.prototype ;
ISProto.getElem = 함수(){
    this.elem을 반환하세요 ;
} ;
ISProto.getOpts = 함수(){
    this.opts를 반환하세요 ;
} ;
/* 데이터 조작*/
ISProto._setCurrent = 함수(현재){
    this.getOpts()["현재"] = 현재 ;
} ;
ISProto.getCurrentValue = 함수(현재){
    return this.getOpts()["현재"] ;
} ;
/* 데이터 조작*/
ISProto.init = 함수(){
    var that = this ;
    this.getOpts()["current"] = null ; // 数据游标
    this._setItemValue(this.getOpts()["currentText"]) ;
    var itemsElem = that.getElem().find(".content .items") ;
    this.getElem().find(".title div").on("click",function(){
        itemsElem.toggle() ;
    }) ;
    this.getElem().find(".title 범위").on("클릭",function(){
        itemsElem.toggle() ;
    }) ;
    $.each(this.getOpts()["items"],function(i,item){
        item["id"] = (new Date().getTime()).toString() ;
        that._render(항목) ;
    }) ;
} ;
ISProto._setItemValue = 함수(값){
    this.getElem().find(".title div").text(value)
} ;
ISProto._render = 함수(항목){
    var that = this ;
    var itemElem = $("")
    .text(항목["텍스트"])
    .attr("id",item["id"]) ;
    if("0" == 항목["비활성화됨"]){
        itemElem.on("클릭",function(){
            var onChange = that.getOpts()["change"] ;
            that.getElem().find(".content .items").hide() ;
            that._setItemValue(item["text"]) ;
            that._setCurrent(항목) ;
            onChange && onChange(항목) ;
        })
        .mouseover(함수(){
            $(this).addClass("item-hover") ;
        })
        .mouseout(함수(){
            $(this).removeClass("item-hover") ;
        }) ;
    }
    그렇지 않으면{
        itemElem.css("color","#ccc").on("click",function(){
            that.getElem().find(".content .items").hide() ;
            that._setItemValue(item["text"]) ;
        }) ;
    }
    itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;