jQuery UI API - ตัวแทนปุ่ม (ปุ่ม Widget)

ก่อนหน้านี้: jQuery UI API สมาชิก - การทำให้สมบูรณ์อัตโนมัติ (การเติมข้อความอัตโนมัติ Widget)

ถัดไป: jQuery UI API - สมาชิกตัวเลือกวัน (datepicker Widget)

หมวดหมู่

การใช้

คำอธิบาย: ปุ่ม themable และปุ่ม

รุ่นใหม่: 1.8

ส่วนประกอบปุ่ม (Widget ปุ่ม) เสริมสร้างการทำงานขององค์ประกอบของแบบฟอร์มมาตรฐานเช่นปุ่ม (ปุ่ม) ที่อินพุต (input), แองเคอ (สมอ) กับโฉบเหมาะสม (เลื่อน) และเปิดใช้งาน (Active) สไตล์กับรูปแบบของปุ่ม

นอกจากนี้ยังมีปุ่มพื้นฐาน, ปุ่มวิทยุและกล่องกา (วิทยุประเภทขาเข้าและช่องทำเครื่องหมาย) นอกจากนี้ยังสามารถแปลงเป็นปุ่ม แท็กที่เกี่ยวข้อง (ฉลาก) ถูกออกแบบรูปแบบปุ่มปรับปรุงการป้อนข้อมูลพื้นฐานคลิก เพื่อที่จะทำงานอย่างถูกต้องคุณจะต้องใส่ id แอตทริบิวต์และชี้ไปที่ป้าย (ป้ายชื่อ) เป็น for สถานที่ให้บริการ อย่าป้อนข้อมูลบนฉลาก (ฉลาก) ภายในมิฉะนั้นจะ ทำให้เกิดปัญหาในการเข้าถึง

สำหรับปุ่มวิทยุแพ็คเก็ตปุ่มนอกจากนี้ยังมีเครื่องมือเพิ่มเติมชื่อ Buttonset Buttonset โดยการเลือกองค์ประกอบภาชนะ (รวมถึงปุ่ม) และโทร .buttonset() ที่จะใช้ Buttonset นอกจากนี้ยังมีการจัดกลุ่มภาพดังนั้นเมื่อมีปุ่มสามารถพิจารณาใช้มัน จะมีการคัดเลือกลูกหลานของพวกเขาและการประยุกต์ใช้ .button() คุณสามารถเปิดและปิดการใช้งานปุ่มชุดซึ่งจะเปิดใช้งานและปิดการใช้งานปุ่มทั้งหมดรวม ทำลายการชุมนุมเรียกปุ่มแต่ละปุ่ม destroy วิธี สำหรับปุ่มวิทยุและช่องทำเครื่องหมายปุ่มการจัดกลุ่มจะแนะนำให้ใช้กับ legend ของ fieldset เพื่อให้ฉลากแพ็คเก็ตที่สามารถเข้าถึงได้

เมื่อใช้ประเภทของปุ่มส่งหรือตั้งค่าการป้อนข้อมูลสนับสนุนจะถูก จำกัด ให้เป็นข้อความธรรมดาโดยไม่ต้องป้ายไอคอน

ชุดรูปแบบ

ส่วนประกอบปุ่ม (ปุ่ม Widget) โดยใช้ กรอบ 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 icons label text	destroy disable enable option refresh widget	create

选项	类型	描述	默认值
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

事件	类型	描述
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 ) {} );

当创建按钮 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 = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สมาชิกปุ่ม (ปุ่ม Widget) สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<ปุ่ม> ป้ายปุ่ม </ ปุ่ม>
 
<script>
$ ( "ปุ่ม") .button ();
</ script>
 
</ body>
</ html>

ตัวอย่างที่ 2:

ง่าย jQuery UI การตั้งค่าปุ่ม (Buttonset)

<! Doctype html>
<html lang = "th">
<head>
  <Meta charset = "UTF-8">
  <title> สมาชิกปุ่ม (ปุ่ม Widget) สาธิต </ title>
  <link rel = "สไตล์ชีต" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src = "// code.jquery.com/jquery-1.10.2.js"> </ script>
  <script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
</ head>
<body>
 
<form>
  <fieldset>
    <ตำนาน> โครงการ jQuery ชื่นชอบ </ ตำนาน>
    <div id = "วิทยุ">
      <ประเภทขาเข้า = "วิทยุ" id = "เสียงดังฉ่า" ชื่อ = "โครงการ">
      <label สำหรับ = "เสียงดังฉ่า"> Sizzle </ label>
 
      <ประเภทขาเข้า = "วิทยุ" id = "qunit" ชื่อ = "โครงการ" การตรวจสอบ = "การตรวจสอบ">
      <label สำหรับ = "qunit"> QUnit </ label>
 
      <ประเภทขาเข้า = "วิทยุ" id = "สี" ชื่อ = "โครงการ">
      <label สำหรับ = "สี"> สี </ label>
    </ div>
  </ fieldset>
</ form>
 
<script>
$ ( "#radio") .buttonset ();
</ script>
 
</ body>
</ html>

ถัดไป: jQuery UI API - สมาชิกตัวเลือกวัน (datepicker Widget)

jQuery UI หลักสูตร

jQuery UI กระทู้

jQuery UI ห้องสมุดองค์ประกอบ

jQuery UI คู่มืออ้างอิง

jQuery UI ตัวอย่าง