0

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

用例：

我正在尝试实现类似于这里存在的东西。我想在单击菜单时调用 HTML 组件并应用一些操作，例如拖动和调整大小等。

研究：

有人建议我采用面向对象的方法来构建应用程序，因此在浏览 Google 时遇到了用于 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 变量中的文本框，我想在用户单击菜单时添加它。但是如何使用 class.js 的继承模式来实现呢？

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

4

1 回答 1

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 变得更容易，等等。

于 2012-12-13T16:03:23.410 回答