jquery custom Page Right-click menu and multiple-selection examples

Recently in the project to implement a number of custom effects, such as right-click menu, select All, discontinuous selection, and so on, personally think that the main reason is the logic and event relationship. To implement these, there are ready-made plug-ins that can be used, such as the selectable of the jquery UI.

Right-click menu

When you browse the Web, the right mouse button (or CTRL + the LEFT arrow of the contact template) appears with the browser's default right-click menu item, like this:

But when you want to customize the right button for an element, like this:

You must first disable the browser default menu, you need to listen for ContextMenu events, the key code is as follows:

$ (function () {
$ (' #box '). On (' ContextMenu ', function (event) {
Event.preventdefault ();
$ (this). Trigger (' click ');
$ (' #menulist '). CSS ({
Top:event.pageY,
Left:event.pageX
});
});
$ (' #box '). Click (function () {
$ (' #menulist '). CSS (' Display ', ' block ');
});
})

Select All

The default CTRL + A (Mac Command+a) selects an entire Web page or an editable element that gets focus.

<div id= ' box ' >
<p class= ' First ' > This is a div, this is a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
</div>
<div id= ' other ' >
<p class= ' One ' > This is another div, this is another div,</p>
<p> This is another div, this is another div,</p>
<p> This is another div, this is another div,</p>
<p> This is another div, this is another div,</p>
</div>

If the page only has these two div, presses the ctrl/cmd+a these two div will be selected, if only wants to select Div#box content, the simple way is gives this div to add contenteditable=true. Another way is to listen for keyboard events.

Simulate Div#box all child element p and highlight:

$ (function () {
$ (document). KeyDown (function (event) {
Under Windows is Event.ctrlkey
if (event.metakey && Event.which = 65) {
Event.preventdefault ();
$ (' #box >p '). Trigger (' click ');
}
});
$ (' #box '). On (' click ', ' P ', function () {
$ (this). CSS (' Color ', ' red ');
});
});

Shift to achieve continuous selection

Shift combines the right mouse button to implement a continuous selection of elements, which are briefly simulated here.

<div id= ' box ' class= ' unselect ' >
<p class= ' First ' > This is a div, this is a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
<p> This is a div, it's a div,</p>
</div>

When you hold down SHIFT, the browser has the default re-election, which is disabled first:

. unselect{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
User-select:none;
}

For a lower version of IE, use the Selectstart event:

$ (' #box ') [0].onselectstart = function (e) {
E.preventdefault ();
return false;
};

Register the Click event for P and listen for the KeyDown and KeyUp events of the Document object:

$ (document). KeyDown (function (e) {
if (E.shiftkey) {
Shiftkey = 1;
}
}). KeyUp (function () {
Shiftkey = 0;
});
$ (' #box '). On (' click ', ' P ', function () {
if (Shiftkey = = 1) {
Second = $ (this). index ();
for (var min = math.min (first,second); min <= Math.max (first,second); min++) {
$ (' #box '). Find (' P '). EQ (min). css (' Color ', ' red ');
}
} else {
A-i = $ (this). index ();
$ (this). CSS (' Color ', ' red '). Siblings ()-CSS (' Color ', ' black ');
}
})

Discontinuous selection

Discontinuous selection requires monitoring the CTRL key (MAC command key) and registering the Click event for the element.

 $ (document). KeyDown (function (e) {
     if (e.metakey) { //win is E.ctrlkey
            Ctrlkey = 2;
       }
   }). KeyUp (function () {
     ctrlkey = 0;
   });
    $ (' #box ' . On (' click ', ' P ', function () {
        if (Ctrlkey = 2) {
             $ (this). CSS (' Color ', ' red ');
       } else {
             $ (this). CSS (' Color ', ' red '). Siblings ()-CSS (' Color ', ' black ');
       }
   })