The design of the right mouse button pop-up window (for renaming, etc.)

1. First disable window native right-click popup (disable including 2 areas, 1 is the right mouse button area Div 2 is the div of the popup window):

    //Disable zone right-click$('Body'). On ('ContextMenu','. Bottompage', function () {return false;    }); $('Body'). On ('ContextMenu','#notebookedit', function () {return false; });

2. Here's how to right-click the event.

Note that (1, the pop-up window will have a multiple-click Offset, all the popup needs to be set to 0 2, if the page has a scroll bar, you need to calculate the scroll bar 3, get the scrollbar offset does not necessarily use the body object, the scroll bar is located in the Div as the object)

    //Click the div you want to rename$('Body'). On ('MouseDown','. Noteitemstyle', Function (Event){        //Right-click event event.button==2        if(Event. button==2)        {            varoffset=$ ( This). offset (); //the pop-up window does not disappear when you place the click elsewhere to cause errors$('. Noteeditlist'). CSS ('Display','None'); //clear the absolute position of the div in the popup, or the offset will be generated multiple clicks$('. Noteeditlist'). CSS ('position','Absolute'); $(". Noteeditlist"). CSS (" Left","0px"); $(". Noteeditlist"). CSS ("Top","0px"); //Gets the height of the scrollbar of the current page's Div, with only the vertical scroll bar            varLocationy = $ ('. Wrap'). scrolltop (); Offset.top=parseint (offset.top) +parseint (Locationy); //Display the popup div and assign values to its properties based on the click Source$('. Noteeditlist'). offset (offset); $('. Noteeditlist'). CSS ('Display','Block'); varid=$ ( This). attr ('Noteid'); $('. Noteeditlist'). attr ('Renameid', id); }    });

3 pop-up window pops up, we will generally want to click the rest of the page when the pop-up window will automatically hide the implementation method as follows

    //Click the other part of the page pop-up window hidden$ (document). Bind ('Click', Function (e) {varE = e | | Window.Event;//Browser Compatibility        varElem = E.target | |e.srcelement;  while(Elem) {//loop judgment to the node, prevent the click is div child element            if((Elem.id && elem.id=='Notebookedit')|| (Elem.classname && elem.classname=='Notebooklistview')){            return; } elem=Elem.parentnode; }            $('#notebookedit'). CSS ('Display','None');//The click is not a div or its child elements});

4 about the function of renaming in the title of this article, the realization idea is

1) Right-click the pop-up window with the option to rename the child

2) After clicking, the div of the first right-click becomes editable,

3) Click Yes to assign the original right-click Theme ID to an attribute of the popup window

4) After editing click on the page any other place that means rename complete, send Ajax request to rename

The code is as follows:

$ (document). Bind ('Click', Function (e) {varE = e | | Window.Event;//Browser Compatibility        varElem = E.target | |e.srcelement;  while(Elem) {//loop judgment to the node, prevent the click is div child element            if((Elem.classname && elem.classname=='Notebookrenameedit')|| (Elem.id && elem.id=='Notebookrename')){            return; } elem=Elem.parentnode; }        varrenameid=$ ('#notebookrename'). attr ('Renameid'); //determine if the edit operation has been renamed: clicking the popup will assign a value to the Renameid when it is renamed        if(renameid!='-1')        {                               varrenameval=$ ("#"+renameid+". Notebookrenameedit:input[name= ' Rename ']"). Val (); //The click 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); //status of assignment marked as not clicked Rename$('#notebookrename'). attr ('Renameid','-1'); $('. Notebookrenameedit'). CSS ('Display','None'); Ckeditor.replace ("Cke3", {toolbar:[//Bold Italic, crossed by line subscript Word['Bold','Italic','Underline','Strike','Subscript','superscript'],                                                      //Number list Entity list Decrease Indent Increase Indent['numberedlist','BulletedList','-','outdent','Indent'],                                                      //Align left center to aligns justify['Justifyleft','Justifycenter','Justifyright','Justifyblock'],                                                      ['Styles','Format','Font','FontSize'],],width: the}); } Else{alert ("load failed! ")                }            }); }    }); 

5 renaming is the idea of replacing the displayed div with editable input. Examples are as follows:

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

Attached:

OK, that's all! This paper realizes the thinking process offset part of a reference to someone else's blog ideas, attached address: http://blog.csdn.net/xuexiaodong009/article/details/6553292

The design of the right mouse button pop-up window (for renaming, etc.)