Bootstarp創造可折疊的元件_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

Bootstarp創造可折疊的元件_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:14 PM

折疊組件

本文將學習如何透過 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 過渡效果也已執行完畢），此事件被觸發。

以上就是本文的全部內容，希望對大家的學習有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。