Wie kann ich eine Funktion ausführen, die als Option in einem Jquery-Plugin übergeben wurde?

Ich erstelle ein Plugin, das Schaltflächen basierend auf den Optionen hinzufügt. Ich kann die Knöpfe bereits rendern, aber ich kann nicht herausfinden, wie man die Funktion ausführt, wenn die Taste geklickt wird.Wie kann ich eine Funktion ausführen, die als Option in einem Jquery-Plugin übergeben wurde?

Hier ist ein Beispiel dafür, wie das Plugin verwendet wird:

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

ich in dem Plugin-Quellcode so etwas wie die unten bin versucht, aber ich konnte nicht den Funktionsaufruf Arbeit auf Tastenklick machen. Bitte helfen Sie ...

Quelle

2016-04-27 edg

Vielleicht möchten Sie nicht Ihr Plugin in der Öffentlichkeit noch zu sehen, aber oben genannten Code hinzufügen, dass, wenn Anweisung wäre eine große Hilfe –

Ich würde vorschlagen, ein "Daten" -Attribut mit dem Namen der Eigenschaft und immer die gleiche Methode onClick aufrufen.

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

...

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

Quelle

2016-04-27 01:17:57

Perfekt gearbeitet! – edg

Dank P. Lalonde! Ich poste hier meinen kompletten vereinfachten Code, nur für den Fall, dass andere Leute in dieselbe Hürde geraten.

jQuery Plugin-Quellcode:

(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);

Beispiel-HTML-Quellcode das Plugin.

<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>

Nochmals vielen Dank an P. Lalonde.

Quelle

2016-04-27 16:43:15 edg

Wie kann ich eine Funktion ausführen, die als Option in einem Jquery-Plugin übergeben wurde?

Antwort

Verwandte Themen