jquery implementation of the right mouse button window Delete/rename operation examples

In some admin backstage, we will simulate the operation of the Windows System right mouse button to implement delete and the full name, etc., this article we tell you how to implement with jquery.


1. Because window defaults can be right, so we want to first disable the window of the original Right pop-up window (disable includes 2 areas, 1 is the right mouse button area Div 2 is pop-up window div):

Disable Area Right key
$ (' body '). On (' ContextMenu ', '. Bottompage ', function () {
return false;
});
$ (' body '). On (' ContextMenu ', ' #notebookedit ', function () {
return false;
});

2.JQ Right-click the event method.

Need to note is (1, the pop-up window will have a number of offsets, all the need for a popup position for 0 2, if the page has a scroll bar, you need to calculate the scroll bar into 3, get the scroll bar offset does not necessarily use the body object, use the div of the scrollbar as the object)


Click the div you want to rename
$ (' body '). On (' MouseDown ', '. Noteitemstyle ', function (event) {
Right-key event event.button==2
if (event.button==2)
{
var offset=$ (this). offset ();
The window does not disappear when placing clicks elsewhere.
$ ('. Noteeditlist '). CSS (' Display ', ' none ');

The window will be absolutely fixed position div zero, or multiple clicks will produce offset
$ ('. Noteeditlist '). CSS (' position ', ' absolute ');
$ (". Noteeditlist"). CSS ("left", "0px");
$ (". Noteeditlist"). CSS ("Top", "0px");

Gets the height of the scroll bar of the div for the current page, with only the vertical scroll bar on this page
var locationy = $ ('. Wrap '). scrolltop ();

Offset.top=parseint (offset.top) +parseint (locationy);

Display the window div and assign values to its properties based on the tap source
$ ('. Noteeditlist '). Offset (offset);
$ ('. Noteeditlist '). CSS (' Display ', ' block ');
var id=$ (this). attr (' Noteid ');
$ ('. Noteeditlist '). attr (' Renameid ', id);

}
});



3 pop-up window, we continue to operate the automatic hidden window method


Click on the other part of the page window hidden
$ (document). Bind (' click ', Function (e) {
var e = e | | window.event; Browser compatibility
var elem = E.target | | E.srcelement;
while (Elem) {//loop to the node, prevent clicking on the div child element
if ((elem.id && elem.id== ' notebookedit ') | | (Elem.classname && elem.classname== ' Notebooklistview ')) {
Return
}
Elem = Elem.parentnode;
}
$ (' #notebookedit '). CSS (' Display ', ' none '); Clicking is not a div or its child elements
});



4 field Rename function realization idea is

1 the right key to the window, the window has the option to rename the child,
2 after clicking, the first right Div becomes editable state,
3) Clicking is a property that will assign the original right key theme ID to the window
4 Edit and click anywhere else on the page to represent the rename complete, send an AJAX request for renaming

The code is as follows:


$ (document). Bind (' click ', Function (e) {
var e = e | | window.event; Browser compatibility
var elem = E.target | | E.srcelement;
while (Elem) {//loop to the node, prevent clicking on the div child element
if ((Elem.classname && elem.classname== ' notebookrenameedit ') | | (elem.id && elem.id== ' notebookrename ')) {
Return
}
Elem = Elem.parentnode;
}
var renameid=$ (' #notebookrename '). attr (' Renameid ');
Decide whether to rename the edit operation: Click on the Pinball window to rename the Renameid will be assigned value
if (renameid!= '-1 ')
{
var renameval=$ ("#" +renameid+ ". Notebookrenameedit:input[name= ' rename ')"). Val ();

Clicking is not a div or its child elements
$.post (' Index.php?r=coursespace/coursespace/notelistreload ', {
Renameid:renameid, Renameval:renameval
},
function (data, status) {
if (status = ' success ') {
$ ('. Bottompage '). HTML (data);
Assignment marked as not clicked in the renamed State
$ (' #notebookrename '). attr (' Renameid ', '-1 ');
$ ('. Notebookrenameedit '). CSS (' Display ', ' none ');
Ckeditor.replace ("Cke3", {toolbar:[
Bold Italic, underline through line subscript word
[' Bold ', ' italic ', ' underline ', ' Strike ', ' subscript ', ' superscript '],
Number list Entity list Decrease Indent Increase Indent
[' Numberedlist ', ' bulletedlist ', '-', ' outdent ', ' Indent '],
Align left-aligned to Zishing justified
[' Justifyleft ', ' justifycenter ', ' justifyright ', ' Justifyblock '],
[' Styles ', ' Format ', ' Font ', ' FontSize '],],width:450}];
} else {
Alert ("Failed to load!") ")
}
});
}
});



5 The principle of renaming is to replace the displayed div with input that can be edited, example:

<div class= ' notebookname ' ><?= $Rpnotebook->title?></div>
<div class= ' notebookrenameedit ' style= ' display:none; >
<input type= ' text ' name= ' rename ' value=<?= $Rpnotebook->title?> style= ' width:120px; ' class= ' Notebookrenameeditid ' >
</div>

6 The div of the Bouncing window

<div id= ' notebookedit ' class= ' notebookdelete ' style= ' display:none; "Editid="-1 ">
<div class= ' notebookedititem ' id= ' notebookitemdelete ' > Delete </div>
<div class= ' notebookedititem ' id= ' notebookrename ' renameid= '-1 ' > Rename </div>
</div>

Finally, our effect chart is as follows:

In this way we have successfully implemented the jquery operation background right key data rename function, interested friends can refer to.