單個頁面上的多個Javascript小部件

大家好，歡迎使用Javascript和小部件專家。單個頁面上的多個Javascript小部件

我在過去的兩天裏一直在摸頭，試圖弄清楚如何啓用我的小部件，以便它可以包含在同一頁上兩次。

這裏是我做了什麼

1.driver.js（加載所有必需）加載了jQuery，jQuery的UI，wdcreate.js，通過文件撰寫通話組tabs.js。

2.wdcreate.js（創建的標籤列表和內容）沒有複雜的，只是一個UI和Li列出經由

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

3來創建3個標籤的內容分配給wHTML 然後conent加載。 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，而不是動態的分配tabid，如果我用兩個呼叫爲每個tabwidget ID，它加載兩個標籤的容器..

可以在單個頁面上有多個小部件，例如一個標籤容器顯示一個主題的信息，另一個標籤容器用於另一個主題等。因此，尋找具有可顯示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

來源

2012-12-29 Chansdad

請顯示微件代碼。 – mplungjan

你做了什麼調試？什麼是錯誤？ – ryan

使用類，而不是ID啓動選項卡。對於同一級別的多個元素將工作正常 – charlietfl

那麼，副手以下的事情是沒有意義的。

您已經將實現代碼和您的依賴關係嵌入到單個文件中，並且您將兩次加載/執行所有代碼。
您不僅僅是通過腳本標記鏈接兩次。出於某種原因，你覺得有必要文件撰寫
這是2012年和你使用document.write
你有一些共同的標籤功能，你想打了兩個格容器使用，由於某種原因你」重新使用ID而不是類。它看起來像ID可能會建立tabs.js中建立的標籤，但我只能假設，因爲你沒有顯示該代碼。

我們不收回腳本標記以使相同的事情在JavaScript中發生兩次。我們兩次發射功能。或者，我們在DOM元素的更一般類別中引用正確的函數。

如果以下是所有需要這些容器建立標籤：

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

那麼這將使得很多更有意義：

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

如果你不知道需要什麼爲了使.tab_container正常工作，請在您的HTML中工作，我認爲您需要將所有這些都放下，並且比您更深入地學習基礎知識。儘量讓你的JS與HTML完全分離。鏈接您的文件一次在頁面的底部。瞭解DOM API或至少如何使用jQuery。嘗試將JS看作是HTML的行爲，而不是簡單地在解析時寫出它。

來源

2012-12-29 07:32:02

感謝您的解釋。我正在關注這篇文章http://www.codeproject.com/Articles/81355/第五章 - 創建 - Web-Widget-with-HTML-CSS-and-Ja。同意，我需要更深入地學習基礎知識..我更多是一個後端人，但需要得到這個工作。我還從http://www.werindia.com/HelloWorld/testPage.html上載了該文章中的示例代碼。請注意，我有兩個對該窗口小部件的調用，但該窗口小部件只顯示一次..這是我的問題處理。我開始用純JavaScript，並開始玩jQuery。一個簡單的工作小部件示例將有所幫助 – Chansdad

謝謝。我能夠把它整理出來。 – Chansdad

把你driver.js文件路徑正確它指向到本地主機，將其更改爲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-29 07:08:04

單個頁面上的多個Javascript小部件

回答

相關問題