スポンサードリンク

jQuery UI のタブUIを動かしてみた

jQuery UI top

とりあえず jQuery UI のタブUIを動かしてみたのですが、これが拍子抜けするほど簡単に実装できちゃいました。

試したソースは以下の通りなんですが、ほとんど切り出して貼り付けただけです(^_^;)。

実装上の注意点としては、まずタブになるLIタグ内のアンカー(A)タグのhref属性に指定するIDと、タブの内容になるDIVタグのIDを揃える必要があります。

また、スクリプトを実行させる部分($( "#tabs" ).tabs();)については、必要なタグの後に書かないと動きませんでした。

これについては、HTMLなオブジェクトがWebブラウザ内に出来てからでないと動かない。と考えると納得がいきます。

もしくはHEADタグ内で各種ファイルを読み込んだ後に

というように書いておくと良いみたいです。この辺はちゃんとjQueryを勉強しないといけないところですね。

でもまぁ、とりあえずタブUIを実装したい! という場合だと、これは非常にお手軽です。

参照リンク
 ・Tabs | jQuery UI(実装のサンプル)

【関連エントリー】
 ・jQuery UI を導入してみよう

スポンサードリンク
コメント
Verify your Comment
Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

コメントを投稿

プロフィール


  • 書いてる人:夢界 陸

    名古屋在住のおっさん。
    プログラミングやガジェットの話など、 日々の興味を徒然と綴っています。



    Twitterやってます @mukairiku



    運営サイト
    www.mukairiku.net

アクセスランキング


ブログ内検索

Licenses

  • Creative Commons License

OTHER


  • このブログのはてなブックマーク数

    ブログパーツ
Blog powered by TypePad

スポンサードリンク