JqueryUI - Кнопка - CoderLessons.com

jQueryUI предоставляет метод button () для преобразования элементов HTML (таких как кнопки, входы и привязки) в тематические кнопки с автоматическим управлением движениями мыши на них, все прозрачно управляется пользовательским интерфейсом jQuery.

Чтобы сгруппировать переключатели, Button также предоставляет дополнительный виджет, называемый Buttonset . Buttonset используется путем выбора элемента контейнера (который содержит переключатели) и вызова .buttonset () .

Синтаксис

Метод button () можно использовать в двух формах:

Метод $ (селектор, контекст) .button (опции)
Метод $ (селектор, контекст) .button («действие», params)

Метод $ (селектор, контекст) .button (опции)

Метод $ (селектор, контекст) .button («действие», params)

Метод $ (селектор, контекст) .button (опции)

Метод button (options) объявляет, что HTML-элемент должен рассматриваться как кнопка. Параметр options — это объект, который определяет поведение и внешний вид кнопки.

Синтаксис

$(selector, context).button (options);

Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:

$(selector, context).button({option1: value1, option2: value2..... });

В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —

Sr.No.	Вариант и описание
1	отключен Эта опция отключает кнопку, установленную в true . По умолчанию его значение равно false . Опция — отключена Эта опция отключает кнопку, установленную в true . По умолчанию его значение равно false . Синтаксис $( ".selector" ).button({ disabled: true });
2	иконки Этот параметр указывает, что один или два значка должны отображаться на кнопке: основные значки слева, дополнительные значки справа. Основной значок идентифицируется основным свойством объекта, а дополнительный значок идентифицируется вторичным свойством. По умолчанию его значение является первичным: null, вторичным: null . Вариант — иконки Этот параметр указывает, что один или два значка должны отображаться на кнопке: основные значки слева, дополнительные значки справа. Основной значок идентифицируется основным свойством объекта, а дополнительный значок идентифицируется вторичным свойством. По умолчанию его значение является первичным: null, вторичным: null . Синтаксис $( ".selector" ).button({ icons: { primary: "ui-icon-gear", secondary: "ui-icon-triangle-1-s" } });
3	этикетка Этот параметр указывает текст, отображаемый на кнопке, которая переопределяет естественную метку. Если опущено, отображается естественная метка для элемента. В случае переключателей и флажков естественная метка является элементом <label>, связанным с элементом управления. По умолчанию его значение равно нулю . Вариант — этикетка Этот параметр указывает текст, отображаемый на кнопке, которая переопределяет естественную метку. Если опущено, отображается естественная метка для элемента. В случае переключателей и флажков естественная метка является элементом <label>, связанным с элементом управления. По умолчанию его значение равно нулю . Синтаксис $( ".selector" ).button({ label: "custom label" });
4	текст Эта опция указывает, должен ли текст отображаться на кнопке. Если указано значение false , текст подавляется, если (и только если) параметр значков указывает хотя бы один значок. По умолчанию его значение равно true . Вариант — текст Эта опция указывает, должен ли текст отображаться на кнопке. Если указано значение false , текст подавляется, если (и только если) параметр значков указывает хотя бы один значок. По умолчанию его значение равно true . Синтаксис $( ".selector" ).button({ text: false });

Эта опция отключает кнопку, установленную в true . По умолчанию его значение равно false .

Опция — отключена

Эта опция отключает кнопку, установленную в true . По умолчанию его значение равно false .

Синтаксис

Этот параметр указывает, что один или два значка должны отображаться на кнопке: основные значки слева, дополнительные значки справа. Основной значок идентифицируется основным свойством объекта, а дополнительный значок идентифицируется вторичным свойством. По умолчанию его значение является первичным: null, вторичным: null .

Вариант — иконки

Синтаксис

Этот параметр указывает текст, отображаемый на кнопке, которая переопределяет естественную метку. Если опущено, отображается естественная метка для элемента. В случае переключателей и флажков естественная метка является элементом <label>, связанным с элементом управления. По умолчанию его значение равно нулю .

Вариант — этикетка

Синтаксис

Эта опция указывает, должен ли текст отображаться на кнопке. Если указано значение false , текст подавляется, если (и только если) параметр значков указывает хотя бы один значок. По умолчанию его значение равно true .

Вариант — текст

Синтаксис

Функциональность по умолчанию

