Question

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

使用案例：

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

研究：

我被建议采用面向对象的方法来构建应用程序，因此在通过Google时遇到class.js用于JavaScript继承。

我经历了最初的教程，但我不确定我最初如何以及在哪里存储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内容并将其显示在画布上的这一部分。

感谢您的时间。

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更加容易。

使用JavaScript动态加载HTML（class.js）

使用案例：

研究：

我的工作到目前为止：

1 个答案: