0

是否有推荐的方法来动态添加/故事化/构造 HTML 控件以在 HTML 页面上动态添加元素？

基本上，我正在开发一个基于小部件的系统，用户可以在其中选择她/他想要显示的小部件。S/He 可以根据需要在屏幕上显示尽可能多或尽可能少的小部件，并且他们也可以同时多次显示相同的小部件。

该脚本看起来像这样：

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $(".column").empty();

        var i = 0;

        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var $widget = $("<div class='widget widget_" + widget_shell.d[i].widget_id + "'>").appendTo( $(".column_" + widget_shell.d[i].column_id) );
            $("<div class='widget_header widget_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_sub_header widget_sub_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_content widget_content_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_footer widget_footer_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );

        }

每个.widget都需要该部分中的按钮、文本框等控件.widget_sub_header。推荐的方法是什么？ “那个”，如如何将更多 HTML 控件放入.widget_sub_header. 为数据库中的控件添加 HTML？以某种方式连接到包含 HTML 控件的外部文件并添加它们？或其他一些方法？

我想我的两个主要问题是：

  1. 易于维护
  2. 服务器资源友好
4

4 回答 4

1

jquery-ZenCoding 是创建一些嵌套 html 元素的简单方法： https ://github.com/zodoz/jquery-ZenCoding

例子： 

$.zen("div#widget>ul.instrument>(li{piano}+li{guitare}+li{flute})");
于 2012-11-15T10:41:44.353 回答
1

这样的事情呢？我建议不要添加带有 id 的类，而是在父级上添加一个实际的 id，这就是定位子元素所需的全部内容。

function createWidget( id ) {

  var widget = [
    '<div class="widget">',
      '<div class="widget_header"></div>',
      '<div class="widget_sub_header"></div>',
      '<div class="widget_content"></div>',
      '<div class="widget_footer"></div>',
    '</div>'
  ].join('');

  return $( widget ).attr( 'id', 'widget_'+ id );

}

$.each( widget_shell.d, function( i,v ) {
  $('.column_'+ v.column_id)
    .append( createWidget( v.widget_id ) );
});
于 2012-11-15T10:08:42.833 回答
0

我会添加一个小型模板引擎。John Resig 制作了一个非常简单的，我经常在以下位置使用它：

John Resig 微模板

您可能会再次做这种事情，因此模板引擎非常方便。

如果您不喜欢那个，您可以在以下位置查看大量的微模板资源：

Microjs 模板

于 2012-11-15T10:10:40.020 回答
0

我曾经在类似的小部件系统上工作过。

这就是我管理它的方式：

有一个隐藏的 div 容器，其中包含所有模板元素。

<div id='widget-templates'>
     <div class='widget1-id' >
           <input type='text' class='ytSearch'/>
           <button id='btnYtSearch'>Search</button> 
     </div>
     <div class='widget2-id'></div>
     ... 
     <!-- etc etc -->
     ...
</div>

我使用了一个名为 widgetFactory 的对象，它包含从模板创建小部件所需的所有 javascript 代码。

var widgetFactory = {
    youtubeSearch: function(data){
         var $generatedWidget = $('#widget-templates > .widget1-id').clone();

         // prepopulate with some data if requested (usually when binding data to an already existing widget)
         // ...            

         // attach events
         // ...

         return $generatedWidget;
    }
}

然后使用外部 javascript 逻辑，我将只将小部件数据（作为 JSON）和小部件类型保存到数据库中。tbl_widgets（id，名称，类型） tbl_user_widget（user_id，widget_id，数据）

请注意，这只是我的记忆，可能有一个更深刻的解决方案，但我希望它可以为您的用户自定义小部件系统带来任何新的想法。

于 2012-11-15T10:18:15.220 回答