JQuery UI API - Button компонента (кнопка Widget)

категория

Виджеты (Widgets)

использование

Описание: themable кнопки и кнопки.

Новая версия: 1.8

Компонент Button (кнопка Widget) усилить функциональность стандартных элементов формы, такие как кнопки (кнопка), вход (вход), якоря (анкер), с соответствующим висения (зависания) и активации (активного) стиля к теме кнопки.

В дополнение к основным кнопкам, радио-кнопки и флажки (тип ввода радио и поле для галочки) также могут быть преобразованы в кнопки. Связанные теги (метки) предназначен стили кнопок, обновить основной вход щелкнул. Для того , чтобы работать должным образом , вам потребуется ввести 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-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 внешнего контейнера.

полагаться

• Ядро пользовательского интерфейса (UI ядра)
• Библиотеки компонентов (Widget Factory)

дополнительная информация

• Часть требует некоторой функциональной CSS, в противном случае она не будет работать. Если вы создаете собственную тему, используйте виджет указанный файл CSS в качестве отправной точки.

Быстрая навигация

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

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

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

// getter
var icons = $( ".selector" ).button( "option", "icons" );
 
// setter
$( ".selector" ).button( "option", "icons", { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } );
	

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

// getter
var label = $( ".selector" ).button( "option", "label" );
 
// setter
$( ".selector" ).button( "option", "label", "custom label" );
	

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

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

$( ".selector" ).button( "destroy" );
	

$( ".selector" ).button( "disable" );
	

$( ".selector" ).button( "enable" );
	

var isDisabled = $( ".selector" ).button( "option", "disabled" );
	

var options = $( ".selector" ).button( "option" );
	

$( ".selector" ).button( "option", "disabled", true );
	

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

$( ".selector" ).button( "refresh" );
	

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

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

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

примеров

Простая кнопка JQuery UI (кнопка).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> член (кнопка Widget) Demo </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
 
<Кнопка> Метка кнопки </ кнопка>
 
<Script>
$ ( "Button") .button ();
</ Script>
 
</ Body>
</ HTML>

Посмотреть демо

Простой JQuery UI кнопки набора (Buttonset).

<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
  <Meta Charset = "UTF-8">
  <Title> член (кнопка Widget) Demo </ title>
  <Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script SRC = "// code.jquery.com/jquery-1.10.2.js"> </ скрипт>
  <Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
</ Head>
<Body>
 
<Форма>
  <Fieldset>
    <Легенда> любимый проект JQuery </ легенда>
    <Div ID = "радио">
      <Тип входного = "радио" ID = "шипение" имя = "Проект">
      <Ярлык = "шипение"> Сиззле </ метка>
 
      <Тип входного = "радио" ID = "QUnit" имя = "Проект" проверено = "проверено">
      <Ярлык = "QUnit"> QUnit </ метка>
 
      <Тип входного = "радио" ID = имя "цвет" = "Проект">
      <Ярлык = "цвет"> Цвет </ метка>
    </ Div>
  </ Fieldset>
</ Форма>
 
<Script>
$ ( "#radio") .buttonset ();
</ Script>
 
</ Body>
</ HTML>

Посмотреть демо