<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=11">
<meta name="keywords" content="">
<meta name="description" content="">
<title id="title">jquery ui效果-accordion手風琴</title>
<link type="text/css" rel="stylesheet" href="css/base.css">
<link type="text/css" rel="stylesheet" href="css/jquery-ui.min.css">
<style type="text/css">
#accordion{width: 200px;height: auto !important;min-height:100px;}
</style>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
section 1
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<ul>
<li>12</li>
<li>22</li>
<li>33</li>
<li>33</li>
<li>33</li>
</ul>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
section 3
</div>
<h3><a href="#">Section 4</a></h3>
<div>
section 4
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script language="javascript">
$(function(){
$("#accordion").accordion({
active:false, // 這個參數是設置默認選項的，默認情況下是0，也就是第一個
animated:'slide', //animated 這個參數是設置動畫效果 默認選項是‘slide’,不使用動畫效果（設置false）,使用'bounceslide'和'easeslide'需要UI Effects Core
autoHeight: false,
collapsible:true, // 是否所有的邏輯組都可以收縮，默認爲 false.
fillSpace:true,
clearStyle: true
});
$('#accordion').bind('accordionchange', function(event, ui) {
ui.newHeader='hello'; // jQuery 對象, 激活 header
ui.oldHeader='Section 1';// jQuery 對象, 之前 header
});
});
</script>
<!--在初始化的時候，還可以設置手風琴的屬性。-->
<!--active, 用來指定/獲取默認激活的邏輯組，默認爲 0。-->
<!--可以設置爲 boolean 類型，如果設置爲 false, 那麼，默認沒有打開邏輯組。-->
<!--也可以爲 number 類型，默認爲 0。指定默認打開的邏輯組。-->
<!--animated, 默認的動畫效果，默認爲 slide。-->
<!--autoHeight, 如果設置爲真，那麼，每個組的高度都回被設置爲最高的組的高度。默認爲 true. 否則，以各組實際的高度爲準。-->
<!--collapsible, 是否所有的邏輯組都可以收縮，默認爲 false.-->
<!--event, 展開/收縮使用的事件，默認爲 click, 還可以使用 mouseover，當鼠標覆蓋在標題上的時候進行收縮和展開。-->
<!--fillSpace, 是否填充父元素，默認爲 false. 設置後將會覆蓋 autoHeight 的設置。-->
<!--header, 默認的父元素爲 h3, 如果不是的話，可以配置這個選擇器。-->
<!--icons,標題上使用的圖標，默認爲：-->
<!--{ 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }-->
<!--2 事件-->
<!--2.1 change事件 accordion改變時觸發的事件，有兩種綁定方法-->
<!--第一種：-->
<!--$('#accordion').bind('accordionchange', function(event, ui) {-->
<!--ui.newHeader // jQuery 對象, 激活 header-->
<!--ui.oldHeader // jQuery 對象, 之前 header-->
<!--ui.newContent // jQuery 對象, 激活 content-->
<!--ui.oldContent // jQuery 對象, 之前 content-->
<!--});這種方法在前面的例子中已經都有嘍~~-->
<!--第二種：-->
<!--$('#accordion').accordion({-->
<!--change: function(event, ui) { ... }-->
<!--}); 看清楚了吧。哈哈。-->
<!--3 方法-->
<!--3.1 destroy ：毀滅地球...-->
<!--使用方法：.accordion( 'destroy' )-->
<!--3.2 disable：accordion不可用，使之無效。-->
<!--使用方法：.accordion('disable')-->
<!--3.3 enable： 可用，使之有效，使用方法：略...-->
<!--3.4 option：參數，使用方法：前面都已經用過了，例：.accordion( 'option' , optionName , [value] )-->
<!--3.5 activate：也是設置默認選項，和參數active 作用一樣。例：.accordion( 'activate' , index )-->
</body>
</html>jquery ui效果-accordion手風琴
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章