札幌でWebデザイナーをやっているRINの勉強ブログ。Web Design/PHP/CSS/写真メイン
In: jQueryを学ぶ
10 5月 2009仕事でjQueryを使ったタブメニューを作ったので忘れないようにメモ。
それぞれの挙動も比較しやすいように並べてみた。
今日が勉強初投稿の日！
photo:新川通り
まずはファイルの用意
下記リンクからダウンロード。
・jQuery本体…Past Releases内→最新バージョンのMinified
・ui.core.js/ui.tabs.js/ui.tabs.css一式(ui.tab.zip) (Mirror)
head内にリンクを張る
ダウンロードしたファイルに対して、head内にリンクを張る
さっそく使ってみる
本文にhtmlを追加。
下記scriptをheadかbodyどちらかに追加。
デフォルト
$(function() {
$(’#ui-tab1 > ul’).tabs();
});
タブ1
タブ2
タブ3
タブ1の内容
タブ2の内容
タブ3の内容
フェードアウト/フェードイン エフェクト
opacity: ‘toggle’, duration: ‘normal’
$(function() {
$(’#ui-tab2_normal > ul’).tabs({ fx: { opacity: ‘toggle’, duration: ‘normal’ } });
});
タブ1
タブ2
タブ3
タブ1の内容
タブ2の内容
タブ3の内容
Name:RIN
Age:25
性別:男
Location:Sapporo
Job:Webデザイナー
札幌のWebデザイナーです。
Web Design/PHP/CSS/写真をメインに
勉強した事、思った事を書いていきます。
思い立ったがfollow me!
Twitter:rin316