2016-10-04 2 views
0

UIKit에는 해고되는 여러 가지 사용자 지정 이벤트가 있습니다. 예를 들어, 탭을 전환 할 때 change.uk.tab 이벤트가 발생합니다 (https://getuikit.com/docs/tab.html). 문제는 JQuery의 "$"에 UIKit. $를 붙이면 이벤트를 읽을 수 있다는 것입니다. 마치 UIKit의 jquery $가 다른 객체를 반환하는 것과 같습니다. 사용자 지정 UIKit 이벤트를 읽을 수 없습니다.

그래서 예를 들어,이 작동합니다 : 여기
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. $"과 "$"의 차이점은 무엇입니까?

답변

2

당신이 볼 수 있듯이에서 :

doc!

`< ->

< 사업부 아이디 = "myelement"데이터 - 모달, 스위처 또는 드롭 다운 내 요소 확인 표시> ... </div>

< 스크립트>

$ ("# myelement") on ('display.uk.check', function() { // 쇼의 높이를 조정하는 맞춤 코드 }); </스크립트>`

당신은 ('# 탭') $. UIkit를 방지하고 직접 $ ('# 탭')를 사용할 수 있습니다.

콘솔에서 볼 수있는 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>

+1

아, 그래서이 수행 작동합니다. 나는 내 잘못을 본다. 내 HTML에서 "

관련 문제