Question

我正在创建一个插件，根据传递给它的选项添加按钮。我已经可以渲染按钮但是我无法弄清楚如何在单击按钮时执行该功能。

这是一个如何使用插件的示例：

$("#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>"
    }
}

Answer 1

我建议添加一个＆＃34;数据＆＃34;具有属性名称的属性并始终在onClick上调用相同的方法。

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

...

{{1}}

Answer 2

感谢P. Lalonde！我在这里发布完整的简化代码，以防其他人遇到同样的障碍。

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。

如何在Jquery插件中执行作为选项传递的函数？

2 个答案: