使用JavaScript(class.js)动态加载HTML

Question

我正在构建一个包含一些HTML组件的应用程序。

用例：

我正在努力实现与这里类似的目标。我想在点击菜单时调用HTML组件，并应用一些操作，如拖动和调整大小等。

研究：

有人建议我采用面向对象的方法来构建应用程序，因此在浏览谷歌时，我发现了用于JavaScript继承的class.js。

我浏览了最初的教程，但我不确定如何以及在哪里可以最初存储HTML，以保存HTML组件的结构？

在参考应用程序中，他们使用了backbone.js和require.js，但我学习这些的时间有点短。

到目前为止我的工作：

我所尝试的是创建一个文件components.js，并为这样的组件创建外部HTML结构：

var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
</div>
</div>';

这是一个存储在JavaScript变量中的文本框，我想在用户单击菜单时添加它。但是如何使用类.js的继承模式来实现呢？

我已经创建了一个画布页面和组件菜单。现在我被困在获取html内容并将其显示在画布上的这一部分。

Answer 1

我看不出您所要求的与继承有任何关系。

有几种简单的方法可以使用JavaScript在网页上添加内容。

例如，如果你的页面上<div id='target'></div>的某个地方有以下内容，你可以这样写：

var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <a href="#."><strong><u>Design Assistance</u></strong></a> link for further help.</span></p>
</div>
</div>';
document.getElementById('target').innerHTML = textBox;

为了获得最佳效果，我建议学习使用像jQuery这样的库。这些工具旨在使操作页面的HTML更容易。