javascript - 如何使用自定义 html 标签告诉脚本将 html 放在哪里？

Question

我构建了一个加载了外部脚本的插件，它基本上包含一些用户可能想要放置在他们体内的按钮和小部件。

但是我不确定他们如何告诉插件将插件中的按钮放在哪里，我注意到 facebook 为他们的喜欢和登录插件使用自定义标签做了一些事情：

<fb:login-button show-faces="true"></fb:login-button>

还有哪些其他选择？如何用按钮的 html 替换像这样的元素？

Answer 1

尝试这个。让您的用户像这样创建标记。如果需要成为内联控件，他们可以使用跨度。

<div data-yourPluginName="typeOfControl"></div>

然后让您的插件像这样替换该标记：

$(function() {
    $('[data-yourPluginName]').each(function() {
        var controlType = $(this).attr('data-yourPluginName');
        var replaceThis = $(this);

        if(controlType === 'foo') {
            // transform 'replaceThis' into a 'foo'
        } else if( controlType === 'bar' ) {
            // make it a 'bar'
        }
    });
});

如果您真的想使用自定义标签，代码类似：

//instead of:
$('[data-yourPluginName]').each(function() {

// simply use:
$('customTag1, customTag2').each(function() {
    var controlType = $(this).prop('tagName'); // this will be CUSTOMTAG1 in capitals