jQuery UI:加载HTML标记的最佳方式?

时间:2008-12-09 22:25:48

标签: javascript jquery jquery-ui jquery-ui-plugins

为自定义jQuery UI小部件加载HTML标记的最佳方法是什么?

到目前为止,我已经看到使用字符串(即$(...).wrap('<div></div>'))创建的元素,这对于简单的事情来说很好。但是,这使得以后修改更复杂的元素变得非常困难。

这似乎是一个相当普遍的问题,但我也知道jQuery UI库是新的,可能没有广泛接受的解决方案。有什么想法吗?

4 个答案:

答案 0 :(得分:6)

一件非常干净的事情就是:

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

这样,您正在创建一个元素,并将其引用存储在变量中,供以后使用。

答案 1 :(得分:2)

如果您有大量复杂的HTML,并且不想在JavaScript代码中处理硬编码字符串,则可以将其放在单独的HTML文件中并使用Ajax load function

它是可链接的,因此您可以加载HTML文件(整个内容或选定的片段),将其注入当前的DOM,并保持正常运行。

答案 2 :(得分:1)

对于非常复杂的模板很多次我只是将html块作为字符串存储在JSON对象中以供以后访问...例如:

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

然后在事情发生时再做一些替换。这样,标记与加载数据的逻辑有些分离,因此交换模板等可以更快一点。

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

无论如何,这种方法对我来说非常适用于AJAX小部件以及那种可能会使设计发生根本变化的事情。

答案 3 :(得分:0)

一种流行的,有效的方法是在脚本标记中将所有额外标记(以后可能需要)输出到页面底部,以便浏览器不呈现标记。

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

然后你可以使用jQuery来获取你的标记......

var markup = $('#template-example').html();

使用模板引擎解析我扔在那里的JS示例,例如Underscore.js(我推荐)中的那个,或者这个答案中的jQuery之一:jQuery templating engines

玩得开心!

豫ICP备18024241号-1