0

UIKit 有几个被触发的自定义事件。例如，切换选项卡时，change.uk.tab会触发一个事件 ( https://getuikit.com/docs/tab.html )。问题是我只能在 JQuery 前面"$"加上UIKit.$. 就好像 UIKit 的 jQuery$返回了一个不同的对象。

因此，例如，这将起作用：

UIkit.$('#tabs').on('change.uk.tab', function(e, active, previous) {
    console.log("uk tab changed: " + active.context.id);
});

这是html：

<ul id="tabs" class="uk-tab" data-uk-tab >
    <li id="tabPage1" class="uk-active"><a href="">tabPage1</a></li>
    <li id="tabPage2"><a href="">tabPage2</a></li>
    <li id="tabPage3"><a href="">tabPage3</a></li>
</ul>

但是，如果我要删除"UIkit."并仅使用该"$"对象：

$('#tabs').on('change.uk.tab', function(e, active, previous) {
    console.log("uk tab changed: " + active.context.id);
});

那我就看不到这个change.uk.tab事件了。（也就是说，该console.log行永远不会执行。）这是为什么？"UiKit.$"和 just 和有什么不一样"$"？

4

1 回答 1

2

如您所见：

文档：

`<!-- 模态、切换器或下拉列表中的元素 -->

<div id="myelement" data-uk-check-display>...</div>

<脚本>

$("#myelement").on('display.uk.check', function(){ // 自定义代码来调整显示高度等 }); </脚本>`

你可以避免 UIkit.$('#tabs') 并直接使用 $('#tabs')。

您可以在控制台中看到 UIkit 是一个包含对 $ 或更好的 jQuery 的引用的对象。

片段：

$(function () {
  console.log('UIkit.$.fn.jquery: ' + UIkit.$.fn.jquery);
  console.log('$.fn.jquery: ' + $.fn.jquery);
  $('#tabs').on('change.uk.tab', function(e, active, previous) {
    console.log("uk tab changed: " + active.context.id);
  });
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js"></script>


<ul id="tabs" class="uk-tab" data-uk-tab >
    <li id="tabPage1" class="uk-active"><a href="">tabPage1</a></li>
    <li id="tabPage2"><a href="">tabPage2</a></li>
    <li id="tabPage3"><a href="">tabPage3</a></li>
</ul>

于 2016-10-04T20:43:48.760 回答