【jQuery】smartMenu右鍵自訂操作功能表外掛程式(似web QQ)

標籤：style   blog   http   color   使用   io   java   strong   ar   

一、這是什麼樣的一個外掛程式

瀏覽器預設的右鍵選項有時候並不是我們所需要的，我們希望瀏覽器的右鍵選項菜單更智能，可以靈活自訂。比較有代表性的就是web QQ，例如下面：

QQ郵箱中也是有此功能。

顯然這種東西貌似還是蠻強大與實用的，於是我就抽空寫了個可以右鍵自訂操作功能表的jQuery外掛程式 – smartMenu，直接一行代碼綁定，就可以讓我們輕鬆實現頁面元素的自訂上下文功能。至於具體如何實用與綁定，就是本文的的主要內容，也即是下文即將介紹的內容。

 二、外掛程式效果、大小、使用等簡介

效果
首先，肯定的，自訂的操作功能表是右鍵右鍵某元素（或直接空白處）出現的，其UI風格我沿用了web QQ的相關樣式（企鵝的視覺設計還是很贊的），支援分組以及多級菜單，如下效果：

為了使實現原理簡單，代碼精簡，其二級菜單的一些互動細節與我們平時使用的軟體的多級菜單是有差異的：例如dreamweaver軟體，滑鼠從二級菜單上移出的時候，只要不經過一級菜單，整個二級菜單還是顯示的；但是，這裡的右鍵菜單，如果滑鼠移出二級菜單，無論你是從哪個方向哪個位置移出，這個二級菜單都會隱藏。該差異您可以在下面展示的demo中細細體會。

大小
這個外掛程式的功能看上去很帶感，但是實際上其大小很小，非壓縮版本4~5K的樣子，YUI compressor壓縮後2K出頭，所以，該外掛程式只能算是個實用的小外掛程式而已。

使用
此外掛程式使用不需要任何圖片資源，但是需要調用一段CSS樣式，你可以在頭部放入如下的一段CSS檔案引入代碼：

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/smartMenu.css" type="text/css" />

指令碼部分，顯然，jQuery庫以及外掛程式指令碼是少不了的，類似下面的調用：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-smartMenu.js"></script>

注意：smartMenu外掛程式需要jQuery1.4+以上版本支援，暫不向下相容。

外掛程式的方法名是smartMenu，顧名思意“聰明的菜單”，其實當初想命名為”contextMenu”，但是考慮到這個名字不好記，而易於同類外掛程式命名衝突，於是就取了個相對本土化，草根化的名字”smartMenu”。加上參數使用為：封裝器.smartMenu(data, options)。其中參數data是必須的，這個參數包含了右鍵顯示的文字內容，以及相關的方法，具體資料格式下面會詳細介紹；參數options可選，相關API下面會具體展示。
先舉個超簡單的使用執行個體吧：

$("#test").smartMenu(data);

上面一行代碼實現的效果就是右鍵頁面上id為test的元素後，會按照data參數提供的資料內容顯示相應的右鍵操作功能表。

三、資源下載以及demo示範

如果您想直接下載指令檔，可以狠狠地點擊這裡：jquery-smartMenu.js（右鍵 – [目標|連結]另存新檔），壓縮mini版本為：jquery-smartMenu-min.js

或者您可以下載附帶demo的打包的zip源檔案：jquery-smartMenu.zip

demo執行個體
本文提供兩個demo執行個體頁面。
您可以狠狠地點擊這裡：jQuery smartMenu外掛程式處理圖片demo

這個demo頁面的自訂右鍵菜單主要綁定在了張含韻小姐年輕時候的圖片上，右鍵圖片，你會發現我們可以對圖片樣式進行設定，比方說，邊框啦，內邊距啦，或者是背景色啦。例如，我們來個5像素深灰藍描邊：

點擊菜單後圖片邊緣就長成這個樣子了：

另外該頁面點擊空白還會出現類似下面的效果：

