我的第一个JQuery插件-鼠标右键
1.前言
学习 javascript 已经许久了，但对于 jQuery 还不是太熟悉；在学习 javascript 之前就一直想写一些自己的插件，但是迫于自己太懒而且学习能力不足的原因导致迟迟没有进展。这几天刚上班，自己还没回过神来，刚好在过年那几天小小研究了一下插件，但是还是没有太熟。于是抱着试一试的心态写了人生中第一个 JQ 小插件。
2.实现思路
首先这个插件是采用给 JQuery 对象添加方法，但是不知道自己对不对，但是初衷是这样设计的，如果有不对之处还望大牛们不佞赐教。接下来是具体的实现思路：
1.禁用原本的鼠标右键
2.绑定新的鼠标按下事件
3.绑定每个元素的点击事件
3.具体代码
css 代码：
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<style type="text/css">
.wrap-ms-right{
list-style: none;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
padding: 5px 0;
min-width: 80px;
margin: 0;
display: none;
font-family: "微软雅黑";
font-size: 14px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .15);
box-sizing: border-box;
border-radius: 4px;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ms-item{
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.ms-item:hover{
background-color: #343a40;
color: #FFFFFF;
}
body{
width: 1200px;
height: 500px;
}
</style>js 代码
/*
作者：天命
时间：2018-02-23
描述：插件分析
自定义说明
{名称，回调函数，}
*/
;(function($,window){
$.prototype.mouseRight=function(options,callback){
var defaults,settings,me,_this;
me=this;
defaults={
menu: [{}],
ele:'wrap-ms-right',
ele_item:'ms-item'
};
settings=$.extend({},defaults, options);
$(this).each(function() {
//阻止默认行
(function makeDiv(){
var parentDiv=$('<div></div>');
parentDiv.attr('class',settings.ele);
for(let i = 0;i < settings.menu.length;i++){
var childDiv=$('<li></li>');
childDiv.addClass(settings.ele_item);
var childDiv1=$('<i></i>');
childDiv.attr('data-item',i);
childDiv1.addClass(settings.menu[i].icon);
childDiv1.attr('data-item',i);
childDiv1.appendTo(childDiv);
childDiv.appendTo(parentDiv);
childDiv1.after(' '+settings.menu[i].itemName);
}
parentDiv.prependTo('body');
})();
window.oncontextmenu=function(){
return false;
};
//绑定右键事件
$(this).mousedown(function(e){
if(e.which===3){
$('.wrap-ms-right').css({
'display':'block',
'top':e.pageY+'px',
'left':e.pageX+'px'
});
}
});
//点击事件
$('.wrap-ms-right').click(function(e){
console.log($(e.target))
clickID=parseInt($(e.target).attr('data-item'));
for (let i = 0 ; i < settings.menu.length ; i++ ) {
if(clickID==i){
settings.menu[i].callback();
$('.wrap-ms-right').css({'display':'none'});
}
}
});
});
return this;
}
})(jQuery,window)4.调用方法
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mouseRight.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$('body').mouseRight({menu: [{
itemName: "添加",
icon:"fa fa-plus",
callback: function() {alert('我是添加')}
}, {
itemName: "修改",
icon:"fa fa-files-o",
callback: function() {alert('我是修改')}
},{
itemName: "粘贴",
icon:"fa fa-clipboard",
callback: function() {alert('我是粘贴')}
},{
itemName: "删除",
icon:"fa fa-trash",
callback: function() {alert('我是删除')}
}]});
</script>ps:我用了font-awesome字体图标这个需要下载，没有做兼容匹配我自己用的谷歌
5.参数说明
itemName：表示右键菜单新建项的名称
icon：新建项font-awesome图标
callback：表示点击新建项的回调函数
6.后记
其中肯定有许多不足之处，欢迎留言。
