Semantic UI всплывающее окно с UI флажок - PullRequest
Новая
       9

Semantic UI всплывающее окно с UI флажок

0 голосов
/ 20 февраля 2019

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

Я использую JQuery с версиями Semantic UI JS и CSS: 

https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js

Вот мой код

HTML 

<!-- UI Checkbox -->
<div class="ui checkbox">
  <input type="checkbox" id="popUpCheckBox">
  <label>PopUp Checkbox</label>
</div>

<!-- PopUp DIV -->
<div class="ui flowing popup">
  <div class="ui grid">
    <div class="row">
      <div class="column">
        Column 1
      </div>
      <div class="column">
        Column 2
      </div>
      <div class="column">
        Column 3
      </div>
      <div class="column">
        Column 4
      </div>
    </div>
  </div>
</div>

JQuery 

$(".ui.checkbox").checkbox({
  onChecked() {
    $(".checkbox").popup({
      popup: $(".flowing.popup"),
      position: "bottom center"
    });
  },
  onUnchecked() {
    $(".flowing.popup").remove();
  }
});

1 Ответ

0 голосов
/ 20 февраля 2019

Существует параметр всплывающего окна on, который можно установить на "manual", чтобы предотвратить отображение всплывающего окна при наведении: 

$(".ui.checkbox").checkbox({
  onChecked() {
    $(".checkbox").popup({
      popup: $(".flowing.popup"),
      position: "bottom center",
      on: "manual"  //the default is "hover"
    });
    $(".checkbox").popup("show");  //show the popup manually
  },
  onUnchecked() {
    $(".flowing.popup").remove();
  }
});

https://next.plnkr.co/edit/0GwhfmiXbYoYxue6?open=lib%2Fscript.js

...