這個是綁在body標籤上的自訂右鍵菜單，其作用純測試：冒泡的處理是否正確；最大文字個數限制等。

關於另外一個demo頁面，您可以狠狠地點擊這裡：jQuery smartMenu外掛程式與QQ郵箱功能demo

這個demo頁面也是本文打包的zip源檔案中的demo頁面，是模仿QQ郵箱收件匣郵件清單操作功能表互動效果的一個執行個體頁面，其長相大致如下：

這個demo頁面互動相對複雜些，因為其右鍵出現的菜單是隨著選擇的列表不同而有所差異的，這種差異主要體現在“標示讀取”和“標記為未讀”上。
郵件清單如果全部是未讀狀態，則右鍵菜單會顯示“標示讀取”，反之則顯示“標記為未讀”，如混雜則“標示讀取”和“標記為未讀”同時顯示，如下系列所示：

四、smartMenu外掛程式data參數詳解

正如前面提到的，此外掛程式的使用如下：

$(選取器).smartMenu(data, options);

其中$(選取器)元素就是你需要右鍵顯示列表內容的元素。而data參數決定了右鍵顯示的自訂菜單的內容（包括分組，層級等）。這裡就具體講下這個data參數。

首先data參數的結構模型如下：

var data = [[{}, {}, {}], [{}]];

右鍵出現的操作功能表的每一項都是由一個有著固定索引值的對象建立的，這個對象只支援三個關鍵索引值：text, func, data，分別表示菜單文字，點擊菜單的方法，菜單對應的二級菜單資料，例如下面，這是第一個demo版面設定圖片內邊距的對象資料：

{    text: "圖片內間距",    func: function() {        $(this).css("padding", "10px");    }}

對象中的text內容對應的是菜單的文字內容，如果該文字內容超過外掛程式限制的文字個數，菜單會截取文字並在後面添加點點點…，完整文字會以title的形式顯示。
func對應方法，也就是點擊菜單後執行的動作，其中方法中的this指的就是當前綁定自訂右鍵的元素，例如在demo1中this就是指張含韻小姐這張圖片了，於是就可以使用$(this)設定圖片的相關樣式。
data關鍵字一般不與func同時出現，因為含有data關鍵字的功能表項目內建顯示下級菜單的方法。這裡的data關鍵字對應的值的格式與整個外部的data參數格式是一致的，就是一種多級嵌套而已。

很多的對象放在一個數組中，形成一個組。當有多個組的時候，我們右鍵顯示菜單的時候就會發現：每個組和每個組之間會用分隔線分隔開，如標示：

而所有的這些組集合在一個數組中就是本段多介紹的data參數。

最後奉上第一個demo頁面圖片部分的data參數資料內容：

var imageMenuData = [    [{        text: "圖片描邊",        data: [[{            text: "5像素深藍",            func: function() {                $(this).css("border", "5px solid #34538b");            }        }, {            text: "5像素淺藍",            func: function() {                $(this).css("border", "5px solid #a0b3d6");            }        }, {            text: "5像素淡藍",            func: function() {                $(this).css("border", "5px solid #cad5eb");            }        }]]    }, {        text: "圖片內間距",        func: function() {            $(this).css("padding", "10px");        }    }, {        text: "圖片背景色",        func: function() {            $(this).css("background-color", "#beceeb");        }    }],    [{        text: "查看原圖",        func: function() {            var src = $(this).attr("src");            window.open(src.replace("/s512", ""));        }    }]];

五、smartMenu外掛程式API參數詳解

這裡的API參數也就是options參數內容了，具體名稱，作用等參見下表：

jQuery smartMenu外掛程式API參數表

參數名	預設值	相關說明
name	""	字串。操作功能表的名稱，用以區分不同的操作功能表。如果頁面只有一個操作功能表，此參數可預設；如果是多個菜單，此參數必須，否則菜單會出現衝突。
offsetX	2	數值。操作功能表左上方距離滑鼠水平位移距離。
offsetY	2	數值。操作功能表左上方距離滑鼠垂直位移距離。
textLimit	6	數值。操作功能表項目限制顯示的文字個數。如果超出會截取，並以…補全，完成文字以title形式顯示。
beforeShow	$.noop	函數。菜單即將顯示之前執行的回呼函數。$.noop為jQuery 1.4+版本支援，所以，如果你想讓外掛程式向下相容，可設定將外掛程式js中所有的$.noop替換成function() {}
afterShow	$.noop	函數。菜單顯示後執行的回呼函數。

一般情況下，上面的API參數用的比較多的就是name。第二個demo頁面中用到了beforeShow這個API參數，用來在菜單顯示之前改變data資料。

六、jQuery smartMenu外掛程式樣式、類名等

這個外掛程式右鍵菜單的樣式（例如寬度，層級等）全部交給CSS控制了，所以，這個外掛程式的CSS樣式擔當了不少互動的功能。如果脫離smartMenu.css，本外掛程式會顯得很寒磣的。

下表就是外掛程式相關類名以及相對應的含義：

類名	含義與作用
smart_menu_box	每一級菜單最外部容器，決定了容器的寬度以及層級，div標籤
smart_menu_body	菜單的主體，決定了主體的背景色，邊框色以及盒陰影製作效果，div標籤
smart_menu_ul	菜單列表父容器，ul標籤
smart_menu_li	每個菜單清單項目，li標籤
smart_menu_li_separate	分隔菜單組分隔線清單項目，li標籤
smart_menu_a	菜單清單項目主體內容，回應程式法，hover效果等，a標籤
smart_menu_triangle	用來表示含多級菜單的三角，i標籤
smart_menu_a_hover	菜單清單項目主體內容hover狀態樣式，用來讓多級菜單顯示時保持父級功能表項目保持hover狀態，a標籤
smart_menu_li_hover	菜單清單項目經過時添加的類名，用來讓子集菜單容器準確定位，li標籤

上面API參數中提到一個常用的name參數，這個參數會以id名稱應用到菜單最外部容器上，最外部容器id建立規則是："smartMenu_" + name，記住這個規則，這是比較重要的。因為這可以設定不同的右鍵菜單樣式。

舉個很簡單的例子，我們有一個自訂的右鍵菜單內容，菜單裡面顯示的全部都是郵件地址清單，顯然，CSS樣式控制的140像素容器寬度是不夠用的，但是，我們又不能修改smart_menu_box的寬度為200像素（比如），因為這會讓所有的菜單寬度都是200像素。怎麼辦呢，這時候配合name值建立的容器id就發揮作用了，可以靈活定義特殊的操作功能表的樣式。

例如，這個郵件地址操作功能表的name值是"email"，則我們可以通過以下樣式控制其操作功能表的寬度層級什麼的，子項目當然也不在話下：

#smartMenu_email { width: 200px; }

id優先順序高於class，所以，重設smart_menu_box預設的140像素寬度是絕對沒有問題的。

另外，理論上，本外掛程式支援無限層級的菜單。

七、擴充方法

除了API參數外，本外掛程式還裸露了兩個擴充方法，名稱為：$.smartMenu.hide()和$.smartMenu.remove()，其中前者是隱藏右鍵菜單，後者是移除右鍵菜單。如果右鍵的顯示的菜單是動態，在菜單隱藏或是顯示之前，一定要執行一下$.smartMenu.remove()方法，移除菜單內容。這樣，每次右鍵的時候，外掛程式根據新的data重建操作功能表，否則，會直接顯示頁面上緩衝的HTML上下文內容。

這在第二個demo頁面，也就是QQ郵箱互動效果demo頁面中就有$.smartMenu.remove()方法使用的痕迹。

 

轉自：張鑫旭 - http://www.zhangxinxu.com/wordpress/?p=1667

【jQuery】smartMenu右鍵自訂操作功能表外掛程式(似web QQ)