第一個自製的JQuery Plugin - Flex Bar with JQuery & CSS

今天,終於完成人生第一個自製的JQuery Plugin,該Plugin命名為Flex Bar,很不吸引的名字吧。其實因為實在想不到甚麼好名字給它,所以就乾脆以它實現到的功能作為名字。主要功能是選單列表能因應選單容器的高或闊來顯示適當的項目,不夠位置顯示的項目會以另一列表彈出顯示。

Flex Bar with JQuery & CSS

FlexBarThumb

最初是因為工作需要一個這樣的效果,網上很不幸找不到相關的功能,剛好那時候自己對撰寫JQuery Plugin並沒有很熟悉,藉著這次能學習的機會,所以有了自己實現該功能的念頭。

因為當時只是學習階段並沒有做的很好,所以最終沒有拿來使用。直至最近想起了它,不想把它當成孤兒,所以又再拿出來修改把所有功能完善。經這次修改加入了更多可設定參數,讓使用者能方便和有彈性地運用。

DEMO

【使用教學】

步驟一-載入插件的CSS樣式和Javascript主程式

  <link rel="stylesheet" media="screen" type="text/css" href="css/jquery.flexbar.css" /> <!-- Flex Bar樣式 -->
  <link rel="stylesheet" media="screen" type="text/css" href="css/media-queries.css" />
  <script type="text/javascript" src="js/jquery.js"></script> <!-- Flex Bar依賴JQuery庫運作 -->
  <script type="text/javascript" src="js/jquery.flexbar.js"></script> <!-- Flex Bar主程式 -->

步驟二-使用插件的HTML列表格式

<ul id="menu1"> <!-- class內為自訂義列表樣式 -->
    <li><a href="">選項1</a></li>
    <li><a href="">選項2</a></li>
    <li><a href="">選項3</a></li>
    <!-- more -->
    <li><a href="">選項29</a></li>
    <li><a href="">選項30</a></li>
</ul>

步驟三-呼叫使用

$flex = $("ul#menu1").FlexBar(); /* 預設模式 */

[預設參數和可選用參數]
text - 更多按鈕顯示標籤
direction - 列表顯示模式,水平、垂直
subbarClass - 更多列表的Class
subbarDisplayType - 更多列表內選項的顯示方式
subbarDisplayWidth - 更多列表寬度
wrapPosition - 更多列表顯示位置

有需要或感興趣的人歡迎使用,使用後可以在這說出您的感想或意見,您們的支持是我進步的原動力。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

*

驗證碼 * Time limit is exhausted. Please reload CAPTCHA.

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料