« CSS3とjQueryを使った背景画像をアニメーションするボタン | トップページ | wordpressでjQuery uiを利用してみる-その(1) »

2011年6月20日 (月)

jQueryの使い方 - jQueryUIを利用してみる。#jQuery

「jQuery UI」はインタラクティブな機能を提供してくれます。

サンプルとして、アコーディオンの機能を取り上げてみます。
デモページ

まず「「jQuery UI」をダウンロードします。

ダウンロードよりQuick downloadsの「Stable(安定版)」からダウンロードします。

始めにアコーディオンのサンプルを見てみましょう。

ダウンロードされたファイルを解凍し、
development-bundleフォルダ > demosフォルダ > accordionフォルダ内のdefault.htmlを開いてみます。

このサンプルを元に解説していきます。

使用するリソース
jsファイルが4つ、cssファイルが1つです。

jsファイル
jquery-1.5.1.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.accordion.js

cssファイル
jquery.ui.all.css

オプションの設定
headタグ内に以下の記述をします。
<script>
//このエリアにオプションの記述をします。
</script>

始めに開くタブの設定
$(function() {
 $( "id名 or セレクタ名" ).accordion({active: x});
});

xの値
0ではじめのタブを表示させる設定になります。
2番目のタブを表示させたい場合はxに1と記述します。

マウスオーバーでアコーディオンを開く
$(function() {
 $( "id名 or セレクタ名" ).accordion({event: "mouseover"});
});

アコーディオンの横の幅の設定
$(function() {
 $( "#accordion" ).accordion({fillSpace: true});
});
$(function() {
 $( "#accordionResizer" ).resizable({
  minHeight: 140,//幅をpxで指定します。
  resize: function() {
  $( "#accordion" ).accordion( "resize" );
  }
 });
});

今回のheadへの記入とhtmlへの記入はデモファイルがあるため省略します。

|

« CSS3とjQueryを使った背景画像をアニメーションするボタン | トップページ | wordpressでjQuery uiを利用してみる-その(1) »

jQueryの使い方」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40437776

この記事へのトラックバック一覧です: jQueryの使い方 - jQueryUIを利用してみる。#jQuery:

« CSS3とjQueryを使った背景画像をアニメーションするボタン | トップページ | wordpressでjQuery uiを利用してみる-その(1) »