正在為電子書閱讀器添加精准易用的標記功能,其中一個方案是擴展閱讀器界面的右鍵菜單欄,使得用戶右鍵點擊某個詞、子句、段落的時候可以進行擴展操作。
右鍵菜單欄有很多基於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函數進行更復雜的操作。