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.$"と ちょうどはどう違い"$"ますか？

4

1 に答える 1

2

As you can see in:

doc:

`<!-- Element within a modal, switcher or dropdown -->

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

<script>

$("#myelement").on('display.uk.check', function(){ // custom code to adjust height etc on show }); </script>`

you can avoid UIkit.$('#tabs') and use directly $('#tabs').

You can see in you console UIkit is an object containing a reference to $ or better jQuery.

The snippet:

$(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 に答える