Skip to main content
조회 수 15836 추천 수 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>




  1. jQuery UI widgets 종류 찾기 그리고 XE 적용하기

    Date2011.12.17 CategoryUI Bygeusgod Views13487
    Read More
  2. XE 기본 jQuery UI 바꿔보기

    Date2011.12.17 CategoryUI Bygeusgod Views14598
    Read More
  3. Xpressengine jQuery 탭 기능 사용하기

    Date2010.12.31 CategoryUI By종스 Views15836
    Read More
Board Pagination Prev 1 Next
/ 1