2010-09-03 87 views
3

我很新的jQuery。試着去感受一下。我喜歡的標籤功能演示了此:使用jQuery .tabs() - 內容覆蓋頁面

http://jqueryui.com/demos/tabs/#mouseover

我真的很喜歡這一點,但是我想它採取更有點像菜單。特別是我希望標籤內容在頁面上出現(比如菜單)。另外,正如當我翻轉標籤的內容改變時,當我沒有翻轉任何標籤(或者當用戶點擊頁面上的其他地方時),我希望標籤內容消失(如菜單)。

所以我真的想用它作爲菜單。如果有人知道菜單控件可以解決我的問題,也可以工作。我只是喜歡這個事實,當我把鼠標懸停在一個項目上時,彈出一個div。我想在每個div中放一些文本和兩個按鈕。

謝謝!

這是我原本: 這頭:

$("#tabs").tabs().find(".ui-tabs-nav").sortable({ axis: 'x' }); 
$("#tabs").tabs({ event: 'mouseover' }); 

而這在體內:

<div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">First</a></li> 
       <li><a href="#tabs-2">Second</a></li> 
       <li><a href="#tabs-3">Third</a></li> 
      </ul> 
      <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
      <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
      <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
     </div> 

回答

2

jQuery的支持very rich plugin model。您可能需要查看Menu Plugin,而不是試圖操作選項卡來像菜單一樣工作。

+0

當我滾動菜單項而不是其他項目列表時,是否可以顯示div? – kralco626 2010-09-03 16:14:00

+0

你可以把任何你喜歡的東西放在任何LI元素中,所以你應該能夠在你的內容中粘貼一個div。 – Josh 2010-09-03 16:19:18

+0

聽起來很酷。我能否保留我的主題?我不確定這是如何工作的。我在jQuery網站上創建了一個自定義主題,我認爲這很酷。所以當我創建一個ul並調用它的.Tabs()函數時,它創建了一個包含我的主題的選項卡。我會(以及如何)將我的主題應用到第三方菜單插件? – kralco626 2010-09-03 16:28:14

0

Here's an example如何使用jQuery實現這種行爲。這個例子很簡單,但你可以根據需要設計它。

+0

我試過你的例子。我在上面的問題中發佈了我的原始代碼。我的風格自動應用。我如何將我的樣式應用於您的示例? – kralco626 2010-09-03 17:27:10