如何准备一个大的DIV? [英] How to prepend a big DIV?

问题描述

我需要prepend一个巨大的DIV块，可以在问题的底部看到.

I need to prepend a huge DIV block, which can be seen at the bottom of the question.

我目前的想法是将一个

$('#content').prepend();

并在需要插入变量的内容时将它们分开.那就是所有说TMPL_VAR

and break each like up, when I need to insert the content of a variable. That would be all the places which says TMPL_VAR

代码很难维护和阅读.

有聪明的方法吗?

<form action="" method="post">
  <input name="anchor" value="<TMPL_VAR ID>" type="hidden">
  <div class="row">
    <div class="cellData">                                                          <TMPL_VAR ID>                                  </div>
    <div class="cellData"> <input name="title" id="<TMPL_VAR ID>_title"      value="<TMPL_VAR TI>" type="text" />                  </div>
    <div class="cellData"> <input name="owner" id="<TMPL_VAR ID>_owner"      value="<TMPL_VAR OW>" type="text" />                  </div>
    <div class="cellData"> <input name="from"  id="<TMPL_VAR ID>_begin_date" value="<TMPL_VAR BD>" type="text" class="datepick" /> </div>
    <div class="cellData"> <input name="to"    id="<TMPL_VAR ID>_end_date"   value="<TMPL_VAR ED>" type="text" class="datepick" /> </div>
    <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" <TMPL_VAR IN>/> Individuel <br> <input name="ctype" value="course" type="radio" <TMPL_VAR CO>/> Course </div>
    <div class="cellEdit"> <a href="javascript:showhide('<TMPL_VAR ID>');">Members</a> <input value="Save" type="submit">                 </div>
  </div>
  <div id="<TMPL_VAR ID>" style="display: none; background-color: #fff8e7;">
    <div class="rowMembers">
      <span>
    <label> Users  </label> &nbsp; <input name="users"  id="<TMPL_VAR ID>_users"  size="35" value="<TMPL_VAR US>" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <label> Groups </label> &nbsp; <input name="groups" id="<TMPL_VAR ID>_groups" size="35" value="<TMPL_VAR GR>" type="text" />
      </span>
    </div>
  </div>
</form>

推荐答案

我个人会选择 jQuery.tmpl( )处理此类问题.

I would personally go for jQuery.tmpl() to handle this sort of issue.

这样，您可以像这样指定模板:

This way you could specify a template like so:

   <script type="text-x-jquery/template" id="template"> 
    <form action="" method="post">
      <input name="anchor" value="${id}" type="hidden">
      <div class="row">
        <div class="cellData">                                                          <TMPL_VAR ID>                                  </div>
        <div class="cellData"> <input name="title" id="${id}_title"      value="${ti}" type="text" />                  </div>
        <div class="cellData"> <input name="owner" id="${id}_owner"      value="${ow}" type="text" />                  </div>
        <div class="cellData"> <input name="from"  id="${id}_begin_date" value="${bd}" type="text" class="datepick" /> </div>
        <div class="cellData"> <input name="to"    id="${id}_end_date"   value="${ed}" type="text" class="datepick" /> </div>
        <div class="cellData cellRadios"> <input name="ctype" value="individuel" type="radio" ${in}/> Individuel <br> <input name="ctype" value="course" type="radio" ${co}/> Course </div>
        <div class="cellEdit"> <a href="javascript:showhide('${id}');">Members</a> <input value="Save" type="submit">                 </div>
      </div>
      <div id="${id}" style="display: none; background-color: #fff8e7;">
        <div class="rowMembers">
          <span>
        <label> Users  </label> &nbsp; <input name="users"  id="${id}_users"  size="35" value="${us}" type="text" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <label> Groups </label> &nbsp; <input name="groups" id="${id}_groups" size="35" value="${gr}" type="text" />
          </span>
        </div>
      </div>
    </form>
    </script>

然后使用jQuery填充模板

and then with jQuery populate the template with

  $('#template').tmpl(myData).appendTo('#myContainer')

，这将把填充的模板插入到#myContainer中，前提是您在javascript作用域内的数据myData与模板中指定的数据格式相对应，并且您已定义了一个ID为是可附加的.

which will insert the populated template into #myContainer given that you have data in the javascript scope myData wich corresponds to the data format specified in the template, and that you have defined a html element with an id of myContainer which is appendable.

这篇关于如何准备一个大的DIV?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！