Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Section 3
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
Section 4
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
</script>
請把下列 HTML 語法寫入到欲出現之編輯區域：
<style>
.accclass122801 {
font-family: Verdana, '新細明體';
font-size: 15px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 1.6;
}
</style>
請將html置於欲編輯之處：
<div id="accordion">
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 1</h3>
<div>
<div class="accclass122801">內文一<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 2</h3>
<div>
<div class="accclass122801">內文二<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 3</h3>
<div>
<div class="accclass122801">內文三<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 4</h3>
<div>
<div class="accclass122801"> 內文四。<br>
</div>
</div>
<h3 style="font-weight: bold; letter-spacing: 0.2em;">說明標題 5</h3>
<div>
<div class="accclass122801"> 內文五。<br>
</div>
</div>
</div>
影音教學：
驅動程式更動範例
<script>
$(function() {
$( ".accordion0828" ).accordion({
heightStyle: "content",
active: 2,
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" },
classes: {
"ui-accordion": "highlight uiacchange",
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom",
"ui-accordion-content-active": "uacachange"
}
});
});
</script>
<style>
.uiacchange {
width: 70%;
}
.uacachange:hover {
background-color: rgba(255, 237, 151, 0.4);
}
</style>
範例呈現
Section 1
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
Section 2
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
Section 3
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
- List item one
- List item two
- List item three
Section 4
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
更動 accordion 中互動變化的 icon
$( ".selector" ).accordion({
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" }
});
紅字部分是所選擇icon的名稱。
更多icon選擇的選項，如下圖，請到此參看。Click!!
格區域的高度選項
$( ".selector" ).accordion({
heightStyle: "content"
});
說明：
"auto": All panels will be set to the height of the tallest panel.
"fill": Expand to the available height based on the accordion's parent height.
"content": Each panel will be only as tall as its content.
使某一個格區域預先設定 開啟
$( ".selector" ).accordion({
active: 2
});
說明：
0是第一個。
使 Accordion 布局變化的 class 使用，以下 default 值：
$( ".selector" ).accordion({
classes: {
"ui-accordion": "highlight",
"ui-accordion-header": "ui-corner-top",
"ui-accordion-header-collapsed": "ui-corner-all",
"ui-accordion-content": "ui-corner-bottom"
}
});
說明：
ui-accordion: The outer container of the accordion.
ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class.
ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.
沒有留言:
張貼留言