如何解决如何重用HTML用户界面元素?
| 我有以下HTML:<div id=\"addFieldUI\" style=\"display: none\">
<div>
Field Name:
<input type=\"text\" />
</div>
<div>
Field Value
</div>
<div>
Data Type:
<select>
<option>Price</option>
</select>
</div>
我想至少在另外两个jQuery模式中重用HTML。如果我使用“ 1”将HTML插入HTML元素中,那么如果我在字段中使用输入ID,就会遇到元素重复的问题。我应该使用输入名称吗?我应该使用\'script \'代码块而不是div吗?如何创建可重用的HTML?
编辑
我知道jQuery数据模板,但是在这种情况下,我只想在MODAL对话框中重用HTML。例如。如果我使用相同的表格来创建和编辑数据。
解决方法
大概是这样的:
var counter = 0;
$(\'#otherElem\').html(
$(\'#addFieldUI\')
.clone()
.attr(\'id\',\'addFieldUI-\' + counter++)
.html()
);
,您可以将类名用作钩子,并且在附加到其他div之前,请使用Js动态添加ID。
,有一个叫做jQuery Templates的库,您总是可以尝试一下,我经常在ASP.NET MVC中使用它,但是可以在任何地方使用。
在Git中,您有一些演示
例:
<script id=\"movieTemplate\" type=\"text/x-jquery-tmpl\">
<li>
<b>${Name}</b> (${ReleaseYear})
</li>
</script>
<ul id=\"movieList\"></ul>
<script type=\"text/javascript\">
var movies = [
{ Name: \"The Red Violin\",ReleaseYear: \"1998\" },{ Name: \"Eyes Wide Shut\",ReleaseYear: \"1999\" },{ Name: \"The Inheritance\",ReleaseYear: \"1976\" }
];
$( \"#movieTemplate\" ).tmpl( movies ).appendTo( \"#movieList\" );
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。