【jQuery】記事を開閉したりする、switchHat.js

2010年6月28日（月）
JavaScript

小粋空間の中の人に会った時にMT5でこんな事したいんすよねーって話をしてて、その後MTQに書いたら、速攻でプラグインにしてくれました！
マジ感謝です。ありがとうございます。

ウェブページとかで、ページを生成したくない場合に使えるプラグインです。

PagePublishControllerプラグイン: 小粋空間

さて、今回は折りたたみするJSを結構前から所々で使ってて、毎回ソレを微妙に改変したりしながら使ってたのですがもうちょっと汎用性を高めた感じにしたくて、javascript が全く分からないのに色々やってソレっぽくしました。

これは、RedLine MagazineさんのjQueryでリストを開閉させたいがベースです。2007年11月08日 00:19 にちゃっかりしっかりコメント残してますね。

どんな感じの時に使えるかと言いますと、ウチのブログならサイドバーに有るアーカイブ部分です。
2010年以外は全部閉じてて、年部分をクリックすると開閉する感じのです。
他にMT underHatのトップに有る「もう少し詳しく読む」とかがソレです。
また、気持ち設定すればよくある質問みたいなのにも使える感じにしています。

jQuery使えば、とっても簡単に出来るのでそんな大したモンじゃありませんが、コレをベースにエロい人がすごくいい感じにしてくれるんではないかと期待を込めて公開する感じで！

これは、JSを分かって無い人間がCSS脳な感じで作ってるので、設計がイケてなかったり、色々不備が有ると思います。
一応、公開するに辺り致命的な部分が無いよう、TwitterでJS出来る人ヘルプを求めたら、kotarok先生と言うビックリするほどすんげー人が名乗りを上げてくださいまして、Skypeを通じて ~~ものすごい勢いでdisられながら~~ とても真摯に丁寧に教えて頂いたので最低限は大丈夫だと思いますが、switchHat.js を使う事によって生じた一切の問題に責任を負いません。
使う場合はあくまでも自己責任でお願いします。

ちなみに、JSが分かって無いと言う事は、こうするにはどうしたら的な質問とかにもほぼ答えられませんと言う事です＞＜

これを作るにあたって、実現したい機能が2つあったんですが、ボクの力じゃ上手く動作してくれなくてソコを聞きたかったんですが、そもそもダメな部分とかがあってそう言う部分まで面倒見て頂きました。
「今のままではキサマはグローバル名前空間を汚染してるんだ！ボケがっ！！」とかそんな感じで優しく教えてくれました。
「とは言え、ローカル化するにもお前が作った今のダメダメな設計じゃ手間が掛かり過ぎるんだよね、ボクだったら簡単にベストな設計が出来るんだけどねフフン」とか。

あ、先生の発言が脚色されてました。すみません。

そんなこんなで、最終的に if の使い方もまともにわかってなかったのでその部分を面倒見て頂いたんですが、ふと見てたら toggleってイベント関数で同じ事が出来たっぽいので公開してるのはそっちにしてます。
サンプルの zipに含まれている「jquery.switchHat_if.js」ってのがif 版です。

サンプル及びDL

設置方法など

サンプルサイトの方に結構色々説明が書いてありますが、まずは jquery を読み込ませます。
そしたら、downloadしたJSを同じような感じで jquery.switchHat.js も読み込みます。以下のような感じですね。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4");</script>
<script type="text/javascript" src="./js/jquery.switchHat.js"></script>

これで取りあえず準備はOKなので、特に設定を変更しない場合、開閉用のボタンにクラスswitchHatを付け、初期状態は非表示にしたい要素にクラスswitchDetailを付ければ取りあえず動く感じです。
サンプルだとspan要素にswitchHatって付けてますが、p要素とかでも良いです。
その場合、余白部分もクリック出来てしまいますが。

このswitchHat.jsは yuga.jsみたいにパラメータを指定することでそこそこ自分好みにする事が出来ます。
元々、この機能を付けたかったのでソレだけのために試行錯誤してた感じだったりもしますけど。
17行目辺りにある以下の部分を変更する感じです。

$(function(){
	$.uHat.switchHat();
	$.uHat.close();
	$.uHat.openAll();
});

例えば、よくある質問のdl要素だけに適用させて閉じるボタンはいらない場合は、以下のようにする事で可能です。

$(function(){
	$.uHat.switchHat({
		switchBtn: 'dl.faq dt',
		switchContents: 'dl.faq dd'
	});
	//$.uHat.close();
	$.uHat.openAll();
});

よくある質問とかには、全部開くボタンが良い感じで使えるかもですね。
他の例として閉じるボタンを画像にしたい場合は以下のような感じで出来たりします。

$(function(){
	$.uHat.switchHat();
	$.uHat.close({
		apCloseBtn: ''
	});
	$.uHat.openAll();
});

switchHat.jsと関連してますが、サンプルは開いたときに「チラ見」をしないようにしてます。
昔書いた記事の「よくある質問っぽいののjQueryを使ったサンプル」とかは最初に非表示部分がチラっと見えちゃうんですよね。
チラっと見えるとかちょっとドキドキするかも知れませんけど、ここでは見えない方が美しいので対処してます。

このチラ見対策は、HAM MEDIAさんの方法をそのまま使わせてもらっているので、そちらを見て頂くと良いかと。

JavaScript OFF環境に優しく？その２ | THE HAM MEDIA

チラ見防止関係は、none.js と none.css ってのになります。はい。

あと、サンプルではJSオフ時に「表示する +」とかが表示されないように、開閉用ボタンになるクラスswitchHatが付いている要素はCSSでdisplay: none;にして、JSが動いているとswitchOnってクラスが付くのでそっちでdisplay: block;とかにして表示しています。

ざっとこんな感じでしょうか。
いずれにしろ専門職の方から見たら不思議な事いっぱいな感じかもしれません。
知識が無いのに、色々やりたい事（主に汎用性を出来るだけ高める）とかを頑張った結果がこんな感じになったと言う事で・・・