В следующем примере демонстрируется простой пример функциональности виджета кнопки без передачи параметров методу button () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-1, #button-2, #button-3, #button-4" ).button();
            $( "#button-5" ).buttonset();
         });
      </script>
   </head>
   
   <body>
      <button id = "button-1">A button element</button>
      <input id = "button-2" type = "submit" value = "A submit button">
      <a id = "button-3" href = "">An anchor</a>
      <input type = "checkbox"  id = "button-4" >
      <label for = "button-4">Toggle</label>
      <br><br>
      <div id = "button-5">
         <input type = "checkbox" id = "check1">
         <label for = "check1">Left</label>
         <input type = "checkbox" id = "check2">
         <label for = "check2">Middle</label>
         <input type = "checkbox" id = "check3">
         <label for = "check3">Right</label>
      </div>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле buttonexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —

В этом примере демонстрируется разметка, которая может использоваться для кнопок: элемент кнопки, ввод типа submit и привязка.

Использование иконок, текста и отключено

В следующем примере демонстрируется использование двух значков параметров, текстовых и отключенных, в функции кнопок JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-6" ).button({
               icons: {
                  primary: "ui-icon-locked"
               },
               text: false
            });
            $( "#button-7" ).button({
               disabled:true
            });
            $( "#button-8" ).button({
               icons: {
                  primary: "ui-icon-gear",
                  secondary: "ui-icon-triangle-1-s"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-6">
         Button with icon only
      </button>
      <button id = "button-7">
         Button Disabled
      </button>
      <button id = "button-8">
         Button with two icons
      </button>
   </body>
</html>

Здесь вы можете увидеть кнопку с одним значком, кнопку с двумя значками и отключенную кнопку.

Метод $ (селектор, контекст) .button («действие», params)

Метод button («action», params) может выполнять действие над кнопками, например отключение кнопки. Действие указывается в виде строки в первом аргументе (например, «отключить», чтобы отключить кнопку). Проверьте действия, которые можно передать, в следующей таблице.

Синтаксис

$(selector, context).button ("action", params);

В следующей таблице перечислены различные действия, которые можно использовать с этим методом —


$( ".selector" ).button("destroy");
$( ".selector" ).button("disable");
$( ".selector" ).button("enable");
var isDisabled = $( ".selector" ).button( "option", "disabled" );
$( ".selector" ).button("option");
$( ".selector" ).button( "option", "disabled", true );
$( ".selector" ).button( "option", { disabled: true } );
$( ".selector" ).button("refresh");
$( ".selector" ).button("widget");

Sr.No.	Действие и описание
1	уничтожить Это действие полностью удаляет функциональность кнопки элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов. Действие — уничтожить Это действие полностью удаляет функциональность кнопки элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов. Синтаксис $( ".selector" ).button("destroy");
2	запрещать Это действие отключает функциональность кнопки элемента. Этот метод не принимает никаких аргументов. Действие — отключить Это действие отключает функциональность кнопки элемента. Этот метод не принимает никаких аргументов. Синтаксис $( ".selector" ).button("disable");
3	включить Это действие включает функциональность кнопки элемента. Этот метод не принимает никаких аргументов. Действие — включить Это действие включает функциональность кнопки элемента. Этот метод не принимает никаких аргументов. Синтаксис $( ".selector" ).button("enable");
4	опция (optionName) Это действие возвращает значение параметра, указанного в optionName . Где optionName — это строка. Действие — опция (optionName) Это действие возвращает значение параметра, указанного в optionName . Где optionName — это строка. Синтаксис var isDisabled = $( ".selector" ).button( "option", "disabled" );
5	вариант Это действие извлекает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров кнопки. Действие — опция Это действие извлекает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров кнопки. Синтаксис $( ".selector" ).button("option");
6	опция (optionName, значение) Это действие устанавливает значение опции кнопки, связанной с указанным optionName . Действие — опция (optionName, value) Это действие устанавливает значение опции кнопки, связанной с указанным optionName . Где optionName — это имя параметра, который нужно установить, а значение — это значение, которое нужно установить для параметра. Синтаксис $( ".selector" ).button( "option", "disabled", true );
7	вариант (варианты) Это действие устанавливает один или несколько параметров для кнопки. Где параметры — это карта пар «значение-значение» для установки. Действие — опция (варианты) Это действие устанавливает один или несколько параметров для кнопки. Где параметры — это карта пар «значение-значение» для установки. Синтаксис $( ".selector" ).button( "option", { disabled: true } );
8	обновление Это действие обновляет отображение кнопки. Это полезно, когда кнопки обрабатываются программой, и дисплей не обязательно соответствует внутреннему состоянию. Этот метод не принимает никаких аргументов. Действие — обновить Это действие обновляет отображение кнопки. Это полезно, когда кнопки обрабатываются программой, и дисплей не обязательно соответствует внутреннему состоянию. Этот метод не принимает никаких аргументов. Синтаксис $( ".selector" ).button("refresh");
9	виджет Это действие возвращает объект jQuery, содержащий элемент кнопки. Этот метод не принимает никаких аргументов. Действие — виджет Это действие возвращает объект jQuery, содержащий элемент кнопки. Этот метод не принимает никаких аргументов. Синтаксис $( ".selector" ).button("widget");

Это действие полностью удаляет функциональность кнопки элемента. Элементы возвращаются в состояние до инициализации. Этот метод не принимает никаких аргументов.

Действие — уничтожить

Синтаксис

Это действие отключает функциональность кнопки элемента. Этот метод не принимает никаких аргументов.

Действие — отключить

Это действие отключает функциональность кнопки элемента. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие включает функциональность кнопки элемента. Этот метод не принимает никаких аргументов.

Действие — включить

Это действие включает функциональность кнопки элемента. Этот метод не принимает никаких аргументов.

Синтаксис

Это действие возвращает значение параметра, указанного в optionName . Где optionName — это строка.

Действие — опция (optionName)

Это действие возвращает значение параметра, указанного в optionName . Где optionName — это строка.

Синтаксис

Это действие извлекает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров кнопки.

Действие — опция

Синтаксис

Это действие устанавливает значение опции кнопки, связанной с указанным optionName .

Действие — опция (optionName, value)

Это действие устанавливает значение опции кнопки, связанной с указанным optionName . Где optionName — это имя параметра, который нужно установить, а значение — это значение, которое нужно установить для параметра.

Синтаксис

Это действие устанавливает один или несколько параметров для кнопки. Где параметры — это карта пар «значение-значение» для установки.

Действие — опция (варианты)

Синтаксис

Это действие обновляет отображение кнопки. Это полезно, когда кнопки обрабатываются программой, и дисплей не обязательно соответствует внутреннему состоянию. Этот метод не принимает никаких аргументов.

Действие — обновить

Синтаксис

Это действие возвращает объект jQuery, содержащий элемент кнопки. Этот метод не принимает никаких аргументов.

Действие — виджет

Это действие возвращает объект jQuery, содержащий элемент кнопки. Этот метод не принимает никаких аргументов.

Синтаксис

пример

Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование методов destroy () и disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#button-9" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-seek-start"
               }
            });
            $( "#button-9" ).button('destroy');
            $( "#button-10" ).button({
               icons: {
                  primary: "ui-icon-seek-prev"
               }
            });
            $( "#button-10" ).button('disable');
            $( "#button-11" ).button({
               text: false,
               icons: {
                  primary: "ui-icon-play"
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-9">
         I'm destroyed
      </button>
      <button id = "button-10">   
         I'm disabled
      </button>
      <button id = "button-11">
         play
      </button>
   </body>
</html>

Управление событиями на кнопках

В дополнение к методу кнопки (опции), который мы видели в предыдущих разделах, JqueryUI предоставляет методы события, которые запускаются для определенного события. Эти методы событий перечислены ниже —

Sr.No.	Метод и описание события
1	создать (событие, пользовательский интерфейс) Это событие срабатывает при создании кнопки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Событие — создать (событие, пользовательский интерфейс) Это событие срабатывает при создании элемента кнопки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Синтаксис $( ".selector" ).button({ create: function( event, ui ) {} });

Sr.No.

Метод и описание события

создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании кнопки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Событие — создать (событие, пользовательский интерфейс)

Это событие срабатывает при создании элемента кнопки. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .

Синтаксис

пример

В следующем примере демонстрируется использование метода события для функциональности виджета кнопки. Этот пример демонстрирует использование события create .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Buttons functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <style>
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
      
      <script>
         $(function() {
            $( "#button-12" ).button({
               create: function() {
                  $("p#result").html ($("p#result")
                  .html () + "<b>created</b><br>");
               }
            });
         });
      </script>
   </head>
   
   <body>
      <button id = "button-12">
         A button element
      </button>
      <p class = "resultarea" id = result></p>
   </body>
</html>

Давайте сохраним приведенный выше код в HTML-файле buttonexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:

JqueryUI — Кнопка

Синтаксис

Метод $ (селектор, контекст) .button (опции)

Синтаксис

Функциональность по умолчанию

Использование иконок, текста и отключено

Метод $ (селектор, контекст) .button («действие», params)

Синтаксис

пример

Управление событиями на кнопках

пример

Популярные уроки и статьи

Инициализаторы экземпляра в Java объяснены

AJAX - Краткое руководство

TempDB для производительности