心地良く動いてくれるアコーディオンライブラリ。
tabAccordion
設置方法等は出揃っているし、オフィシャルを見れば問題なく設置できる。
注意点を何個か
非常にいいライブラリなんだけど、スクリプトを<head></body>に書かなければいけなかったり、プリセットのCSSに#wrapperが設定されてたり（変更可能だけど書き直さなきゃ使えない。。）微妙な点も少しあり。。。
tabAccordion
設置方法等は出揃っているし、オフィシャルを見れば問題なく設置できる。
注意点を何個か
- xml宣言をしているとIE6では動作しない。（コンテンツは見れる）
- ネスケだと動かないどころか、コンテンツが表示されない。
- デザイン段階からIE6で動作しない場合の見た目も視野に入れておく。
- トリガーになる部分がdivで囲んであると、ページを開いてから一度クリックしないとコンテンツが表示されなかった。
- <head>内にスクリプトを記述。
- </body>前にもスクリプトを記述。
非常にいいライブラリなんだけど、スクリプトを<head></body>に書かなければいけなかったり、プリセットのCSSに#wrapperが設定されてたり（変更可能だけど書き直さなきゃ使えない。。）微妙な点も少しあり。。。
概要
- ソースにはテキストを書くが、ブラウザで出力されるのは画像。
- <h2>heading01</h2>がソースは<h2>heading01</h2>のまま<h2><img src="heading01" /></h2>として出力される
メリット
- ソースは<h2 id="heading01" class="jqir">javascriptでソースを汚さずテキストを画像へ</h2>のようにテキスト情報を入れられる。
- 従来のCSSで背景で実現するものとは違い、印刷時にも問題なく、ブラウザで画像を表示しないようにしていてもテキストが表示される。
- idで画像のファイル名を適応させていくので同一ページ内に同じものを使うとidが重複してしまってvalidにならない。
- jqueryライブラリ・JQIRをダウンロードしてきて、解凍し任意のフォルダに置く。
- htmlのheadに
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-jqir.js"></script>
のように記述し、jqueryライブラリ・JQIRを読み込む。 - jquery-jqir.jsの最後に$(function(){
$(".jqir_jpg").jQIR("jpg", "img/");
});
のように記述する。
$(".jqir_jpg")は任意のCSSクラス名
.jQIR("jpg", "img/")の
"jpg"は適応させる画像フォーマットPNGに適応させる場合"png"となる。
"img/"は画像までのパスを記述。
例えば、JQIRを同階層のimgというフォルダの中にあるpngにjqir_pngというクラス名で適応させたい場合は
$(function(){
$(".jqir_jpg").jQIR("jpg", "img/");
$(".jqir_png").jQIR("png", "img/");
});
となる。 - html側への記述は
<h2 id="welcometoboplog" class="jqir_jpg">welcome to boplog</h2>
とする。
classを入れることでjqirが適応される。
idで画像を指定するので、上記の場合welocometoboplog.jpgという画像がこのh2に対して置換される。
例えば、helloboplog.pngという画像に置換したい場合は、
<h2 id="helloboplog" class="jqir_jpg">hello boplog</h2>
という形になる。
