jquery UI виджет кнопки наследования - PullRequest
Новая
       32

jquery UI виджет кнопки наследования

0 голосов
/ 28 января 2020

Я пытаюсь создать новый виджет на основе виджета кнопки и хотел бы узнать, как изменить стиль кнопки существующей кнопки jquery пользовательского интерфейса, если она уже создана, или создать новую кнопку jquery, если это не так. Как я могу проверить, был ли он уже создан, и если у него есть, как, например, изменить стиль?

Например, изменение существующей кнопки jquery ... Я хочу получить доступ к buttonElement

this.buttonElement.removeClass('ui-corner-all');

, но она не работает.

, но это работает на существующей кнопке jquery ...

this.element.on('click', function(){...});

Я знаю, что могу использовать

_create: function(){ this_super();}

для создания новой кнопки, и я могу легко получить доступ к buttonElement ... но, как я уже говорил ранее, если кнопка уже существует, она создает 2 jquery кнопки. вот так ...

<span class="ui-button-text"><span class="ui-button-text">Yes</span></span>

когда это должно быть только <span class="ui-button-text">Yes</span>.

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

Отредактируйте, чтобы добавить пример кода: HTML: 

<label for="testcb" >Yes</label>
<input type="checkbox" id="testcb" name="testcb"/>

JS: 

var checkbox=$('body').find(':checkbox');
checkbox.each(function(){
  $(this).button();
})

Jquery виджет пользовательского интерфейса: 

$.widget( "new.checkbox", $.ui.button,{
  _create: function(){
    this._super();
  }
})

Результат: добавляет удвоение, которое имеет эффект удвоения стилей, примененных к кнопке 

<span class="ui-button-text">
  <span class="ui-button-text">Yes</span>
</span>

Я знаю, что могу просто добавьте $('#testcb').button('destroy');, но я бы хотел сделать это в виджете, обнаружив, добавлен ли элемент ui.button или нет. Если он уже создан, я бы хотел изменить элемент testcb. Я также знаю, что buttonElement - это значение, которое создает кнопка ui.button, которое можно изменить, но я не могу «добраться» до него из своего виджета.

Надеюсь, это прояснит ситуацию.

1 Ответ

1 голос
/ 29 января 2020

widget () Возвращает: jQuery

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

См. Подробнее: https://api.jqueryui.com/button/#method -виджет

Вы можете изменить виджет следующим образом. 

$(function() {
  $("input:checkbox").each(function() {
    $(this).button();
    var b = $(this).button("widget");
    b.removeClass("ui-corner-all");
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="testcb">Yes</label>
<input type="checkbox" id="testcb" name="testcb" />
...