亚洲欧美精品沙发,日韩在线精品视频,亚洲Av每日更新在线观看,亚洲国产另类一区在线5

<pre id="hdphd"></pre>

  • <div id="hdphd"><small id="hdphd"></small></div>
      學(xué)習(xí)啦 > 學(xué)習(xí)電腦 > 電腦硬件知識(shí) > 鍵盤鼠標(biāo) > 如何用jquery實(shí)現(xiàn)右鍵菜單

      如何用jquery實(shí)現(xiàn)右鍵菜單

      時(shí)間: 迪豪910 分享

      如何用jquery實(shí)現(xiàn)右鍵菜單

        愛(ài)學(xué)習(xí)的小伙伴都會(huì)用過(guò)jquery,但是叫你實(shí)現(xiàn)右鍵菜單,你知道怎么做嗎?不知道的話,看一下由學(xué)習(xí)啦小編為你整理的關(guān)于如何用jquery實(shí)現(xiàn)右鍵菜單的資料,希望你們喜歡。

        如何用jquery實(shí)現(xiàn)右鍵菜單?

        在一些管理后臺(tái),我們會(huì)模擬windows系統(tǒng)鼠標(biāo)右鍵的操作實(shí)現(xiàn)刪除和重全名等,本文我們來(lái)告訴你用jquery如何實(shí)現(xiàn)。

        1.因?yàn)閣indow默認(rèn)是可以右鍵的,所以我們要先禁用window原生的右鍵彈窗(禁用包括2個(gè)區(qū)域,1是鼠標(biāo)右鍵的區(qū)域div 2是彈出窗口的div):

        //禁用區(qū)域右鍵

        $('body').on('contextmenu','.bottompage',function(){

        return false;

        });

        $('body').on('contextmenu','#notebookedit',function(){

        return false;

        });

        2.jq右鍵點(diǎn)擊事件的方法。

        需要注意的是(1,彈窗多次點(diǎn)擊會(huì)有偏移,所有每次彈出需要位置置為0 2,如果頁(yè)面存在滾動(dòng)條的話,需要將滾動(dòng)條計(jì)算進(jìn)去 3,獲取滾動(dòng)條偏移量不一定使用body對(duì)象,使用滾動(dòng)條所在的div作為對(duì)象)

        //點(diǎn)擊需要重命名的div

        $('body').on('mousedown','.noteitemstyle',function(event){

        //右鍵事件event.button==2

        if(event.button==2)

        {

        var offset=$(this).offset();

        //放置點(diǎn)擊別處時(shí)的彈窗不消失造成誤差

        $('.noteeditlist').css('display','none');

        //將彈窗的div絕對(duì)定位置清零,否則多次點(diǎn)擊會(huì)產(chǎn)生偏移量

        $('.noteeditlist').css('position','absolute');

        $(".noteeditlist").css("left","0px");

        $(".noteeditlist").css("top","0px");

        //獲取當(dāng)前頁(yè)面所在div的滾動(dòng)條的高度,本頁(yè)面只有垂直滾動(dòng)條

        var locationY = $('.wrap').scrollTop();

        offset.top=parseInt(offset.top)+parseInt(locationY);

        //展示彈窗div ,并根據(jù)點(diǎn)擊源對(duì)其屬性賦值

        $('.noteeditlist').offset(offset);

        $('.noteeditlist').css('display','block');

        var id=$(this).attr('noteid');

        $('.noteeditlist').attr('renameid',id);

        }

        });

        3 彈窗彈出之后,我們繼續(xù)操作自動(dòng)隱藏彈窗的方法

        //點(diǎn)擊頁(yè)面其他部分彈窗隱藏

        $(document).bind('click',function(e){

        var e = e || window.event; //瀏覽器兼容性

        var elem = e.target || e.srcElement;

        while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn),防止點(diǎn)擊的是div子元素

        if ((elem.id && elem.id=='notebookedit')||(elem.className && elem.className=='notebooklistview')){

        return;

        }

        elem = elem.parentNode;

        }

        $('#notebookedit').css('display','none'); //點(diǎn)擊的不是div或其子元素

        });

        4 字段重命名功能實(shí)現(xiàn)思路是

        1)右鍵彈窗 ,彈窗中有重命名子項(xiàng)的選項(xiàng),

        2)點(diǎn)擊之后, 最初右鍵的div變?yōu)榭删庉嫷臓顟B(tài),

        3)點(diǎn)擊是會(huì)將最初右鍵的主題id賦值給彈窗的一個(gè)屬性

        4)編輯之后點(diǎn)擊頁(yè)面任何其他地方即代表重命名完成,發(fā)送ajax請(qǐng)求進(jìn)行重命名

        代碼如下:

        $(document).bind('click',function(e){

        var e = e || window.event; //瀏覽器兼容性

        var elem = e.target || e.srcElement;

        while (elem) { //循環(huán)判斷至跟節(jié)點(diǎn),防止點(diǎn)擊的是div子元素

        if ((elem.className && elem.className=='notebookrenameedit')||(elem.id && elem.id=='notebookrename')){

        return;

        }

        elem = elem.parentNode;

        }

        var renameid=$('#notebookrename').attr('renameid');

        //判斷是否進(jìn)行了重命名的編輯操作:點(diǎn)擊彈窗重命名時(shí)會(huì)對(duì)renameid賦值

        if(renameid!='-1')

        {

        var renameval=$("#"+renameid+" .notebookrenameedit :input[name='rename']").val();

        //點(diǎn)擊的不是div或其子元素

        $.post('index.php?r=coursespace/coursespace/notelistreload', {

        renameid: renameid, renameval: renameval

        },

        function(data, status) {

        if (status = 'success') {

        $('.bottompage').html(data);

        //賦值標(biāo)記為未點(diǎn)擊重命名的狀態(tài)

        $('#notebookrename').attr('renameid', '-1');

        $('.notebookrenameedit').css('display', 'none');

        CKEDITOR.replace("cke3",{toolbar:[

        //加粗 斜體,劃線 穿過(guò)線 下標(biāo)字 上標(biāo)字

        ['Bold','Italic','Underline','Strike','Subscript','Superscript'],

        //數(shù)字列表 實(shí)體列表 減小縮進(jìn) 增大縮進(jìn)

        ['NumberedList','BulletedList','-','Outdent','Indent'],

        //左對(duì)齊 居中對(duì)齊 右對(duì)齊 兩端對(duì)齊

        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

        ['Styles','Format','Font','FontSize'],],width:450});

        } else {

        alert("加載失敗!")

        }

        });

        }

        });

        5 重命名的實(shí)現(xiàn)原理就是將展示的div替換成可以編輯的input,示例:

        <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 彈窗的div

        <div id='notebookedit' class="notebookdelete" style="display:none; " editid="-1" >

        <div class='notebookedititem' id='notebookitemdelete'>刪除</div>

        <div class='notebookedititem' id='notebookrename' renameid='-1'>重命名</div>

        </div>

      1827354