javascript - 单个页面上有多个 Javascript 小部件

Question

大家好 Javascript 和 Widget 专家。

过去两天我一直在绞尽脑汁，试图弄清楚如何启用我的小部件，以便它可以包含在同一页面上两次。

这是我所做的

1.driver.js(加载所有必需的)通过 document.write 调用加载 jquery 、 jquery-ui 、 wdcreate.js 、设置 tabs.js 。

2.wdcreate.js(创建选项卡列表和内容)没什么复杂的，只是一个 ui 和 li 列表来创建分配给 wHTML 的 3 个选项卡内容然后通过

加载内容

document.getElementById(tabid+"_mywidget_container").innerHTML = wHTML;

3.settabs.js(理想情况下应该启用选项卡)只有一行来加载选项卡容器

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

4.index.html -(包含小部件的测试页面)此页面仅包含两个小部件

<script type='text/javascript'> 
    var tabid='001';
    document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
    </script>
    <div id="001_mywidget_container"></div>

<script type='text/javascript'> 
var tabid='002';
document.write('<scr'+'ipt type="text/JavaScript" src="http://localhost:8080/demo/driver.js"></scr'+'ipt>'); 
</script>
<div id="002_mywidget_container"></div>

现在的问题是，如果我在 index.html 文件中仅包含一个小部件，则会呈现选项卡，如果我包含两个或三个小部件，则会失败..

有什么建议或者我必须做什么吗？我尝试搜索并隔离这个小项目的问题，最初使用纯 javascript 并恢复为 jQuery(我不是专家 Javascript 程序员)。意识到这必须与 window.onLoad 做一些事情

另请注意，在 settabs 中，如果我对每个 tabwidget id 使用两个调用，而不是动态分配 tabid，则会加载两个选项卡容器..

一个页面上可以有多个小部件，例如一个选项卡容器用于显示一个主题的信息，另一个选项卡容器用于另一个主题等。因此，希望拥有一个可以显示 6 个主题信息的页面的用户将包含 6 个小部件/tabcontainers 在同一页面上...

感谢您的所有帮助。再次感谢。

这里还有页面

http://www.werindia.com/demo/index1.html - widget included one time
http://www.werindia.com/demo/index2.html - widget included two times. in reality this could be any non zero number 

http://www.werindia.com/demo/driver.js
http://www.werindia.com/demo/wdcreate.js
http://www.werindia.com/demo/settabs.js

这是包含静态容器的页面 - 但实际上这些容器是动态的

http://www.werindia.com/demo/index3.html

Answer 1

好吧，以下这些事情毫无意义。

• 您已将实现代码和依赖项混合到一个文件中，并且加载/执行所有文件两次。

• 您不仅仅是通过脚本标签链接两次。由于某种原因，您觉得有必要使用 document.write

• 现在是 2012 年，您正在使用 document.write

• 您有一些常见的选项卡功能，您想要点击两个 div 容器，并且出于某种原因您使用 ID 而不是类。看起来 ID 可能会确定在 tabs.js 中构建哪些选项卡，但我只能假设，因为您没有显示该代码。

我们不会重新附加脚本标签来使同样的事情在 JavaScript 中发生两次。我们触发函数两次。或者我们在更一般的 DOM 元素类别上触发正确的函数。

如果以下是在这些容器中构建选项卡所需的全部内容:

$(document).ready(function() {$( "#"+tabid+"_mywidget_container" ).tabs();});

那么这会更有意义:

$(document).ready(function() {$( ".tab_container" ).tabs();});

如果您不知道 HTML 中需要包含哪些内容才能使 .tab_container 正常工作，我认为您需要放下所有这些内容并比你做。尽量让 JS 与 HTML 完全分离。在页面底部链接一次您的文件。了解 DOM API 或至少了解 jQuery 的工作原理。尝试将 JS 视为作用于 HTML，而不是简单地在解析时编写它。