"JQuery" Smartmenu right-click to customize context menu plugin (like Web QQ)

One, this is what kind of a plugin

The browser's default right-click option is sometimes not what we need, we want the browser's right-click menu to be smarter and flexible to customize. More representative is the Web QQ, such as the following:

QQ Mailbox also has this function.

Obviously this kind of thing seems to be quite powerful and practical, so I took the time to write a jquery plugin –smartmenu that can right-click a custom context menu, and a direct line of code binding allows us to easily implement the custom context feature of the page element. As to the concrete how practical and binding, is the main content of this article, also is the content that will be introduced later.

Second, plug-in effect, size, use and other introduction

Effect
First of all, for sure, the custom context menu is right-click on an element (or directly in the white space) appears, its UI style I followed the web QQ related style (Penguin visual design is still very good), support groups and multi-level menu, the following effects:

To make the implementation simple, the code is streamlined, some of its two-level menu interaction details are different from the multilevel menu of the software we normally use: for example, Dreamweaver software, when the mouse moves out of the two-level menu, as long as it does not go through a level menu, the entire two-level menu is still displayed, but the right-click menu , the level two menu will be hidden if the mouse moves out of the level two menu, whichever direction you move out. This difference can be experienced in the demo shown below.

Size
This plug-in function looks very sense, but in fact its size is very small, non-compressed version 4~5k appearance, YUI compressor compressed 2K early, so, the plug-in can only be considered a practical small plug-in only.

Use
This plugin uses no image resources, but requires a CSS style to be called, and you can introduce the code into the following CSS file in the header:

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

Script section, obviously, the jquery library and plug-in scripts are indispensable, similar to the following call:

<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>

Note:the Smartmenu plug-in needs to jquery1.4+ above version support, is not backward compatible.

Plug-in method name is Smartmenu, as implies meaning "clever menu", actually originally wanted to name "ContextMenu", but considering the name is not good to remember, and easy to the same kind of plug-in naming conflict, so took a relatively localized, grassroots name "Smartmenu". Plus the parameters used as: 包装器.smartMenu(data, options) . The parameters data are necessary, this parameter contains the right-click display of the text content, as well as related methods, the specific data format is described below, the parameters are options optional, the relevant API will be shown below.
Let's start with a super-simple example:

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

The result of the previous line of code is that the right- id test data Click context menu is displayed according to the data content provided by the parameter, after the element on the page is on.

Third, download resources and demo Demo

If you want to download the script file directly, you can click here: Jquery-smartmenu.js (right-click –[target | link] Save As), compact Mini version: Jquery-smartmenu-min.js

Or you can download the packaged zip source file with Demo: Jquery-smartmenu.zip

Demo instance
This article provides two demo instance pages.
You can ruthlessly click here: JQuery Smartmenu plugin handles picture demo

The custom context menu of this demo page is mainly tied to the picture of Miss Zhang Han Yun's youth, right-click on the picture, and you will find that we can set the picture style, for example, the border, the padding, or the background color. For example, let's take a 5-megapixel dark grey-blue stroke:

When you click on the menu, the edge of the picture looks like this:

In addition, the page click on the blank will also appear similar to the following effect:

This is a custom right-click menu that is tied to the Body tab, and its role is pure testing: whether the bubbling process is correct, the maximum number of characters, and so on.

For another demo page, you can click here: JQuery Smartmenu plugin and QQ mailbox function demo

This demo page is also wrapped in this article zip source files in the demo page, is a QQ mailbox Inbox message list context menu Interactive effect of an instance page, the appearance of the following:

This demo page has a relatively complex interaction because the menu that appears right-click is different from the list of choices, and this difference is mainly reflected in "mark as read" and "Mark as unread".
Mailing list If all is unread, the right-click menu displays "Mark as read" and vice versa, "mark as unread", or "mark as read" and "Mark as unread" as shown in the following series:

Four, Smartmenu plug-in data parameter detailed

As mentioned earlier, this plugin is used as follows:

$ (selector). Smartmenu (data, options);

$(选择器)The elements are the elements that you need to right-click to display the contents of the list. The data parameters determine the contents of the custom menu (including grouping, hierarchy, and so on) that the right-click displays. This is exactly what this parameter is about data .

First, the structure model of the data parameter is as follows:

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

Each item of the context menu that appears right-click is created by an object with a fixed key value, which only supports three key key values: The text, func, data menu text, the menu-click Method, the menu's two-level menu data, for example, this is the first demo page to set the object data for the image padding:

{    text: "In-picture spacing",    func:function () {        $ (this). CSS ("padding", "10px");}    }

The content of the object corresponds to the text text content of the menu, if the text content exceeds the limit of the number of text plug-in, the menu will intercept the text and add a dot point later … , the full text will be title displayed in the form.
funcThe corresponding method, that is, the action executed after the click of the menu, where this refers to the current binding custom right-click element, for example, in Demo1 this refers to Miss Zhang Han Yun this picture, so you can use to $(this) set the image of the relevant style.
dataKeywords generally do not func appear at the same time, because the menu item containing the keyword data comes with a method that displays a submenu. The format of the corresponding value of the keyword here data is consistent with the entire external data parameter format, which is a multilevel nesting.

A lot of objects are placed in an array, forming a group. When there are multiple groups, when we right-click on the menu, we will find that each group and each group will be separated by dividing lines, such as marking:

All of these groups are set in an array, which is the parameter described in this paragraph data .

Finally on the first demo page picture part of the data parameter data content:

var imagemenudata = [    [{        text: ' Picture stroke ',        data: [[{            text: ' 5 pixels deep blue ',            func:function () {                $ (this). css ("Border", "5px solid #34538b")            ,}        }, {            text: "5 pixels Blue",            func:function () {                $ (this). CSS ("Border", " 5px solid #a0b3d6 ")            }        , {            text:" 5 pixels Blue ",            func:function () {                $ (this). CSS (" Border "," 5px Solid #cad5eb ");            }        }]    }, {        text:" Space within picture ",        func:function () {            $ (this). CSS (" padding "," 10px ");        }    }, {        text:" Picture background color ",        func:function () {            $ (this). CSS (" Background-color "," #beceeb "        }    }],    [{        text: "View original",        Func:function () {            var src = $ (this). attr ("src");            window.open (Src.replace ("/s512", ""));        }    ]];

Five, Smartmenu plug-in API parameter detailed

Here the API parameter is the options parameter content, the specific name, function, etc. see the following table:

JQ Uery Smartmenu plug-in API parameter table

	default	related instructions
name	" "	string. The name of the context menu to distinguish between different context menus. If the page has only one context menu, this parameter is default; if it is multiple menus, this parameter must be, otherwise the menu will conflict.
offsetX	2	numeric value. The upper-left corner of the context menu is offset horizontally from the mouse.
offsetY	2	numeric value. The upper-left corner of the context menu is offset vertically from the mouse.
textlimit	6	numeric value. The context menu item limits the number of text displayed. If beyond will intercept, and to ... Complete the text to be displayed in title form.
beforeshow	$.noop	function. The menu is about to display the previously executed callback function. $.noop is supported for the jquery 1.4+ version, so if you want to make the plugin backwards compatible, you can set all the $.noop in the plugin JS to be replaced with function () {}
aftershow	$.noop the	function. The callback function that is executed after the menu is displayed.

In general, the above API parameters used more is name . The second Demo page beforeShow uses this API parameter to change the data before the menu is displayed data .

Vi. jQuery Smartmenu plugin style, class name, etc.

This plugin's right-click menu style (such as width, hierarchy, etc.) is all given to the CSS control, so the CSS style of the plugin has played a lot of interactive functions. If detached smartMenu.css , this plugin will appear very shabby.

The following table is the plugin-related class name and the corresponding meaning:

	meaning and function
smart_menu_box	the outer container of each level menu, which determines the width and level of the container , the div tag
smart_menu_body	menu body, which determines the background color of the body, border color and box shadow effect, div tag
Smart_menu_ul	Menu List parent container, UL tag
smart_menu_li	Each menu list item, Li label
smart_menu_li_separate	delimited menu Group Divider list item, Li label
smart_menu_a	Menu list item body Tolerance, response method, hover effect, etc., a label
smart_menu_triangle	used to represent a triangle with a multilevel menu, I label
smart_menu_a_hover	Menu list item Body content hover state style to keep the parent menu item hover State When the multilevel menu is displayed, a label
smart_menu_li _hover the name of the class to be added when the	menu list item passes, for the Subset menu container to be positioned exactly, Li tag

The above API parameter refers to a common name parameter, this parameter will be applied to the name of the menu on the most external container, the most external container ID creation rule is: "smartMenu_" + name , remember this rule, this is more important. This is because you can set a different right-click menu style.

To give a very simple example, we have a custom right-click menu content, the menu shows all is the mailing address list, obviously, CSS style control of the 140 pixel container width is not enough, but we can not modify smart_menu_box the width of 200 pixels (for example), Because this will make all the menu widths 200 pixels. What to do, name this time the container created by the Mate value id is functioning, and you can flexibly define the style of the special context menu.

For example, the value of this e-mail address context menu name is "email" that we can control the width level of its context menu through the following styles, and of course the child elements are also:

#smartMenu_email {width:200px;}

idPriority is higher class , so resetting the smart_menu_box default 140 pixel width is absolutely no problem.

In addition, in theory, this plugin supports unlimited levels of menus.

Vii. Methods of expansion

In addition to the API parameters, the plugin also exposed two extension methods, the name is: $.smartMenu.hide() and $.smartMenu.remove() , the former is a hidden context menu, the latter is to remove the right-click menu. If the right-click menu is dynamic, before the menu is hidden or displayed, be sure to execute the $.smartMenu.remove() method to remove the menu contents. This way, each time you right-click, the plugin is based on the new data rebuild context menu, otherwise the HTML context content cached on the page is displayed directly.

This in the second demo page, that is, QQ mailbox Interactive effect Demo page, there is a $.smartMenu.remove() way to use the traces.

Turn from: Zhang Xin Asahi-http://www.zhangxinxu.com/wordpress/?p=1667

"JQuery" Smartmenu right-click to customize context menu plugin (like Web QQ)