Javascript

[JS]タブ式メニューとアコーディオンをつかったサンプル

[JS]タブ式メニューとアコーディオンをつかったサンプル

昨日紹介しましたアコーディオンとタブの切替を使ったサンプルを作ってみました。

この前紹介したyuga.jsにはタブの切替機能もついていますので、自分はいつもこのyuga.jsの機能を使ってやっていますので、それの使い方など簡単な解説をしておきたいと思います。

demo page

jQueryでの開閉式のアコーディオンの動きいろいろ

jQueryでの開閉式のアコーディオンの動き

クリックをすると開閉するようなメニューやコンテンツってよく見かけたりしますし、実際に使いたいってクライアントもけっこう多いですしね。

開閉時の動きについても実際いろいろとあるわけなんですが、今回はjQueryで出来る一番基礎的な事を紹介しておきたいと思います。

demo page

優雅なWeb制作のためのJSの最新版 yuga.js 0.7.0

yuga.js Logo

自分が愛用しているyuga.jsの最新版「yuga.js 0.7.0」が出ました。
自分はyuga.jsがなかったら生きていけないくらい><それくらい必要なものとなってます!

ダウンロードは制作者のKyosukeさんブログ記事「yuga.js 0.7.0 - 優雅なWeb制作のためのJavaScript」からお願いします。

[JS]画像をスライドショーさせるスクリプト

JavaScriptスライドショーさせるスクリプト

クリック後に画像の切替やテキスト表示の切替、サイドにあるアイコンで画像をスライドさせるスクリプトについてWeb Development Blogさんで配布されていたのが気に入ったので紹介しておきたいと思います。

[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

[jQuery]Flashのように画像やテキストを切り替えるs3Slider.js

以前コリスさんで紹介されていて知ったのですが、s3Sliderはフラッシュのように画像やテキスト切り替えてくれるスクリプトです。

動きもスムーズですし、テキストも上下左右から表示する事が出来るのでけっこう使い道はありそうなので詳しく解説しておきたいと思います。

demo page

jQueryを使って画像スクロール、クリック後画像の切り替えをする

jQueryを使って画像スクロール、クリック後画像の切り替えをする

以前紹介した画像をスクロールさせる jquery.scrollable.jsのjquery.scrollable.jsとJavaScriptを使って画像の切り替え&LightBox使用で使ったスクリプトを使って、並んでる画像はスクロール、それをクリックしたら画像を切り替える画像ギャラリーを作ってみました。

demo page

コンテンツ内を開閉してくれるアコーディオンメニュー [JS]

Animated JavaScript Accordion V2

「Animated JavaScript Accordion V2」で配布。紹介されているスクリプトなんですが、容量も少なく、アコーディオンメニュー開閉の動作もスムーズのなので使い方や注意点などを紹介しておきたいと思います。

demo page

簡単に設置できるTableをソートしてくれるJavaScript

JavaScript Table Sorter

JavaScript Table Sorterで配布。紹介されているスクリプトなんですが、容量も少なく、設置も簡単なのでテーブルをソートさせたいと思っている方は是非使ってみて下さい。

※jQueryやPrototypeなど他のスクリプトは必要ありません。

demo page

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips

CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips

今回ご紹介するTooltipsとはCreate simple tooltips with CSS and jQuery - Part 2: Smart Tooltipsでご紹介されています。

使い方が分からないよ><って人の為に使い方や少しいじる程度の解説でもしておきます。

min-width、min-height、max-width、max-heightをIE6でも実装する方法

「min-width」「min-height」「max-width」「max-height」をIE6でも実装する方法

CSSのの中に「min-width」「min-height」「max-width」「max-height」と言うプロパティがあるのですが、IE6ではそのままでは使えないので知らない人もいると思うですが、これがけっこう使えるんですよね。

サイト全体の横幅をpx指定せずに、%やaoutなどを使ってブラウザのサイズに合わせて可変するようなサイトを見かけるんですが、この時にmin-widthとかを指定しておくとブラウザのサイズが小さくなっても表示が変にならないようになるんですよ。

まぁーそんなわけでIE6でも実装出来る方法を解説しておきます。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年