Easy Accordion 高度靈活的水平折疊式選單
 |
| Easy Accordion 實際執行畫面 |
使用方法：
第一步 先載入程式所需要的檔案
//使用Google ajax API 直接連結 jQuery 1.8.2的min版本
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
//Easy Accordion 的主程式碼
<script type="text/javascript" src="scripts/jquery.easyAccordion.js"></script>
第二步 設計本範例的 CSS
html{font-size:62.5%}
body{font-size:1.2em;color:#294f88}
.sample{margin:30px;border:1px solid #92cdec;background:#d7e7ff;padding:30px}
h1{margin:0 0 20px 0;padding:0;font-size:2em;}
h2{margin:40px 0 20px 0;padding:0;font-size:1.6em;}
.easy-accordion h2{margin:0px 0 20px 0;padding:0;font-size:1.6em;}
p{font-size:1.2em;line-height:170%;margin-bottom:20px}
.easy-accordion{display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px; /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
dd p{line-height:120%}
#accordion-1{width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-1 dl{width:800px;height:245px}
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}
#accordion-2{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-2 h2{font-size:2.5em;margin-top:10px}
#accordion-2 dl{width:700px;height:195px}
#accordion-2 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-2 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-2 dt.hover{color:#68889b;}
#accordion-2 dt.active.hover{color:#fff}
#accordion-2 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-2 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-2 .active .slide-number{color:#fff}
#accordion-2 a{color:#68889b}
#accordion-2 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
#accordion-3{width:700px;height:195px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-3 h2{font-size:2.5em;margin-top:10px}
#accordion-3 dl{width:700px;height:195px}
#accordion-3 dt{height:56px;line-height:44px;text-align:right;padding:10px 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-2.jpg) 0 0 no-repeat;color:#26526c}
#accordion-3 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-2.jpg) 0 0 no-repeat}
#accordion-3 dt.hover{color:#68889b;}
#accordion-3 dt.active.hover{color:#fff}
#accordion-3 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-3 .slide-number{color:#68889b;left:13px;font-weight:bold}
#accordion-3 .active .slide-number{color:#fff}
#accordion-3 a{color:#68889b}
#accordion-3 dd img{float:right;margin:0 0 0 30px;position:relative;top:-20px}
第三步 做三個範例的折疊式選單
<div class="sample">
<div id="accordion-1"><!--第一個範例-->
<dl>
<dt>第一個選項</dt>
<dd>第一個內容</dd>
<dt>第二個選項</dt>
<dd>第二個內容</dd>
<dt>第三個選項</dt>
<dd>第三個內容</dd>
<dt>第四個選項</dt>
<dd>第四個內容</dd>
<dt>第五個選項</dt>
<dd>第五個內容</dd>
<dt>第六個選項</dt>
<dd>第六個內容</dd>
</dl>
</div>
<div id="accordion-2"><!--第二個範例-->
<dl>
<dt>第一個選項</dt>
<dd>第一個內容</dd>
<dt>第二個選項</dt>
<dd>第二個內容</dd>
<dt>第三個選項</dt>
<dd>第三個內容</dd>
<dt>第四個選項</dt>
<dd>第四個內容</dd>
</dl>
</div>
<div id="accordion-3"><!--第三個範例-->
<dl>
<dt>第一個選項</dt>
<dd>第一個內容</dd>
<dt>第二個選項</dt>
<dd>第二個內容</dd>
<dt>第三個選項</dt>
<dd>第三個內容</dd>
<dt>第四個選項</dt>
<dd>第四個內容</dd>
</dl>
</div>
</div>
第四步 使用 JavaScript 啟動程式
$(function () {
$('#accordion-1').easyAccordion({
autoStart: true,
slideInterval: 3000
});
$('#accordion-2').easyAccordion({
autoStart: false
});
$('#accordion-3').easyAccordion({
autoStart: true, //自動換下一張
slideInterval: 5000, //換下一張的間隔秒數
slideNum:false //是否顯示數字
});
});
作者網站：http://www.madeincima.it/en/articles/resources-and-tools/easy-accordion-plugin/
檔案大小：239 KB(包含範例)
檔案下載：http://www.madeincima.it/download/samples/jquery/easyAccordion/jQuery-easyAccordion.zip
檔案備份：下載
0 意見