類比windows平台的操作功能表

技術上沒什麼難的，就是定義一個隱藏的box，當觸發上下文事件時顯示它，當單擊body任意處時又隱藏它。樣式效果比較粗糙，請見諒~~~

Demo在這裡

結構：

View Code

 1 <div id="wrap">
 2     <ul id="menu">
 3         <li><a href="">撤銷</a></li>
 4         <li><a href="">重做</a></li>
 5         <li><a href="">複製</a></li>
 6         <li><a href="">粘貼</a></li>
 7         <li><a href="">大小寫轉換</a></li>
 8         <li><a href="">斷行符號</a></li>
 9         <li><a href="">拼字檢查</a></li>
10         <li><a href="">建立</a></li>
11         <li><a href="">自訂</a></li>
12         <li><a href="">圖形選項</a></li>
13         <li class="no"><a href="">關閉</a></li>
14     </ul>
15  </div>

code是這樣：

function $(id) {return document.getElementById(id);};var EventUnit = {addHandler: function(element, type, handler) {//添加事件處理常式if(element.addEventListener) {element.addEventListener(type, handler, false);} else if(element.attachEvent) {element.attachEvent('on' + type, handler);} else {element['on' + type] = handler;};},getEvent: function(event) {return event ? event : window.event;},preventDefault: function(event) {//取消事件預設動作if(event.preventDefault) {event.preventDefault();} else {event.returnValue = false;};}}EventUnit.addHandler(window, 'load', function() {var wrap = $('wrap');var menu = $('menu');var menuStyle = menu.style.display;var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight;var w = 0, h = 0;var left = 0, top = 0;EventUnit.addHandler(wrap, 'contextmenu', function(event) {event = EventUnit.getEvent(event);EventUnit.preventDefault(event);menu.style.display = 'block';w = menu.clientWidth;h = menu.clientHeight;left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w;top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h;menu.style.left = left + 'px';menu.style.top =  top + 'px';});EventUnit.addHandler(document, 'click', function() {menu.style.display = menuStyle;});});