Jquery custom right-click menu, full selection, discontinuous selection _ jquery

This article describes in detail information about jquery's custom right-click menu, full selection, and discontinuous selection. For more information, see how to implement custom effects in recent projects, for example, right-click menu, full selection, and discontinuous selection. In my opinion, it is mainly to clarify the relationship between logic and events. To achieve this, there are also ready-made Plug-ins available, such as the selectable of jQuery UI.

1. Right-click the menu
When you browse a Web page, right-click the page (or ctrl + Click the left button of the template) and the default right-click menu item of the browser appears, just like this:

However, to right-click an element, such:

You must first disable the default menu of the browser and listen to the contextmenu event. 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'); });})

2. Select All
By default, ctrl + A (command + A on MAC) selects the entire webpage or an editable element that obtains the focus.

 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,
 
This is another p, this is another p,
 
This is another p, this is another p,
 
This is another p, this is another p,
 
This is another p, this is another p,

If only the two p values are displayed on the page, press ctrl/cmd + A. If you only want to select the p # box content, simply add contentEditable = true to the p. Another method is to listen to Keyboard Events.

Select p # box and highlight all child elements p:

$ (Function () {$ (document ). keydown (function (event) {// event in windows. ctrlKey if (event. metaKey & event. which = 65) {event. preventDefault (); $ ('# box> p '). trigger ('click') ;}}); $ ('# box '). on ('click', 'P', function () {comment (this).css ('color', 'red ');});});

3. shift for Continuous Selection
Shift and right-click are used to realize continuous selection of elements. Here, a simple simulation is performed on the elements.

 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,
 
This is p, this is p,

When you press shift, the browser has the default connection option. Disable it first:

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

For earlier versions of IE, The selectstart event is used:

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

Register a click event for p and listen to the keydown and keyup events of the document object at the same time:

$(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 {   first = $(this).index();   $(this).css('color','red').siblings().css('color','black');  } })

4. Discontinuous Selection
If you do not need to listen to the ctrl key (the command key on the mac), you must register a 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) {iterator (this).css ('color', 'red ');} else {response (this).css('color', 'red'hangzhou.siblings().css ('color', 'black ');}})

The above is all the content of this article, and I hope it will help you learn jquery programming.