李明哲老師多媒體互動寫作教學: 把紛雜的訊息收納起來：Accordion

jQuery UI 程式寫作練習

讓讀者快速掌握內容大綱

Accordion

把訊息打包乾淨的好方法。

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

Section 3

Section 4

請把下列jQuery程式碼置入到<head>xxx</head>之間或<body>之後：

請把下列驅動碼寫入到<head>xxx</head>之間或<body>之後：

請把下列 HTML 語法寫入到欲出現之編輯區域：

請複製CSS並置於<head>xxx</head>之間或<body>之後：

<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>

原始語法出處：jQuery Accordion

影音教學：

2017年版：進階使用

驅動程式更動範例

<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

Section 2

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

更動 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.

李明哲老師多媒體互動寫作教學

2013年11月15日星期五

把紛雜的訊息收納起來：Accordion

Section 1

Section 2

Section 3

Section 4

Section 1

Section 2

Section 3

Section 4

沒有留言:

張貼留言

2013年11月15日 星期五

把紛雜的訊息收納起來：Accordion

Section 1

Section 2

Section 3

Section 4

Section 1

Section 2

Section 3

Section 4

沒有留言:

張貼留言

2013年11月15日星期五