Skip to main content
조회 수 15639 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

머 XE가 기본적으로 jQuery 를 로딩하니...

 

넣고자 하는 곳에서...

 

자바소스와...

 

몇가지 양식에 맞는 태그를 사용하면 되겠다.

 

 

<script type="text/javascript">
jQuery(function(){
 jQuery( "#tabs" ).tabs();
});
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">슬로건</a></li>
        <li><a href="#tabs-2">영상</a></li>
        <li><a href="#tabs-3">홍보대사</a></li>
    </ul>
    <div id="tabs-1">
        <div>슬로건</div>
    </div>
    <div id="tabs-2">
        <div>영상</div>
    </div>
    <div id="tabs-3">
        <div>홍보대사</div>
    </div>
</div>

 

 



마우오버 이벤트를 추가하면... 클릭하지 않아도 탭이 바로 여


jQuery(function(){

$( "#tabs" ).tabs({

event: "mouseover"


});
});





아래 명령어를 추가하면... 탭 내용이 닫혔다. 열렸다 합니다^^

collapsible: true






Ajax 처리는 아래처럼 하시면 됩니다



<script>

$(function() {

$( "#tabs" ).tabs({

ajaxOptions: {

error: function( xhr, status, index, anchor ) {

$( anchor.hash ).html(

"Couldn't load this tab. We'll try to fix this as soon as possible. " +

"If this wouldn't be a demo." );

}

}

});

});

</script>




<div id="tabs">

<ul>

<li><a href="#tabs-1">Preloaded</a></li>

<li><a href="ajax/content1.html">Tab 1</a></li>

<li><a href="ajax/content2.html">Tab 2</a></li>

<li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>

<li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>

</ul>

<div id="tabs-1">

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

</div>

</div>




List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
3 UI jQuery UI widgets 종류 찾기 그리고 XE 적용하기 file geusgod 2011.12.17 13225
2 UI XE 기본 jQuery UI 바꿔보기 geusgod 2011.12.17 8769
» UI Xpressengine jQuery 탭 기능 사용하기 종스 2010.12.31 15639
Board Pagination Prev 1 Next
/ 1