[smartMenu.js] 一個基於jquery的實用的右鍵拓展菜單欄插件


正在為電子書閱讀器添加精准易用的標記功能,其中一個方案是擴展閱讀器界面的右鍵菜單欄,使得用戶右鍵點擊某個詞、子句、段落的時候可以進行擴展操作。

右鍵菜單欄有很多基於jQuery的插件,其中靈活性比較強、易用、可擴展的一個是smartMenu.js(github有不少重名庫,本插件來自:www.zhangxinxu.com)

用法:

$(document.getElementById(id).contentWindow.document.body).find('.word').smartMenu(data,{
  offsetX:120,
  offsetY:120,
  textLimit:12,
});

其中document.getElementById(id).contentWindow.document.body是jquery的選擇器部分,將搜索范圍限制在閱讀器iframe窗體中查找元素。

smartMenu是該插件的方法,用來為jQuery對象添加右鍵菜單欄,其中data參數是由菜單項組成的數組,第二個json參數是配置選項,其API如下:

參數名 默認值 相關說明
name "" 字符串。上下文菜單的名稱,用以區分不同的上下文菜單。如果頁面只有一個上下文菜單,此參數可缺省;如果是多個菜單,此參數必須,否則菜單會出現沖突。
offsetX 2 數值。上下文菜單左上角距離鼠標水平偏移距離。
offsetY 2 數值。上下文菜單左上角距離鼠標垂直偏移距離。
textLimit 6 數值。上下文菜單項限制顯示的文字個數。如果超出會截取,並以…補全,完成文字以title形式顯示。
beforeShow $.noop 函數。菜單即將顯示之前執行的回調函數。$.noop為jQuery 1.4+版本支持,所以,如果你想讓插件向下兼容,可設置將插件js中所有的$.noop替換成function() {}
afterShow $.noop 函數。菜單顯示后執行的回調函數。

 offsetX和offsetY如果不設置,則右鍵單擊元素后,菜單欄在鼠標左上角較遠處彈出,設置為120的效果如下:

還可以使用beforeShow和afterShow函數進行更復雜的操作。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM