jquery-ui 대화 상자에서 사용자 정의 위젯을 파생하는 방법

Question

jquery-ui 위젯을 만들고 싶습니다.이 방법에 대해 가장 잘 알고 있습니다.

위젯은 jquery-ui 대화 상자에서 호스팅되는 일부 데이터의 상태를 관리합니다.

맞춤 위젯을 만들면 위젯 생성 기능에서 일부 요소를 위젯 대상에 추가 한 다음 내 위젯 대상에서 대화 위젯을 호출합니다.

또는

JQuery와 - UI 대화 상자에서 상속 단지 그것의 내용의 일부를 대체 할 수있는 방법이 있나요?

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

하지만, 슬라이더 등 때문에, 예를 들어 대화 상자를 사용하여 권장하지 않는 게 좋을 :

Answer 1

다른 위젯을 확장하는 방법이있다 버튼 세트는 버튼 위젯의 존재 여부에 의존하며 요소가 확장 버튼 인 위젯의 인스턴스인지 인식하지 못합니다. 따라서 새로운 버튼 위젯을 새로 만들면 엉망인 레이아웃과 DOM으로 이어집니다. 위젯의 일부를 오버라이드하는 것도 중요합니다. 위젯 확장 메커니즘은 그리 오래 전에 도입 된 것이 아니라 일부 위젯이 이미 존재했을 때 도입되었습니다. 개발자는이 기능을 염두에 두지 않았으므로 여전히 문제가있을 수 있습니다. 내 위젯을 집계합니다 (첫 번째 옵션). $.Widget을 확장하고 요소도 대화 상자로 만듭니다. 그런 다음 대화 상자와 사용자 정의 위젯간에 동기화해야하는 속성의 이벤트 리스너를 추가합니다.

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

(당신이 부모를 구축하고 당신이 무엇을하는지 아는 제외) 다른 위젯을 확장보다 더 강력한이 방법하지만, 너무 단점입니다 있습니다. 예 : 집계 된 위젯의 설정 옵션을 허용 하시겠습니까? 아니면 일부만 설정할 수 있습니까? 또는 이들 중 아무 것도 수행하지 않고 사용자가 사용자 정의 위젯에서 처리되지 않는 모든 항목에 대해 대화 상자를 호출하도록 강요합니까? 나는 두 번째 옵션을 선호한다 : 적어도 솔직히 말해서, 당신의 위젯은 가질 수없는 것들을 약속하지 않기 때문에,하지만 당신은 한 번, 다른 위젯을 부를지도 모르기 때문에 그것은 추한 것이다.

아직 해결책이 만족스럽지 않지만 위젯을 확장하면 jQuery UI 소스를 패치하거나 추한 해킹을 작성하는 새로운 문제가 발생할 수 있습니다.

(나는이 질문이 1 년 전임에주의를 기울였습니다. 질문자는 더 이상이 문제가 없을 수도 있습니다.하지만 이미 위의 모든 내용을 적어두고 게시하지 않는 것이 좋지 않다고 생각합니다.)