1

您好所有 Javascript 和 Widget 专家。

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

这是我所做的

1.driver.js（加载所有需要的）加载jquery，jquery-ui，wdcreate.js，通过document.write调用设置tabs.js。

2.wdcreate.js（创建标签列表和内容）没什么复杂的，只是一个ui和li列表来创建3个标签内容分配给wHTML，然后通过加载内容 

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，它会加载两个 tab 容器。

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

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

这里还有页面

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
4

2 回答 2

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 的操作，而不是在解析时简单地编写它。

于 2012-12-29T07:32:02.077 回答
0

正确放置您的 driver.js 文件路径，它指向 localhost ，将其更改为http://www.werindia.com

使用下面的代码生成脚本标签

var headID = document.getElementsByTagName("head")[0];         
var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = 'http://www.somedomain.com/somescript.js';
headID.appendChild(newScript);
于 2012-12-29T07:08:04.220 回答