Latest web development tutorials

jQuery UI API - komponen Button (Tombol Widget)

kategori

Widget (widget)

pemakaian

Keterangan: tombol berganti tema dan tombol.

Versi baru: 1.8

komponen Button (tombol Widget) memperkuat fungsi dari unsur-unsur bentuk standar, seperti tombol (tombol), input (masukan), jangkar (anchor), dengan hover yang sesuai (hover) dan aktivasi (aktif) gaya dengan tema tombol.

Selain tombol dasar, tombol radio dan kotak centang (input type radio dan checkbox) juga dapat dikonversi ke sebuah tombol. tag terkait (label) dirancang tombol gaya, memperbarui masukan yang mendasari diklik. Dalam rangka untuk bekerja dengan baik, Anda perlu untuk memasukkan id atribut, dan arahkan ke label (label) adalah for properti. Jangan masukan pada label (label) di dalam, jika tidak maka akan menimbulkan masalah aksesibilitas .

Untuk tombol radio paket, Button juga menyediakan widget tambahan bernama ButtonSet. ButtonSet dengan memilih elemen kontainer (termasuk tombol radio) dan panggilan .buttonset() untuk digunakan. ButtonSet juga menyediakan pengelompokan visual, sehingga ketika ada sebuah tombol dapat mempertimbangkan menggunakannya. Ini memilih semua keturunan dan aplikasi mereka .button() . Anda dapat mengaktifkan dan menonaktifkan satu set tombol, yang akan mengaktifkan dan menonaktifkan semua tombol termasuk. Kehancuran Tombol reli memanggil masing-masing tombol ini destroy metode. Untuk tombol radio dan kotak centang tombol pengelompokan dianjurkan untuk menggunakan dengan legend dari fieldset untuk memberikan label paket diakses.

Bila menggunakan jenis tombol, mengirimkan atau reset input, dukungan terbatas pada teks biasa tanpa label ikon.

theming

komponen Button (tombol Widget) menggunakan framework jQuery UI CSS untuk menentukan tampilan dan nuansa dari gaya. Jika Anda perlu menggunakan tombol gaya tertentu, Anda dapat menggunakan berikut nama kelas CSS:

  • ui-button : elemen DOM mewakili tombol. Elemen ini akan didasarkan pada teks dan ikon untuk menambahkan salah satu pilihan kelas berikut: ui-button-text-only , ui-button-icon-only , ui-button-icons-only , ui-button-text-icons .
    • ui-button-icon-primary : unsur-unsur utama dari ikon tombol untuk tampilan. Hanya ketika ikon utama ikon memberikan pilihan ketika disajikan.
    • ui-button-text : wadah sekitar isi teks tombol.
    • ui-button-icon-secondary : Tampilan tombol sekunder untuk ikon. Hanya ketika ikon sekunder ikon memberikan pilihan ketika disajikan.
  • ui-buttonset : ButtonSet wadah luar.

mengandalkan

informasi tambahan

  • bagian membutuhkan beberapa CSS fungsional, jika tidak maka tidak akan bekerja. Jika Anda membuat tema kustom, menggunakan widget yang ditentukan file CSS sebagai titik awal.

navigasi cepat

选项 方法 事件

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

contoh

Contoh 1:

Sebuah tombol jQuery UI sederhana (Button). 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota tombol (Tombol Widget) Demo </ title>
  <Link rel = "stylesheet" 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>
</ Kepala>
<Body>
 
<Tombol> label tombol </ button>
 
<Script>
$ ( "Button") .button ();
</ Script>
 
</ Body>
</ Html>

Contoh 2:

Sebuah sederhana jQuery UI tombol set (ButtonSet). 

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> anggota tombol (Tombol Widget) Demo </ title>
  <Link rel = "stylesheet" 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>
</ Kepala>
<Body>
 
<Form>
  <Fieldset>
    <Legenda> proyek jQuery favorit </ legend>
    <Div id = "radio">
      <Input type = "radio" id = "mendesis" name = "proyek">
      <Label untuk = "mendesis"> Sizzle </ label>
 
      <Input type = "radio" id = "QUnit" name = "proyek" diperiksa = "diperiksa">
      <Label untuk = "QUnit"> QUnit </ label>
 
      <Input type = "radio" id = "warna" name = "proyek">
      <Label untuk = "warna"> Color </ label>
    </ Div>
  </ Fieldset>
</ Form>
 
<Script>
$ ( "#radio") .buttonset ();
</ Script>
 
</ Body>
</ Html>