Виджет button

Последнее обновление: 28.09.2017

Первый виждет, с которым мы познакомимся - это button. Виджет button создает кнопку и применяется к одиночным элементам. Например:

<html>
    <head>
        <meta charset='utf-8'>
		<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.3.custom.min.css">
        <script src="jquery-2.0.2.min.js"></script>
		<script src="jquery-ui-1.10.3.custom.min.js"></script>
    </head>
    <body>
		<h4>Блок ссылок</h4>
		<p><a class="a_jqui" href="https://google.com">Ссылка 1</a></p>
		<p><a href="https://google.com">Ссылка 2</a></p>
		
		<h4>Блок кнопок</h4>
		<p><button class="button_jqui">Кнопка 1</button></p>
		<p><button>Кнопка 2</button></p>
		 <script type="text/javascript">
		 $(function(){
			
			$('.a_jqui').button().click(function(e){
				e.preventDefault();
				alert('Виджет button');
			});
			$('.button_jqui').button();
		 });
		 </script>
    </body>
</html>

В итоге после действия виджета button первая ссылка получит следующую разметку:

<a aria-disabled="false" role="button" class="a_jqui ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
href="https://google.com"><span class="ui-button-text">Ссылка 1</span></a>

В итоге визуально это будет выглядеть так:

Виджет button в jquery

В зависимости от выбранной темы подключаемых силей jquery-ui внешний вид создаваемых кнопок может немного отличаться, однако мы также сами можем настроить стиль. Например, на приведенном выше изображении видно, что кнопки слишком большие, и мы можем сделать их меньше, установив свойства у класса ui-button:

<style>
	.ui-button {font-size: 13px;}
</style>

Методы виджета button

Мы можем управлять виджетом button через ряд методов:

  • button("disable"): делает кнопку недоступной

    $(function(){
		
	$('.a_jqui').button().click(function(e){
		e.preventDefault();
		$('.button_jqui').button('disable');
	});
	$('.button_jqui').button();
});

    Обратите внимание, что если ранее не был применен к элементам виджет button, то нельзя будет использовать его методы.

  • button("enable"): делает кнопку доступной для взаимодействия

  • button("destroy"): удаляет функциональность виджета button у элемента

  • button("widget"): возвращает объект jQuery, представляющий виджет (var widget = $(".button_jqui").button("widget");)

  • button("refresh"): обновляет визуальное состояние элемента

  • button("option"): позволяет получить или установить значения свойств кнопки:

    <p><button class="get_option">Получить значение</button></p>
<p><button class="set_option">Установить значение</button></p>
	
<script type="text/javascript">
$(function(){
		
	$('button.get_option').button().click(function(){
		// получаем значение
		var isDisabled=$('button.get_option').button('option', 'disabled');
		console.log(isDisabled);
	});
	$('button.set_option').button().click(function(){
		// устанавливаем значение
		$('button.set_option').button('option', 'disabled', true);
	});
});
</script>

    Для получения значения в качестве второго параметра после "option" передается название свойства, которое надо получить. А для установки добавляется третий параметр, который указывает на новое значение свойства, переданного во втором параметре.

Свойства виджета button

Кроме методов у виджета button определено также несколько свойств.

  • Свойство disabled. Выше мы уже использовали это свойство для отключения кнопки. Но кроме того, мы можем использовать следующий синтаксис для его установки: $('button.get_option').button({disabled:true})

  • Свойство label: это свойство устанавливает надпись кнопки. ($('button.get_option').button({label:'Кнопка 1'})). Если в разметке html кнопки задано изначальная надпись, то установка свойства label заменяет ее.

  • Свойство icons устанавливает иконку на кнопке. Весь список возможных иконок вы можете найти на офсайте по адресу https://api.jqueryui.com/theming/icons/. В загружаемом пакете с jquery-ui эти иконки находятся в папке css/images.

    <button class="help">Помощь</button>
<script type="text/javascript">
$(function(){
	$('button.help').button({icons: { secondary: "ui-icon-help" }});
});
</script>

    В данном случае устанавливается иконка после текста кнопки:

    Если нам надо установить иконку перед текстом, то используется опция primary: $('button.help').button({icons: { primary: "ui-icon-help" }});. Также при желании можно задать иконки до и после текста, использовав сразу две опции.

  • Свойство showLabel указывает, должна ли отображаться надпись на кнопке. $('button.get_option').button({showLabel:false}) - в данном случае, если для кнопки установлено свойство icons, то есть заданы иконки, то надпись не будет отображаться, а будет отображаться заданная иконка. Если свойство icons не указано, то свойство showLabel игнорируется.

Группа кнопок и buttonset

Если виджет button позволяет создать кнопку из одного элемента, то buttonset применяется для создания группы кнопок. Например, мы можем создать группу флажков (checkbox) или переключателей (radiobutton). При этом buttonset применяется не к самим кнопкам, а к их контейнерам:

<div id="langs">
	<input type="radio" id="java" name="lang" checked><label for="java">Java</label>
	<input type="radio" id="csharp" name="lang"><label for="csharp">C#</label>
	<input type="radio" id="php" name="lang"><label for="php">PHP</label></p>
</div>
<script type="text/javascript">
$(function(){
		
	$('#langs').buttonset();
});
</script>

Аналогично мы можем установить виджет и для группы флажков.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850