我該如何執行一個在Jquery插件中作爲選項傳遞的函數？

我正在創建一個插件，它根據傳遞給它的選項添加按鈕。我已經可以渲染這些按鈕，但我無法弄清楚單擊按鈕時如何執行該功能。我該如何執行一個在Jquery插件中作爲選項傳遞的函數？

這裏的插件是如何使用的例子：

$("#myobj").myPlugin({ 
    width: 100, 
    height: 100, 
    buttons: { 
     "Say Hello": function() { alert("Hello World!"); }, 
     "Goodbye": function() { alert("Goodbye!"); }, 
     "Other": function() { alert("Something here"); } 
    } 
});

我試圖像下面的插件的源代碼內，但我不能讓按鈕點擊函數調用工作。請幫助...

if (options.buttons !== null) { 
    var buttons = ""; 
    for (var property in options.buttons) { 
     //console.log(property + ': ' + options.buttons[property]); 
     buttons += "<button onclick='" + options.buttons[property] + "'>" + property + "</button>" 
    } 
}

來源

2016-04-27 edg

也許你不想讓你的插件在公開場合看到，但添加上面的代碼直到如果聲明將是一個很大的幫助 –

我會建議添加一個「數據」屬性的屬性名稱，並始終調用相同的方法onClick。

buttons += "<button data-property='" + property + "'>" + property + "</button>";

...

$("#myobj").on("click", "button", function(){ 
    var matchingButtonPropName = $(this).data("property"); 
    options.buttons[matchingButtonPropName].call(this); 
});

來源

2016-04-27 01:17:57

工作完美！ – edg

感謝P.拉隆德！我在這裏發佈完整的簡化代碼，以防其他人遇到同樣的障礙。

的jQuery插件的源代碼：使用插件

(function($) { 
    //Shell for your plugin code 
    $.fn.buttonsTest = function(options) { 
     options = $.extend({}, $.fn.buttonsTest.defaults, options); 

     return this.each(function() {         
      //Do something to each item 
      var buttons = ""; 
      if (options.buttons !== null) { 
       for (var value in options.buttons) { 
        //console.log(property + ': ' + options.buttons[property]); 
        buttons += "<button data-value='" + value + "'>" + value + "</button>" 
       } 
      } 

      //render the UI 
      $(this) 
       .css({ 
        width: options.width + 'px', 
        height: options.height + 'px' 
       }) 
       .html(options.title + "<br>" + buttons); 

      //bind each buttons function into their corresponding click event 
      $(this).on("click", "button", function() { 
       var matchingButtonValue = $(this).data("value"); 
       options.buttons[matchingButtonValue].call(this); 
      }); 
     }); 
    } 

    $.fn.buttonsTest.defaults = { 
     title: "Buttons Test", 
     width: 100, 
     height: 100, 
     buttons: null 
    } 
})(jQuery);

樣品的HTML源代碼。

<html> 
<head> 
<title>Buttons Test</title> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script> 
<script src="js/buttonstest/jquery.buttonstest.js" type="text/javascript"></script> 
<script type="text/javascript"> 

     $(function() { 
      $("#mytest").buttonsTest({ 
       title: "My Test", 
       width: 500, 
       buttons: { 
        "Say Hello": function() { 
         //this could be any action. Added an alert just for simplicity 
         alert("Hello World!"); 
        }, 
        "Good Bye": function() { 
         alert("Good bye World!"); 
        }, 
        "Other": function() { 
         alert("Say what?"); 
        } 
       } 
      }); 

      $("#mytest2").buttonsTest({ 
       title: "My Test 2", 
       width: 500, 
       buttons: { 
        "Say Hello": function() { 
         alert("Hello World 2!"); 
        }, 
        "Something Else": function() { 
         alert("Say what 2?"); 
        } 
       } 
      }); 

     }); 
</script> 
</head> 
<body> 
<div id="mytest"></div> 
<div id="mytest2"></div> 
</body> 
</html>

再次感謝P. Lalonde。

來源

2016-04-27 16:43:15 edg

我該如何執行一個在Jquery插件中作爲選項傳遞的函數？

回答

相關問題