Latest web development tutorials

jQuery를 UI의 API - Button 구성 요소 (버튼 위젯)

범주

위젯 (위젯)

용법

설명 : themable 버튼과 버튼.

새로운 버전 : 1.8

버튼의 주제에 해당 호버 (마우스 오버) 및 활성화 (활성) 스타일로 Button 구성 요소 (버튼 위젯) 등의 버튼 (단추)와 같은 표준 양식 요소의 기능을 강화, 입력 (입력), 앵커 (닻).

기본적인 버튼뿐만 아니라, 라디오 버튼 및 체크 박스 (입력 형 라디오 및 체크 박스)도 버튼으로 전환 할 수있다. 관련 태그 (라벨) 업데이트 버튼 스타일을 설계 기본이되는 입력은 클릭. 제대로 작동하려면 입력 할 필요가 id 입니다 레이블 (라벨)에 속성 및 지점을 for 속성입니다. 그렇지 않으면 것, 내부의 레이블 (라벨)에 입력하지 마십시오 접근성 문제가 발생할 .

패킷 라디오 버튼의 경우, 버튼은 Buttonset라는 추가 위젯을 제공합니다. (라디오 버튼 포함) 컨테이너 요소를 선택하여 Buttonset 및 통화 .buttonset() 사용. Buttonset 또한 시각적 그룹핑을 제공하므로있을 때 버튼을 사용하는 것도 고려해 볼 수있다. 그것은 모든 자손과 그 응용 프로그램을 선택 .button() . 당신은 포함 된 모든 버튼을 활성화 및 비활성화합니다 버튼 세트를 활성화 및 비활성화 할 수 있습니다. 각 버튼의 호출 파괴 버튼 랠리 destroy 방법. 라디오 버튼과 체크 박스를 들어 버튼 그룹이 함께 사용하는 것이 좋습니다 legend 의 fieldset 접근 패킷 레이블을 제공합니다.

버튼의 종류를 사용하는 경우, 제출하거나 입력을 재설정 지원 아이콘 레이블없이 일반 텍스트로 제한됩니다.

테마

사용 Button 구성 요소 (버튼 위젯) jQuery를 UI CSS 프레임 워크를 그 스타일의 모양과 느낌을 정의 할 수 있습니다. 당신이 지정된 스타일의 버튼을 사용해야하는 경우, 다음과 같은 CSS 클래스 이름을 사용할 수 있습니다 :

  • ui-button 버튼을 나타내는 DOM 요소 :. 이 요소를 기반으로합니다 텍스트 와 아이콘 다음 클래스 옵션 중 하나를 추가 : ui-button-text-only , ui-button-icon-only , ui-button-icons-only , ui-button-text-icons .
    • ui-button-icon-primary : 화면의 버튼 아이콘의 주요 요소입니다. 의 주요 아이콘 경우에만 아이콘 옵션을 제공 제시 할 때.
    • ui-button-text : 버튼의 텍스트 내용 주위에 컨테이너입니다.
    • ui-button-icon-secondary : 아이콘의 보조 디스플레이 버튼. 보조 아이콘 경우에만 아이콘 옵션을 제공 제시 할 때.
  • ui-buttonset Buttonset 외부 용기 :.

의존

추가 정보

  • 부분은 그렇지 않으면 작동하지 않습니다, 일부 기능 CSS가 필요합니다. 맞춤 테마를 작성하는 경우, 시작점으로 지정된 위젯 CSS 파일을 사용한다.

빠른 탐색

选项 方法 事件

选项 类型 描述 默认值
disabled Boolean 如果设置为 true ，则禁用该 button。

代码实例：

初始化带有指定 disabled 选项的 button：

$( ".selector" ).button({ disabled: true });

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).button( "option", "disabled" );
 
// setter
$( ".selector" ).button( "option", "disabled", true );
false
icons Object 要显示的图标，包括带有文本的图标和不带有文本的图标（查看 text 选项）。默认情况下 ，主图标显示在标签文本的左边，副图标显示在右边。显示位置可通过 CSS 进行控制。

primary 和 secondary 属性值必须是 图标 class 名称 ，例如， "ui-icon-gear" 。如果只使用一个图标，则 icons: { primary: "ui-icon-locked" } 。如果使用两个图标，则 icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } 。

代码实例：

初始化带有指定 icons 选项的 button：

$( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });

在初始化后，获取或设置 disabled 选项：

// getter
var icons = $( ".selector" ).button( "option", "icons" );
 
