發布兩款JQ小插件（圖片查看器 + 分類選擇器），開源 - vajoy－IT工程師數位筆記本

文章出處

圖片查看器，github地址：https://github.com/VaJoy/imgViewer

效果如下：

這款當初大概寫了2小時，有點匆忙地趕出來的，使用的接口很簡單：

$.bindViewer(".viewer-item");

它的實現其實也沒啥復雜的原理，唯一覺得可說的地方是圖片展開的過程 —— 從小變大動態過程的實現。主要是靠這一段代碼實現的：

$(this).css({"top": win_h / 2 + sroll_t, "margin-left": sroll_l - 50, "margin-top": "-50px", "width": "100px", "height": "100px", "opacity": "0"})
           .animate({"opacity": "1", "margin-left": -img_w / 2, "margin-top": -img_h / 2, "width": img_w, "height": img_h}, 300, function () {  //...

也就是先用 .css() 將它縮小和定位到中間（如上代碼我們先把寬高均縮到100px），再通過 .animate() 把它放大，具體數值通過一些小學數學的計算就能得出的（畢竟圖片寬高、窗口大小等數值都是可知的），這里不贅言。

接著是一款分類選擇器，github地址：https://github.com/VaJoy/categorySelector

效果如下：

使用接口如下：

$("XX").bindCategory(option);

其中 option 的可選值如下：

var option = {
            data: [   //數據
                {"id": "1", "name": "游戲", "items": [
                    {"id": "21", "name": "益智游戲"},
                    {"id": "22", "name": "角色扮演"},
                    {"id": "23", "name": "兒童游戲"}
                ]},
                {"id": "2", "name": "書籍", "items": [
                    {"id": "31", "name": "地圖雛形"},
                    {"id": "32", "name": "商務理財"},
                    {"id": "33", "name": "浪漫偶像"},
                    {"id": "34", "name": "社交人文"},
                    {"id": "35", "name": "兒童教學"},
                    {"id": "36", "name": "建筑工程"},
                    {"id": "37", "name": "科學技術"}
                ]},
                {"id": "3", "name": "應用", "items": [
                    {"id": "50", "name": "網絡工具"},
                    {"id": "52", "name": "系統必備"},
                    {"id": "53", "name": "輔助工具"}
                ]}
            ],
            theme: "#2cbaa0", //主題顏色
            title: "請選擇類別",  //彈出框標題
            emptyText:"", //如果初始值為空，可自定義初始內容
            itemNum: 3,   //最多可選擇的個數
            groupTitle_enable: true,  //小組標題是否可選
            splitor: ",", //分隔符
            callback: !1,  //回調
            emptyEnable:!1  //是否選項可為空
        };

具體功能建議配合 demo.html 來查看。

這款插件是今天趕出來的，暫時還沒測到什么bug，如果有bug歡迎issues上提。之前測到一個問題，發現有個文本樣式在IE和chrome都執行的好好的，偏偏火狐下無效，折騰了點時間才發現原來是 font:12px/1.2 "Arial","Microsoft Yahei" 被我寫成了 font:12px/1.2 "Arial" "Microsoft Yahei" 。

插件的源碼其實也基本寫滿相關注釋了，仔細研究下很容易理解其原理。個人覺得插件最繁瑣的地方還是對樣式的處理，個人覺得這塊可以有四種處理方案：

⑴ 像bootstrap那樣分離個獨立的XX.css文件出來供用戶選擇，但這種方式意味著要用戶再引入一個樣式文件（如果是供用戶切換主題倒是推薦這種方式）；

⑵ 直接內聯寫在元素內，比如$elem.css("XX","XX")、$("<div style='XXX'></div>")。這種方式比較常用，樣式優先級也最高，但會讓代碼看著亂糟糟的；

⑶ 生成一個style標簽，比如$("<style>XXXX</style>")，再插到head去，這樣代碼會好看一點，不過一來要防止重復插入該style標簽，二來是給元素加上對應的類名，維護起來的話，倒是沒有⑵那么直觀，三來則是可能污染別人的類名；

⑷ 寫個api供用戶參考，讓用戶自己在頁面上寫對應的樣式。這樣對用戶而言定制性更高些，但是感覺比⑴更麻煩，不夠人性化。

個人還是使用⑵多一點，當然如果復用很高的樣式，可以靠⑶來解決。

上述兩款插件都很輕巧，功能也單一少冗余，有興趣的朋友可以試著使用它們，或者對它們進行功能擴展。

具體的實例請參照對應的html頁面文件。

共勉~

donate