jQuery UI の Accordionを使ってみたメモ

何か今さら…というか特にめずらしくもない jQuery UI の Accordion ですが、初めて使ったのでそのときのことをメモっておきます。

オプションを個別に設定

アコーディオンごとに一部の設定を変えたいときは、.accordion("option", "プロパティ名", 値) とやるみたいです。

以下の例は、デフォルトで何も開かない設定にして、次にクラス別に最初に開くパネルを指定しています。

$(".accordion").accordion({ active: false });
$(".accordion.activeFirst").accordion("option", "active", 0);
$(".accordion.activeSecond").accordion("option", "active", 1);

なんかよく分かんないけどボックスの高さがうまくいかないときは…

なぜかこれで解決したので…。本当はちゃんと理解しないとだめだと思いますが（笑）

$(".accordion").accordion({ autoHeight: false });

各パネルの間に別のものを表示してもOK!

そのまんまですが、各パネルの間にただのテキストとか入れても問題ないみたいです。区切りとかに使えるかもしれません。

ヘッダのリンクタグについて - iPhoneがらみ

デフォルトではパネルのヘッダが h3 になっていて、ここに a タグが含まれますが、各 a タグの target 属性を揃えておいた方がいいです。

そうしないとiPhone で見たとき、target が違うパネルを選択する度にアドレスバーが出たり入ったりします。

ヘッダのリンクタグについて2 - iPhoneがらみ

iPhone に対応する場合、パネルにマウスカーソルを合わせると開く、event: 'mouseover' の設定は当然使えません。デフォルトの event: 'click' を使う必要があります。

event: 'click' の場合、ヘッダのリンクに URL を指定していてもヘッダをタップした時に遷移しません。パネルが開くだけです。

ただ iPhone はリンクを長押しすれば遷移するか聞いてくるので、どこかに「長い押しすればジャンプします」と説明を書いとけば良さげです。でも Android ってどうなるんだろ。。

各パネルの見た目を変えたいお

例えば2つ目のパネルだけ変えたいとき、2つ目のパネルの class 属性に second を入れたとすると、次のようにしてヘッダとコンテンツのデザインを変えられます。それぞれ、背景の画像を消して（ダウンロードしたときのテーマに入っていたので…）背景色とボーダーの色を設定しています。

.ui-accordion .second .ui-accordion-header {
	background: none;
	background-color: #fee;
	border-color: #fbb;
}

.ui-accordion .second .ui-accordion-content {
	background: none;
	background-color: #fdd;
	border-color: #fbb;
}

ヘッダにカーソルをあてた時のリンクの色なんかはこんな感じで変えます。

.ui-accordion .second .ui-state-default a {
	color: #f99;
}

.ui-accordion .second .ui-state-active a {
	color: #f33;
}

次いでに setInterval() を使えば、一定時間毎に hasClass() removeClass() addClass() などを使ってクラスを付けかえて、時間とともに各パネルの見た目が変化する、みたいなこともできます。

以下の例では各パネルの class を "panel blue" または "panel red" にしておけばそれぞれ 15秒ごとに blue クラスと red クラスが入れ替わります。

$(function() {
	setInterval(changePanelAppearance, 15 * 1000);
});

function changePanelAppearance()
{
	$(".panel").each(function() {
		if ($(this).hasClass('blue')) {
			$(this).removeClass('blue');
			$(this).addClass('red');
		} else {
			$(this).removeClass('red');
			$(this).addClass('blue');
		}
	});
}

関係ないけど… ($(セレクタ), this)

全然関係ないですが、($(セレクタ), this) で this 内だけ検索っていうのができるんですね。基礎中の基礎っぽいですが知らなかったので…。具体的には each() でまわしてそれぞれの中にある特定のクラスを検索、って時に使いました。

今日はここまで。『人を動かす／デール・カーネギー』を読み終わりました。ひたすらエピソードが載っていて、すごく読みやすい本でした。

エピソードについては若干「ん？」と思うところもなくはないですが、主張の部分は基本的に同意できます。

とにかくほめろって感じです。他には相手に関心を持て、相手に喋らせろ、自分の誤りを認めろ、誤りを指摘するな、議論を避けろ、笑顔を忘れるな、とか努力しようと思えばできそうなので、ちょっとやってみようという気になります。何ていうか、飲み物でいうと清涼飲料水っていう気がしました。

崖っぷちの男

たぶん技術っぽいネタ。ブログ名が決められない