如何正確使用jquery的tabs（）函數？

在我的Grails應用程序，我有一個GSP，看起來有點像這樣：如何正確使用jquery的tabs（）函數？

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"><p>foo</p></div> 
    <div id="tabs-2"><p>bar</p></div> 
    <div id="tabs-3"><p>zip</p></div> 
</div> 

<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery("#tabs").tabs(); 
    }); 
</script>

如果我理解正確，jQuery的選項卡（）調用應該讓我的「標籤」的div樣子一個標籤面板。那是對的嗎？如果是這樣，它不起作用。它只是呈現爲正常的ul。

任何想法？

來源

2011-10-02 Stephen Gross

我建議只是沒有用插件的jQuery或jQueryUI的困擾。相反，只需將JS下載到您的web-app/js文件夾中即可。然後使用傳統的標籤，但也使用Grails的「資源」標籤庫，阿拉引用它們....

<script type="text/javascript" src="${resource(dir:'js',file:'jquery.js')}"></script> 
<script type="text/javascript" src="${resource(dir:'js',file:'jquery-ui.js')}"></script> 
<link rel="stylesheet" href="${resource(dir:'css',file:'jquery-ui.css')}" />

我喜歡使用插件的很多事情，但作爲少數JS庫這樣簡單的事情，我只是沒有看到足夠的價值。使用jQuery插件有一點價值，因爲它提供了一個grails類，它實現了對'remote *'標記庫（ala http://grails.org/doc/latest/ref/Tags/submitToRemote.html）的jQuery支持，但是我從來沒有使用過這種方法，因爲我贊成直接使用jQuery。

來源

2011-10-03 04:38:17 James

好的，我獲得了jquery和jquery-ui發行版，並將它們放入了web-app/js。我將標記修改爲如下所示：但是，它仍然顯示不工作。 –

The tabs widget是jQuery UI的一部分，它是jQuery的擴展。你需要在你的頁面上安裝jQuery UI。請參閱以開始使用jQuery UI。

來源

2011-10-02 17:19:03

是的，我有jQuery和確認，基礎工作。 jQuery（document）.ready（function（）{ alert（「hi」）; }）;}};} 。所以alert（）起作用，但tabs（）不起作用。 –

選項卡是* jQuery UI *的一部分，是jQuery擴展**，必須單獨安裝。 –

我已經安裝了jquery-ui插件，並向我的GSP添加了「」。但tabs（）調用仍然沒有效果。我如何確認jquery-ui安裝正確？ –

如果你有腳本而不是CSS文件，那麼你不會達到任何目的。

要獲得jQueryUI的框架的捆綁與CSS文件和腳本一起使用的ThemeRoller：

來源

2011-10-02 18:24:18 vertazzar

好的，謝謝大家的幫助。這是最後的工作：

我獲得了jquery和jquery-ui發行版，並將它們直接解壓縮到我的web-app文件夾中。

我用下面的標籤：

<g:javascript library="jquery-1.6.2.min"/> 
<g:javascript library="jquery-ui-1.8.16.custom.min"/> 
<link rel="stylesheet" href="${resource(dir:'css/smoothness',file:'jquery-ui-1.8.16.custom.css')}" />

注意，我忘了鏈接到相應的CSS。事實證明，正確的做法有點古怪。

來源

2011-10-03 14:44:59

在ApplicationResources.groovy：

modules = { 
    application { 
     resource url:'js/application.js' 
    } 
    jqueryui { 
     resource url:'js/jquery-ui-1.10.2.custom.min.js' 
    } 
}

在你的GSP文件，只需在頭部添加此：安裝

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<r:require module="jqueryui" /> 
<script> 
    $(document).ready(function() { 
     $("#tabs").tabs(); 
    }); 
</script>

來源

2013-04-27 17:29:56 earthling

如何正確使用jquery的tabs（）函數？

回答

相關問題