jQuery UI 작동 방식

jQuery UI에는 상태를 유지하는 위젯이 많이 포함되어 있어 일반적인 jQuery 플러그인 사용 패턴과 약간 다릅니다. 설치 방법은 대부분의 jQuery 플러그인과 유사합니다. jQuery UI의 위젯은 공통 API를 제공하는 Widget Factory를 기반으로 생성됩니다. 따라서 하나를 사용하는 방법을 배우면 다른 위젯을 사용하는 방법도 알게 됩니다. 이 튜토리얼에서는 진행률 표시줄 위젯의 코드 예제를 통해 일반적인 기능을 소개합니다.

Installation

위젯의 상태를 추적하기 위해 먼저 위젯의 전체 수명 주기를 소개합니다. 수명주기는 위젯이 설치될 때 시작됩니다. 하나 이상의 요소에 대해서만 플러그인을 호출하면 됩니다. 즉, 위젯이 설치되어 있습니다.

$( "#elem" ).progressbar();

이것은 jQuery 개체의 각 요소를 초기화합니다. 이 경우 요소 ID는 "elem"입니다. 매개변수 없이 .progressbar() 메서드를 호출하기 때문에 위젯은 기본 옵션으로 초기화됩니다. 설치 중에 기본 옵션을 재정의하는 옵션 세트를 전달할 수 있습니다. .progressbar() 方法，小部件则会按照它的默认选项进行初始化。我们可以在安装时传递一组选项，这样既可重写默认选项。

$( "#elem" ).progressbar({ value: 20 });

安装时传递的选项数目多少可根据我们的需要而定。任何我们未传递的选项则都使用它们的默认值。

选项是小部件状态的组成部分，所以我们也可以在安装后再进行设置选项。我们将在后续的 option 方法中介绍这部分内容。

方法

既然小部件已经初始化，我们就可以查询它的状态，或者在小部件上执行动作。所有初始化后的动作都以方法调用的形式进行。为了在小部件上调用一个方法，我们可以向 jQuery 插件传递方法的名称。例如，为了在进度条（progressbar）小部件上调用 value 方法，我们应该使用：

$( "#elem" ).progressbar( "value" );

如果方法接受参数，我们可以在方法名后传递参数。例如，为了传递参数 40 给 value 方法，我们可以使用：

$( "#elem" ).progressbar( "value", 40 );

就像 jQuery 中的其他方法一样，大部分的小部件方法为链接返回 jQuery 对象。

$( "#elem" )
    .progressbar( "value", 90 )
    .addClass( "almost-done" );

公共的方法

每个小部件都有它自己的一套基于小部件所提供功能的方法。然而，有一些方法是所有小部件都共同具有的。

option

正如我们前面所提到的，我们可以在初始化之后通过 option 方法改变选项。例如，我们可以通过调用 option 方法改变 progressbar（进度条）的 value 为 30。

$( "#elem" ).progressbar( "option", "value", 30 );

请注意，这与之前我们调用 value 方法的实例有所不同。在本实例中，我们调用 option 方法，改变 value 选项为 30。

我们也可以为某个选项获取当前的值。

$( "#elem" ).progressbar( "option", "value" );

另外，我们可以通过给 option

$( "#elem" ).progressbar( "option", {
    value: 100,
    disabled: true
});

설치 중에 전달되는 옵션 수는 필요에 따라 결정될 수 있습니다. 우리가 전달하지 않은 모든 옵션에는 기본값이 사용됩니다. 🎜🎜 옵션은 위젯 상태의 일부이므로 설치 후에도 옵션을 설정할 수 있습니다. 이 부분은 이어지는 option 메소드에서 소개하겠습니다. 🎜🎜Methods🎜🎜이제 위젯이 초기화되었으므로 상태를 쿼리하거나 위젯에서 작업을 수행할 수 있습니다. 초기화 이후의 모든 작업은 메서드 호출 형식으로 수행됩니다. 위젯에서 메소드를 호출하기 위해 메소드 이름을 jQuery 플러그인에 전달할 수 있습니다. 예를 들어, 진행률 표시줄 위젯에서 value 메서드를 호출하려면 다음을 사용해야 합니다. 🎜

