jQuery 위젯에서 옵션을 설정하는 방법

Question

Wijmo에서 거의 UNDOCUMENTED가 아닌 확인란 위젯에 대한 옵션을 설정하려고합니다. 위젯 코드는 다음과 같습니다.

(function ($) { 
    "use strict"; 
    var checkboxId = 0; 
    $.widget("wijmo.wijcheckbox", { 
     _csspre: "wijmo-checkbox", 
     _init: function() { 
      var self = this, 
       ele = self.element, 
       o = self.options, 
       checkboxElement, label, targetLabel, boxElement, iconElement; 
      if (ele.is(":checkbox")) { 
       if (!ele.attr("id")) { 
        ele.attr("id", self._csspre + checkboxId); 
        checkboxId += 1; 
       } 
       if (ele.parent().is("label")) { 
        checkboxElement = ele.parent() 
        .wrap("<div class='" + self._csspre + "-inputwrapper'></div>") 
        .parent() 
        .wrap("<div></div>").parent().addClass(self._csspre + " ui-widget"); 
        label = ele.parent(); 
        label.attr("for", ele.attr("id")); 
        checkboxElement.find("." + self._csspre + "-inputwrapper") 
        .append(ele); 
        checkboxElement.append(label); 
       } 
       else { 
        checkboxElement = ele 
        .wrap("<div class='" + self._csspre + "-inputwrapper'></div>") 
        .parent().wrap("<div></div>").parent() 
        .addClass(self._csspre + " ui-widget"); 
       } 
       targetLabel = $("label[for='" + ele.attr("id") + "']"); 
//    if (targetLabel.length > 0) { 
//     checkboxElement.append(targetLabel); 
//     targetLabel.attr("labelsign", "C1"); 
//    } 
       if (ele.is(":disabled")) { 
        self._setOption("disabled", true); 
       } 
       boxElement = $("<div class='" + self._csspre + 
       "-box ui-widget ui-state-" + 
       (o.disabled ? "disabled" : "default") + 
       " ui-corner-all'><span class='" + 
       self._csspre + "-icon'></span></div>"); 
       iconElement = boxElement.children("." + self._csspre + "-icon"); 
       checkboxElement.append(boxElement); 
       ele.data("iconElement", iconElement); 
       ele.data("boxElement", boxElement); 

       boxElement.removeClass(self._csspre + "-relative") 
       .attr("role", "checkbox") 
       .bind("mouseover", function() { 
        ele.mouseover(); 
       }).bind("mouseout", function() { 
        ele.mouseout(); 
       }); 
       if (targetLabel.length === 0 || targetLabel.html() === "") { 
        boxElement.addClass(self._csspre + "-relative"); 
       } 
       ele.bind("click.checkbox", function (e) { 
        self.refresh(e); 
       }).bind("focus.checkbox", function() { 
        if (o.disabled) { 
         return; 
        } 
        boxElement.removeClass("ui-state-default").addClass("ui-state-focus"); 
       }).bind("blur.checkbox", function() { 
        if (o.disabled) { 
         return; 
        } 
        boxElement.removeClass("ui-state-focus").not(".ui-state-hover") 
        .addClass("ui-state-default"); 
       }).bind("keydown.checkbox", function (e) { 
        if (e.keyCode === 32) { 
         if (o.disabled) { 
          return; 
         } 
         self.refresh(); 
        } 
       }); 

       boxElement.bind("click.checkbox", function (e) { 
        ele.get(0).checked = !ele.get(0).checked; 
        ele.change(); 
        ele.focus(); 
        self.refresh(e); 
       }); 

       self.refresh(); 
       checkboxElement.bind("mouseover.checkbox", function (e) { 
        if (o.disabled) { 
         return; 
        } 
        boxElement.removeClass("ui-state-default").addClass("ui-state-hover"); 

       }).bind("mouseout.checkbox", function (e) { 
        if (o.disabled) { 
         return; 
        } 
        boxElement.removeClass("ui-state-hover").not(".ui-state-focus") 
        .addClass("ui-state-default"); 
       }); 
      } 
     }, 

     refresh: function (e) { 
      var self = this; 
      self.element.data("iconElement") 
      .toggleClass("ui-icon ui-icon-check", self.element.get(0).checked); 
      self.element.data("boxElement") 
      .toggleClass("ui-state-active", self.element.get(0).checked) 
      .attr("aria-checked", self.element.get(0).checked); 
      if (e) { 
       e.stopPropagation(); 
      } 
     }, 

     destroy: function() { 
      var self = this, boxelement = self.element.parent().parent(); 
      boxelement.children("div." + self._csspre + "-box").remove(); 
      self.element.unwrap(); 
      self.element.unwrap(); 
      $.Widget.prototype.destroy.apply(self); 
     } 
    }); 
} (jQuery)); 

위젯 팩토리에서 만든 위젯에 옵션을 설정하는 방법을 알려주는 사람이 있습니까? 나에게 조언을 해주는 그 어떤 것도 찾을 수 없다.

는 업데이트 :

나는 전체 코드를 기록했다. 댓글이 달린 부분은 내 의견입니다.

Answer 1

플러그인 (위젯)의 소스 코드를 보면 구성 가능한 옵션 매개 변수가 하나만있는 것으로 보입니다. 플러그인 요소의 disabled 속성이 다른 곳에서 이미 설정되어 "true"로 경우 자동으로 설정하기 때문에

$(document).ready(function() { 
    $(":input[type='checkbox']").wijcheckbox({ 
     disabled: true 
    }); 
}); 

그것은 아마 문서에 언급되지 않은 것 ... 그것은 disabled을라고하면 다음과 같이 사용할 수 있습니다. 원래의 게시물에 영업 이익의 의견에 따라

if (ele.is(":disabled")) { 
    self._setOption("disabled", true); 
} 

---

편집 :

은 "... 나는 코드를 확인하고 내가 좋겠 다음을 설정하는 방법을 알았다면 나는 o = self.options, checkboxElement, label, targetLabel, boxElement, iconElement; 참조 괜찮아 .... "

쉼표 뒤의 항목 목록은의 일부가 아닙니다., self.options 또는 사용자가 구성 할 수있는 옵션 또는 매개 변수 그것들은 플러그인 내부의 추가 변수 선언 일뿐입니다. 환언

이 ...

var self = this, 
    ele = self.element, 
    o = self.options, 
    checkboxElement, label, targetLabel, boxElement, iconElement; 

단지 속기 (더 효율적인 코드) 이것을 ...

var self = this; 
var ele = self.element; 
var o = self.options; 
var checkboxElement; 
var label; 
var targetLabel; 
var boxElement; 
var iconElement; 

o는 옵션을 나타내는 변수 또는 플러그인 매개 변수.