|
|
カテゴリ別サンプル
行数:
|
◆ jQueryでメージを縦にフリップする
(#1)
このサンプルは、jQueryのanimateメソッドを利用してイメージを垂直方向にフリップします。サンプルのイメージをクリックするとフリップして次のイメージが表示されます。
|
◆ Lorem ipsum(ロレム・イプサム)
(#2)
lorem ipsum（ロレム・イプサム、略してリプサム lipsum ともいう）とは、出版、ウェブデザイン、グラフィックデザインなどの諸分野において使用されている典型的なダミーテキスト。書籍やウェブページや広告などのデザインのプロトタイプを制作したり顧客にプレゼンテーションしたりする際に、まだ正式な文章の出来上がっていないテキスト部分の書体（フォント）、タイポグラフィ、レイアウトなどといった視覚的なデザインを調整したりわかりやすく見せるために用いられる。
「lorem ipsum」は様々なバリエーションがあるが、もっとも一般的なテキストは以下の通りである。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
このLorem ipsumを自動生成するツールがあります。「Standard Lipsum」「日本語」などが生成できます。パラグラフとワードを指定して生成することもできます。
|
◆ VistaとXPでIE8,IE7,IE6,IE5.5をテストするには
(#3)
Windows Vista/XPでIEの複数のバージョンを起動してWebページをテストしたいと思ったことありませんか。 IETestを使用するとIE8,IE7,IE6,IE5.5でWebページをテストできます。スタイルシート(CSS)やJavaScriptのテストに最適です。
|
◆ WordPressのコメント管理機能を実装する
(#4)
このサンプルは、jQueryのanimate()APIを利用してWordPressのコメント管理機能を実装しています。コメントの[削除]をクリックすると、そのコメントを非表示にします。[不承認]をクリックしたときは、コメントをグレーアウトします。[スパム]をクリックするとそのコメントを非表示にします。スパムとして認識されたコメントは、グレーアウト状態で表示されます。[承認]をクリックするとスパムとして認識されたコメントが通常のコメントとして表示されます。
|
◆ パネルを開閉する
(#5)
このサンプルは、jQueryのslideUp(), slideDown(), slideToggle()などのAPIを利用してgmailの受信トレイのようなインタフェースを実装しています。サンプルのヘッダーをクリックするとメッセージの本文が開いて表示されます。再度ヘッダーをクリックするとメッセージ本文が閉じます。[すべて閉じる]をクリックすると、すべてのメッセージが閉じます。[すべて表示]をクリックすると受信メールの全件(9件)を表示します。[5件のみ表示]をクリックすると、最新のメッセージを5件表示します。
|
◆ アコーディオン1
(#6)
このサンプルは、jQueryのslideToggle(), slideUp()などのAPIを利用してアコーディオンを実装しています。サンプルが表示されたらヘッダーをクリックしてください。クリックしたヘッダーの詳細が展開されます。再度ヘッダーをクリックすると詳細を折りたたみます。
|
◆ fadeToコマンド
(#7)
このサンプルは、jQueryのfadeTo()APIを利用して表の複数行をフェイドさせます。サンプルの[Fade Multiple Rows]ボタンをクリックすると行１、行３、行５にフェイドが適用されます。
|
◆ animate(params,options)
(#8)
このサンプルは、jQueryのanimate()APIを利用してdiv要素を拡大します。サンプルの[Animate1]ボタンをクリックするとdiv1要素が拡大されます。[Animate2]ボタンをクリックするとdiv2要素が拡大されます。[Reset]ボタンをクリックするともとのサイズに戻ります。Animate1ボタンは、animate()APIの引数にqueue:falseを指定して3種類のアニメーション(幅、フォントサイズ、ボーダー幅を変える)を同時に実行させます。Animate2ボタンは、3種類のアニメーションを順番に実行させます。
|
◆ toggle(f1,f2,f3,...)
(#9)
このサンプルは、jQueryのtoggle()APIを利用してul/li要素に宣言されているテキストの前景色を書き換えます。サンプルのテキストをクリックするとRed,Green,Blueの順に前景色が変わります。
|
◆ hover(over,out)
(#10)
このサンプルは、jQueryのhover()APIを利用してUI/LI要素で宣言されている項目に矢印を表示します。サンプルの項目にマウスを移動すると「赤」で矢印が表示されます。マウスを項目から移動すると矢印が消えます。
|
|