$( "#elem" ).progressbar( "disable" );

🎜 메서드가 매개변수를 허용하는 경우 메서드 이름 뒤에 매개변수를 전달할 수 있습니다. 예를 들어 40 매개변수를 value 메소드에 전달하려면 다음을 사용할 수 있습니다. 🎜

$( "#elem" ).progressbar( "enable" );

🎜 jQuery의 다른 메소드와 마찬가지로 대부분의 위젯 메소드는 링크 객체에 대해 jQuery를 반환합니다. 🎜

$( "#elem" ).progressbar( "destroy" );

공개 메소드

🎜각 위젯에는 위젯에서 제공하는 기능을 기반으로 하는 자체 메소드 세트가 있습니다. 그러나 모든 위젯에 공통되는 몇 가지 방법이 있습니다. 🎜

옵션

🎜 앞서 언급했듯이 option 메소드를 통해 초기화 후 옵션을 변경할 수 있습니다. 예를 들어 option 메소드를 호출하여 진행률 표시줄의 값을 30으로 변경할 수 있습니다. 🎜

$( "#elem" ).progressbar( "widget" );

🎜value 메서드를 호출했던 이전 인스턴스와 다르다는 점에 유의하세요. 이 예에서는 option 메소드를 호출하고 값 옵션을 30으로 변경합니다. 🎜🎜옵션의 현재 값도 얻을 수 있습니다. 🎜

$( "#elem" ).bind( "progressbarchange", function() {
    alert( "The value has changed!" );
});

🎜또한 option 메소드에 객체를 전달하여 여러 옵션을 한 번에 업데이트할 수 있습니다. 🎜

$( "#elem" ).progressbar({
    change: function() {
        alert( "The value has changed!" );
    }
});

option 메소드에는 .css() 및 .attr( )<과 같은 jQuery 코드의 getter 및 setter와 동일한 플래그가 있음을 알 수 있습니다. /코드>. 유일한 차이점은 문자열 "option"을 첫 번째 인수로 전달해야 한다는 것입니다. option 方法有着与 jQuery 代码中取值器和设置器相同的标志，就像 .css() 和 .attr()。唯一的不同就是您必须传递字符串 "option" 作为第一个参数。

disable

disable 方法禁用小部件。在进度条（progressbar）实例中，这会改变样式让进度条显示为禁用状态。

rrreee

调用 disable 方法等同于设置 disabled 选项为 true。

enable

enable 方法是 disable 方法的对立面。

rrreee

调用 enable 方法等同于设置 disabled 选项为 false。

destroy

如果您不再需要小部件，那么可以销毁它，返回到最初的标记。这意味着小部件生命周期的终止。

rrreee

一旦您销毁了一个小部件，您就不能在该部件上调用任何方法，除非您再次初始化这个小部件。如果您要移除元素，可以直接通过 .remove()，也可以通过 .html() 或 .empty() 修改祖先，小部件会自动销毁。

widget

一些小部件生成包装器元素，或与原始元素断开连接的元素。在下面的实例中，widget 将返回生成的元素。在进度条（progressbar）实例中，没有生成的包装器，widget 方法返回原始的元素。

rrreee

事件

所有的小部件都有跟他们各种行为相关的事件，用于在状态改变时通知您。对于大多数的小部件，当事件被触发时，名称以小部件名称为前缀。例如，我们可以绑定进度条（）的 change 事件，一旦值发生变化时就触发。

rrreee

每个事件都有一个相对应的回调，作为选项进行呈现。我们可以使用进度条（progressbar）的 change 回调，这等同于绑定 progressbarchange 事件。

rrreee

公共的事件

大多数事件是针对特定的小部件，所有的小部件都有一个公共的 create

disable

disable 메소드는 위젯을 비활성화합니다. 진행률 표시줄 인스턴스에서 진행률 표시줄이 비활성화된 것처럼 보이도록 스타일을 변경합니다.