MooTabs1.2を作ってみた。
またまた、タブをクリックしたら、コンテンツが変わるJavaScriptです。
今回は、mootoolsライブラリを使用した、MooTabs1.2.jsを作ってみました。
MooTabs1.2.jsは、タブをクリックすると、コンテンツ部分がストンという感じ表示されるJavaScriptです。jsファイルの値を変えれば、表示する際のエフェクトも変えられるようです。
/* MooTabs1.2.jsの準備 */
まず、mootoolsのページで、mootools.jsをダウンロードします。チェックは全部に入れるのが無難なようですが、MooTabsのサイトで、こちらのように指定されています。最後に、MooTabsのサイトから、MooTabs1.2のファイルをダウンロードします。これで準備は終了です。
/* MooTabs1.2.jsの設置 */
フォルダの構成は、
index.html
css
- mootabs1.1.style1.css
js
- mootabs1.2.js
- mootools-release-1.11.js
となっています。
次に、<head>～</head>内に、次のソースを加えてください。
<link rel="stylesheet" href="css/mootabs1.1.style1.css" type="text/css" media="screen">
<script src="js/mootools-release-1.11.js" type="text/javascript"></script>
関連記事
- SpryTabbedPanels.jsを作ってみた。2008/02/21
- 画像を使ったスライドメニュー、imagemenuを作ってみた。2008/02/13
- Glider.jsを作ってみた。2008/02/16
- Coda-Slider 1.1.1を作ってみた。2008/02/15
- Smoothboxを作ってみた。2008/01/30
- Slimboxを作ってみた。2008/01/30
- lightbox2.0を作ってみた。2008/02/03
- mooRevolverを作ってみた。2008/01/31
- Smooth galleryを作ってみた。2008/01/10
- CSSで、プルダウンメニューを作ってみた。2008/02/25
