右鍵菜單插件——contextmenu
右鍵菜單插件可以綁定頁面中的任意元素，綁定后，選中元素，點擊右鍵，便通過該插件彈出一個快捷菜單，點擊菜單各項名稱執(zhí)行相應(yīng)操作，調(diào)用代碼如下：
$(selector).contextMenu(menuId,{options});
Selector參數(shù)為綁定插件的元素，meunId為快捷菜單元素，options為配置對象。
例如，選中頁面<textarea>元素，點擊右鍵，彈出插件綁定的快捷菜單，點擊菜單中的各個選項，便在頁面中顯示操作的對應(yīng)名稱。如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)文本框與右鍵菜單通過插件contextmenu()方法綁定后，選中文本框，點擊右鍵時，彈出快捷菜單，點擊“新建”選項時，顯示操作對應(yīng)內(nèi)容。
任務(wù)
我來試試，親自將右鍵菜單插件與按鈕相綁定，點擊按鈕右鍵時，彈出菜單。
在下列代碼的第28行，調(diào)用contextMenu()方法將按鈕與彈出菜單綁定。
- ?不會了怎么辦
-
- 首先，通過選擇器獲取需要綁定快捷菜單的按鈕元素，然后，通過按鈕元素調(diào)用
contextMenu()方法，該方法的第一個參數(shù)為快捷菜單的Id號。
- “contextMenu”書寫是否正確，需要區(qū)分大小寫。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>右鍵菜單插件</title>
<link href="http://yifanck.cn/data/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://yifanck.cn/data/jquery-1.8.2.min.js"></script>
<script src="http://yifanck.cn/data/jquery.contextmenu.js" type="text/javascript"></script>
</head>
<body>
<div id="divtest">
<div class="title"><span class="fl">點擊右鍵</span></div>
<div class="content">
<input id="btnSubmit" type="button" value="提交" />
<div class="tip"></div>
</div>
<div class="contextMenu" id="sysMenu">
<ul>
<li id="Li3"><img src="http://img1.sycdn.imooc.com//52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
<li id="Li4"><img src="http://img1.sycdn.imooc.com//52e4b3680001424900160016.jpg" alt="" />退出</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function () {
?,
{ bindings:
{
'Li3': function (Item) {
$(".tip").show().html("您點擊了“保存”項");
},
'Li4': function (Item) {
$(".tip").show().html("您點擊了“退出”項");
}
}
});
});
</script>
</body>
</html>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest .content .tip
{
text-align: center;
border: solid 1px #ccc;
background-color: #eee;
margin: 20px 0px;
padding: 8px;
display: none;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