// setter
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } );
{ primary: null, secondary: null }
label String 要显示在按钮中的文本。当未指定时（ null ），则使用元素的 HTML 内容，或者如果元素是一个 submit 或 reset 类型的 input 元素，则使用它的 value 属性，或者如果元素是一个 radio 或 checkbox 类型的 input 元素，则使用相关的 label 元素的 HTML 内容。

代码实例：

初始化带有指定 label 选项的 button：

$( ".selector" ).button({ label: "custom label" });

在初始化后，获取或设置 label 选项：

// getter
var label = $( ".selector" ).button( "option", "label" );
 
// setter
$( ".selector" ).button( "option", "label", "custom label" );
null
text Boolean 是否显示标签。当设置为 false 时，不显示文本，但是此时必须启用 icons 选项，否则 text 选项将被忽略。

代码实例：

初始化带有指定 text 选项的 button：

$( ".selector" ).button({ text: false });

在初始化后，获取或设置 text 选项：

// getter
var text = $( ".selector" ).button( "option", "text" );
 
// setter
$( ".selector" ).button( "option", "text", false );
true

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 button 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

$( ".selector" ).button( "destroy" );
disable() jQuery (plugin only) 禁用 button。
  • 该方法不接受任何参数。

代码实例：

调用 disable 方法：

$( ".selector" ).button( "disable" );
enable() jQuery (plugin only) 启用 button。
  • 该方法不接受任何参数。

代码实例：

调用 enable 方法：

$( ".selector" ).button( "enable" );
option( optionName ) Object 获取当前与指定的 optionName 关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法：

var isDisabled = $( ".selector" ).button( "option", "disabled" );
option() PlainObject 获取一个包含键/值对的对象，键/值对表示当前 button 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法：

var options = $( ".selector" ).button( "option" );
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 button 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法：

$( ".selector" ).button( "option", "disabled", true );
option( options ) jQuery (plugin only) 为 button 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法：

$( ".selector" ).button( "option", { disabled: true } );
refresh() jQuery (plugin only) 刷新按钮的视觉状态。用于在以编程方式改变原生元素的选中状态或禁用状态后更新按钮状态。
  • 该方法不接受任何参数。

代码实例：

调用 refresh 方法：

$( ".selector" ).button( "refresh" );
widget() jQuery 返回一个包含 button 的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例：

调用 widget 方法：

var widget = $( ".selector" ).button( "widget" );

事件 类型 描述
create( event, ui ) buttoncreate 当创建按钮 button 时触发。
  • event
    类型：Event
  • ui
    类型：Object

注意： ui 对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 create 回调的 button：

$( ".selector" ).button({
  create: function( event, ui ) {}
});

绑定一个事件监听器到 buttoncreate 事件：

$( ".selector" ).on( "buttoncreate", function( event, ui ) {} );

예

실시 예 1 :

간단한 jQuery를 UI 버튼 (단추). 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 버튼 부재 (버튼 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<버튼> 버튼 레이블 </ 버튼>
 
<스크립트>
$ ( "버튼") .button ();
</ 스크립트>
 
</ BODY>
</ HTML>

실시 예 2 :

간단한 jQuery를 UI 버튼 세트 (Buttonset). 

<! DOCTYPE html로>
<HTML LANG = "EN">
<헤드>
  <메타 문자 집합 = "UTF-8">
  <제목> 버튼 부재 (버튼 위젯) 데모 </ 제목>
  <링크 REL = "스타일 시트"HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <스크립트 SRC = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <스크립트 SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ 헤드>
<바디>
 
<양식>
  <FIELDSET>
    <전설> 좋아하는 jQuery를 프로젝트 </ 전설>
    <사업부 아이디 = "라디오">
      <입력 유형 = "라디오"ID = "지글 지글"이름 = "프로젝트">
      < "지글 지글"= 대한 라벨> 지글 지글 </ 라벨>
 
      <입력 유형 = "라디오"ID = "qunit"이름 = "프로젝트"= "확인"체크>
      < "qunit"= 대한 라벨> QUnit </ 라벨>
 
      <입력 유형 = "라디오"ID = "색상"이름 = "프로젝트">
      <용 = "색상"라벨> 색상 </ 라벨>
    </ DIV>
  </ FIELDSET>
</ FORM>
 
<스크립트>
$ ( "#radio")를 .buttonset ();
</ 스크립트>
 
</ BODY>
</ HTML>