Question

我正在构建一个wordpress反馈插件，因此页面所有者可以将div放在任何需要关注的页面上的任何部分，并且会弹出越来越多的表单来编辑各种属性。

我正在构建jquery中的表单，如下所示：

$('#myplugin').append('<div class="controls"></div>');
$('#myplugin .controls').append('<button type="button" id="tntb_shoot" class="btn btn-default"> <span class="glyphicon glyphicon-camera"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_picture" class="btn btn-default"> <span class="glyphicon glyphicon-picture"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_add" class="btn btn-default"> <span class="glyphicon glyphicon-plus"></span> </button>')
$('#myplugin .controls').append('<button type="button" id="tntb_list" class="btn btn-default"> <span class="glyphicon glyphicon-list"></span> </button>')

......一次做一个元素感觉很糟糕

我觉得我应该在其他地方的普通html中编写它们，然后导入它们？我应该使用ajax到一个平面的html文件？或者这是我会使用模板的东西？

我准备好了你的智慧！

更新 - adeneo给了我一个很好的答案，我可以理清我如何整理按钮组，但后来我有文本区域，文本字段，无线电，这些都适合待办事项列表......

Answer 1

如果您可以使用模板，文件或其他方式，这是一种方法，但是按照您的方式进行操作没有任何问题，但它可能会更加逻辑地完成，更容易创建元素等。

类似

function getButton(id, icon) {
    var span = $('<span />',   {'class': 'glyphicon glyphicon-'+icon});
    var btn  = $('<button />', {'class': 'btn btn-default', id : 'tntb_'+id });

    return btn.append(span);
}

var controls = $('<div />', {'class' : 'controls'});

$('#myplugin').append(
    controls.append(
        getButton('shoot', 'camera'),
        getButton('picture', 'picture'),
        getButton('add', 'plus'),
        getButton('list', 'list')
    )
);

Answer 2

我在想jquery .load（）可能会解决问题..

http://api.jquery.com/load/

Answer 3

我亲自完成了您上面所做的事情，并且对服务器进行了ajax调用以恢复预渲染的数据。

使用angular.js或backbone.js之类的东西可能更好。但是，在你的情况下，一个更简单的解决方案是创建一个将呈现html的php文件（标题应该是text / html）。

然后，通过ajax调用该文件/ controller / action将其插入到您的页面中。

创建许多小的HTML表单

3 个答案: