2013年11月15日 星期五

把紛雜的訊息收納起來：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

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.




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

<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">
請把下列驅動碼寫入到<head>xxx</head>之間或<body>之後：
<script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content"
    });
  });
  </script>

請把下列 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

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.









沒有留言:

張貼留言