我已经阅读了很多关于jQuery插件的内容，并试图为自己的网站制作一些内容。这是我的第一个脚本，基本上它只是为了好玩..不知怎么插件不起作用..
这是我的插件
;(function($){
// We name the function mouser
$.fn.mouser = function(options) {
// Default settings - can be replaced by options
var defaults = {
mouse: "click" // click is an event that contains both the mousedown and mouse up event in one.
}
// Extend the options and defaults to variables
var opts = $.extend(defaults, options);
// Now start the Function
return this.each(function() {
// The original element is defined with a variable
var element = $(this)
// We have to define the functions that has to react based on the option 'mouse'
// So if it is - as standard - set to 'click'
if (opts.mouse == "click") {
// ... we want to do a 'click'-function (Basic jQuery)
// when the element is clicked
element.click(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: {left_mouse_command(); return false;}
// Middle Mouse Button
case 2: {middle_mouse_command(); return false;}
// Right Mouse Button
case 3: {right_mouse_command(); return false;}
};
});
// Else if 'mouse' is set to 'mouseup'
} else if (opts.mouse == "mouseup") {
// ... we want to do a 'mouseup'-function (Basic jQuery)
// when the mouse is released from the element
element.mouseup(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: {left_mouse_command(); return false;}
// Middle Mouse Button
case 2: {middle_mouse_command(); return false;}
// Right Mouse Button
case 3: {right_mouse_command(); return false;}
};
});
// Else if 'mouse' is set to 'mousedown'
} else if (opts.mouse == "mousedown") {
// ... we want to do a 'mousedown'-function (Basic jQuery)
// when the mouse begins to click on the element
element.mousedown(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: {left_mouse_command(); return false;}
// Middle Mouse Button
case 2: {middle_mouse_command(); return false;}
// Right Mouse Button
case 3: {right_mouse_command(); return false;}
};
});
};
});
};
})(jQuery);
然后我调用这样的函数：
$(document).ready(function() {
$(document).mouser();
function left_mouse_command() {
alert('You clicked with the left mouse button');
}
function middle_mouse_command() {
alert('You clicked with the middle mouse button');
}
function right_mouse_command() {
alert('You clicked with the right mouse button');
}
});
任何能找到错误的人？
答案 0 :(得分：1)
函数xxxxxx_mouse_command()超出了插件的范围。您应该将它们从$(document).ready()移动到全局范围。
编辑：每个case的最后一个命令应该是break;而不是return false;。您应该将e.preventDefault()放在每个处理程序的末尾。您无需将case命令包装在{}括号
有些分号丢失，你在switch和if语句中添加了一些“异常”的分号
试试这个
;(function($){
// We name the function mouser
$.fn.mouser = function(options) {
// Default settings - can be replaced by options
var defaults = {
mouse: "click" // click is an event that contains both the mousedown and mouse up event in one.
};
// Extend the options and defaults to variables
var opts = $.extend(defaults, options);
// Now start the Function
return this.each(function() {
// The original element is defined with a variable
var element = $(this);
// We have to define the functions that has to react based on the option 'mouse'
// So if it is - as standard - set to 'click'
if (opts.mouse == "click") {
// ... we want to do a 'click'-function (Basic jQuery)
// when the element is clicked
element.click(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: left_mouse_command(); break;
// Middle Mouse Button
case 2: middle_mouse_command(); break;
// Right Mouse Button
case 3: right_mouse_command(); break;
}
e.preventDefault();
});
// Else if 'mouse' is set to 'mouseup'
} else if (opts.mouse == "mouseup") {
// ... we want to do a 'mouseup'-function (Basic jQuery)
// when the mouse is released from the element
element.mouseup(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: left_mouse_command(); break;
// Middle Mouse Button
case 2: middle_mouse_command(); break;
// Right Mouse Button
case 3: right_mouse_command(); break;
}
e.preventDefault();
});
// Else if 'mouse' is set to 'mousedown'
} else if (opts.mouse == "mousedown") {
// ... we want to do a 'mousedown'-function (Basic jQuery)
// when the mouse begins to click on the element
element.mousedown(function(e) {
// ... we ensure which mouse button has been pressed
switch (e.which) {
// ... and execute a function based on that information
// Left Mouse Button
case 1: left_mouse_command(); break;
// Middle Mouse Button
case 2: middle_mouse_command(); break;
// Right Mouse Button
case 3: right_mouse_command(); break;
}
e.preventDefault();
});
}
});
}
})(jQuery);
和
$(document).ready(function() {
$(document).mouser();
});
function left_mouse_command() {
alert('You clicked with the left mouse button');
}
function middle_mouse_command() {
alert('You clicked with the middle mouse button');
}
function right_mouse_command() {
alert('You clicked with the right mouse button');
}