SlideFieldset Plugin for jQuery

This is my first released jQuery plugin.  The goal is simple -- to add a plus or minus symbol in front of the legend text and make the <fieldset> collapsibile.

To use this plugin, please wrap your whole fieldset content into a <div>, then add references to jquery.slidefieldset.js and jquery.slidefieldset.css.  The style file needs plus.gif and minus.gif, so please keep them under the same folder with jquery.slidefieldset.css.

Use $(...).slideFieldset() to make fieldsets collapsible, here is the sample.

<head>
    <title>Slide Fieldset Sample</title>
    <link href="style/jquery.slidefieldset.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="js/jquery.slidefieldset.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#fsTest,#fsTest2").slideFieldset();
        });
    </script>
</head>
<body>
<fieldset id="fsTest">
<legend>Label</legend>
<div>Content</div>
</fieldset>
<fieldset id="fsTest2">
<legend>Label</legend>
<div>Content</div>
</fieldset>
</body>

【中文摘要】

這是我第一次發表jQuery Plugin,程式很簡單,用途也很單純。就是在<fieldset>的<legend>前方加上一個+/-符號,點選之後可以將<fieldset>的內容收合起來節省空間。

使用時,請先用一個<div>將fieldset的所有內容包起來,然後再參照jquery.slidefieldset.js與jquery.slidefieldset.css,接著$(...).slideFieldset()就可以讓你的fieldset變身成一台"小摺" XD。由於會用到plus.gif與minus.gif兩個圖檔,請將這個圖檔也放在jquery.slidefieldset.css所在目錄下。

如果發現使用上的問題,請在此留言。

Published 21 April 2009 09:08 AM 由 Jeffrey
Filed under:


意見

# Will 保哥 said on 20 April, 2009 09:15 PM

建議可以把圖檔檔名改成 jquery.slidefieldset.plus.gif 與 jquery.slidefieldset.minus.gif,避免圖檔與現有網站內的圖檔名衝突。

# kenlai said on 21 April, 2009 03:51 AM

我發現若碰到網站頻寬或速度上的問題,有可能導致圖片會delay出現,像我貼圖的這樣:http://yfrog.com/0jclassbgp

不曉得若是用兩個css class去切換,是否能免去每次點擊都要下載一次圖的缺點, 而保留圖的cache? 還是有比較好的方式?

小弟的ajax網站目前也有這種情況,但已經改不動了,自己把js寫得太瑣碎了.... :p

# kenlai said on 21 April, 2009 07:14 AM

另外,提供下載的檔案似乎是zip了兩次,第一層裡面是不含副檔名的檔案,改成zip檔後也可以正常解出.

# kenlai said on 21 April, 2009 08:10 AM

自問自答:

以上我的推測是錯的, 我刻意將css class裡的圖檔path使用本站的path, 切換css class時, 發生的行為和原demo相同,切換時一樣都是回傳http 304, 無法有加速載入的效果.

但額外有個好處是使用css class切換, 可以不用在js裡牽涉外觀, 要改外觀時從css下手就好, 不過這個作法應該是見仁見智.

找不到大大的email, 所以小弟就自行上傳到暫存空間(只能放30天)提供您及各位先進參考:

ultrashare.net/.../SlideFieldset_kenlai

小弟其實也沒很熟jquery, 希望各位大大指教。

# Jeffrey said on 21 April, 2009 03:28 PM

to 保哥, minus.gif/plus.gif是向Treeview plugin借來的,如果plugin有專屬CSS目錄時可不必考慮同名問題。若要彙整多組CSS在同一目錄時,您的建議較佳。

to kenlai, 我現在放Blog的平台會對下載的ZIP檔做HTTP壓縮,而IE解讀上有問題,所以解開後會是另一個ZIP,用Windows內建的解壓縮更慘,會直接說檔案壞了。我有在文章中加註了,感謝提醒。

另外,用兩個Class切換+或-的做法,我想也是可行的。

# Maxi said on 09 June, 2009 09:28 PM

This is really nice.

有沒有可能改天包成server control?

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 

請輸入以上的數字:

搜尋

Go

<April 2009>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
262728293012
3456789
 
RSS
【工商服務】

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


BlogLook Score and Rank

Syndication