jQueryとui.tabs.jsを使って


$(function(){
$('#info-tab>ul').tabs();
});

タブを動かしたいのですが、firebugによると

$.widget is not a function
[Break on this error] destroy: function() {
ui.tabs.js (457 行目)
$("#info-tab>ul").tabs is not a function
[Break on this error] $('#info-tab>ul').tabs();

のようなエラーが出てしまいます。数時間やってみましたが原因がわかりません。
どうしたらよいでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2010/03/27 02:14:53
  • 終了:2010/03/27 16:16:40

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512010/03/27 06:34:29

ポイント70pt

ui.tabs.jsという事は、jQueryのバージョンは1.3.2ですか?

ui.tabs.jsの他に、ui.core.jsも必要です。

※次のように、ui.tabs.jsより先にui.core.jsを読み込んでください。

		<script type="text/javascript" src="ui/ui.core.js"></script>
		<script type="text/javascript" src="ui/ui.tabs.js"></script>

http://jqueryui.com/download

※ダウンロードしたファイルを解凍して、「development-bundle」→「ui」フォルダの中を確認してください。

この中に必要なファイルが入っています。

※上記フォルダ内のjquery-ui-1.7.2.custom.jsあるいは、「js」フォルダ内のjquery-ui-1.7.2.custom.min.jsを使用する場合は、ui.tabs.jsとui.core.jsは必要ありません。


※jQuery 1.4以降用のUIバージョン1.8の場合は、jquery.ui.tabs.jsの他にjquery.ui.core.jsとjquery.ui.widget.jsが必要になります。

記述する順番もUIバージョン1.7.2と同じようにjquery.ui.core.jsとjquery.ui.widget.jsを先に記述して読み込むようにします。

(jquery.ui.core.jsは後に記述しても大丈夫なようですが、一応先に記述して置く方が良いと思います。)

※必要なファイルもjquery-ui-1.8.custom.min.jsあるいはjquery-ui-1.8.custom.jsを使用する場合は、他にはjquery.jsがあれば大丈夫です。


今回のエラーとは関係ありませんが、HTMLの方の構造はどうなっているのでしょうか?

idにinfo-tabを指定した要素の中にulがあって、その中にさらにタブを適用したいulがある場合は以下のように指定しますが、

$('#info-tab>ul').tabs();

idにinfo-tabを指定した要素の中にあるulに適用させたい場合は、以下のように記述するだけで大丈夫です。

$('#info-tab').tabs();
id:sulfonamides

お!バッチリ動きました!

ご指摘いただいた点+jquery.ui.tabs.jsをダウンロードしたものに差し替える でうまく行ったようです。

バージョンが違ったのかな?

ありがとうございました。

2010/03/27 16:16:04
  • id:rouge_2008
    解決した後ですが、少し補足を・・・

    『idにinfo-tabを指定した要素の中にulがあって、その中にさらにタブを適用したいulがある場合~』
    上記についてですが、ul直下に直接ulを記述する事はないと思いますので、厳密にはこのような構造の場合は以下のように記述します。

    $("#info-tab>ul>li").tabs();

    ※上記の構造では、CSSの調整も少し必要になります。


    ※以前のバージョン(1.2.6に同梱されていたバージョン不明のUI Tabsの場合、通常の構造なら「#info-tab>ul」でも「#info-tab」どちらでも大丈夫のようですね。)
    なるべく新しいバージョンを使用した方がいいと思いますが、参考までに報告させていただきます。
    いるかと少し多めのポイントありがとうございました。(^^)

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません