Bootstarp創造可折疊的元件_javascript技巧
- WBOY原創
- 2016-05-16 15:14:061266瀏覽
本文將學習如何透過 Bootstarp 創建可折疊的元件，具體內容如下
什麼是必需的
您必須引用 jquery.js 和 bootstrap-collapse.js - 這兩個 JavaScript 檔案都位於 docs/assets/js 資料夾內。
您可以在不編寫大量 JavaScript 或不呼叫 JavaScript 的情況下建立可折疊的元件。
實例
第一個實例示範如何不呼叫 JavaScript 來建立可折疊的元件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>collapsible example</title>
<link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Click me to exapand. Click me again to collapse. Part I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Click me to exapand. Click me again to collapse. Part II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
Click me to exapand. Click me again to collapse. Part III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script>
</body>
</html>
解釋
這裡有三點要注意。第一，將 data-toggle="collapse" 新增到您要點擊的連結上，用來展開或折疊元件。
第二，新增一個 href 或一個 data-target 屬性到父元件，它的值為子元件的 id。
第三，加入一個 data-parent 屬性用來創造手風琴式的效果。 data-parent 屬性的值與主容器 div （儲存整個手風琴組件）的 id 屬性的值相同。如果您想要創建一個簡單的折疊組件，不需要像手風琴那麼複雜，就不需要添加這個屬性。
實例
第二個實例示範如何建立簡單的可折疊組件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>collapsible via JavaScript example</title> <link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="myCollapsibleExample"><a href="#demo" data-toggle="collapse">Click me to expand and click me again to collapse.</a></div> <div id="demo" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehe. </div> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script> <script type="text/javascript" src="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js"></script> </body> </html>
透過 JavaScript 呼叫
您可以使用下面的程式碼來透過 JavaScript 觸發折疊。
$(".collapse").collapse()
選項、方法與事件
這裡有一些透過 Bootstrap Collapsible JavaScript 外掛程式使用的選項、方法、事件。具體如下圖所示：
選項
parent:值的類型為 Selector。預設值為 false。當父元素顯示時，父元素下所有的可折疊元素是關閉的。
toggle:值的類型為 Boolean。預設值為 true。當被呼叫時，切換所有的可折疊元素。
toggle:值的類型為 Boolean。預設值為 true。當被呼叫時，切換所有的可折疊元素。
方法
.collapse(options):觸發可折疊內容。接受一個可選的 option 物件。
.collapse('toggle'):展示或隱藏一個可折疊的頁面元素。
.collapse('show'):展示一個可折疊的頁面元素。
.collapse(hide):隱藏一個可折疊的頁面元素。
事件
show:當 show 實例方法被呼叫之後，此事件會立即觸發。
shown:當可折疊頁面元素顯示出來之後（同時 CSS 轉場效果也已執行完畢），此事件被觸發。
hide:當 hide 實例方法被呼叫之後，此事件會立即觸發。
hidden:當可折疊頁面元素隱藏到使用者之後（同時 CSS 過渡效果也已執行完畢），此事件被觸發。
以上就是本文的全部內容，希望對大家的學習有所幫助。