jQuery插件不起作用

时间:2012-12-04 12:53:40

标签: jquery function jquery-plugins plugins

我已经阅读了很多关于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');
    }
});

任何能找到错误的人?

1 个答案:

答案 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');
}