Как скрыть точку переключателя в виджете buttonset с помощью jQuery -UI? - PullRequest
Новая
       13

Как скрыть точку переключателя в виджете buttonset с помощью jQuery -UI?

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

Долгое время сайт, который я поддерживаю, использовал jQuery -UI v1.11.2. Я решил обновить до последней версии, которая в настоящее время v1.12.1. После обновления я заметил, что мои jquery -ui кнопочные наборы (которые в основном являются переключателями) теперь показывают маленькую точку. Ранее этой точки не было.

Я перешел к официальной справочной документации jQuery -UI для кнопок . Оказывается, у их примера теперь есть эти точки. Я думаю, что это новый взгляд.

enter image description here

Ну, я хочу старый взгляд назад. Без точек.

Как я могу заставить эти точки исчезнуть?

1 Ответ

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

Этот виджет устарел, вместо него используйте Controlgroup.

Предложите использовать classes.

Укажите дополнительные классы для добавления к элементам виджета. , Любой из классов, указанных в разделе «Тематика», можно использовать в качестве ключей для переопределения их значения. Чтобы узнать больше об этой опции, ознакомьтесь со статьей Learn об этой опции.

Это дает вам возможность более напрямую изменять CSS элемента внутри виджета. «Точка» создается путем изменения цвета фона span, а затем присвоения ему границы, чтобы уменьшить «точку». 

$(function() {
  $("#radio").controlgroup({
    classes: {
      "ui-controlgroup": "nodot"
    }
  });
});
div.nodot label.ui-checkboxradio-checked .ui-icon-background {
  border: 0 solid #aaaaaa;
  background-color: #aaaaaa;
  width: 16px;
  height: 16px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<form>
  <fieldset>
    <legend>Favorite jQuery Project</legend>
    <div id="radio">
      <input type="radio" id="sizzle" name="project">
      <label for="sizzle">Sizzle</label>
      <input type="radio" id="qunit" name="project" checked="checked">
      <label for="qunit">QUnit</label>
      <input type="radio" id="color" name="project">
      <label for="color">Color</label>
    </div>
  </fieldset>
</form>

По-прежнему применяется эффект парения, который добавляет box-shadow, который я не смог найти.

...