memo-memo

今回試してみたプラグインは、myAccordionです。
配布サイトは、こちら。

このプラグインは、配布サイトに、使い方が一切かかれていません。ただ、そんなに使うのは難しく無かったです。

html

 <div id="myAccordion">
<!-- Element -->
<div class="myAccordion-declencheur"><p>その１</p></div>
<div class="myAccordion-content">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
<!-- /Element -->
<!-- Element -->
<div class="myAccordion-declencheur"><p>その２</p></div>
<div class="myAccordion-content">
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
</div>
<!-- /Element -->
</div>

まずhtmlは、上記のように全体を、myAccordionというidを付けたdivタグで括ります。その中に、アコーディオンで表現したい見出しと、本文を書いていきます。

上記の場合、グリーン、ブルーの部分が、各々アコーディオンで表現される部分です。

で、次は、javascriptです。

javascript

$(function() {
	$("#myAccordion").myAccordion({
		speed: "fast", // @param : low, medium, fast
		defautContent: 0 // @param : number
	});
});

こんな感じで、呼び出します。（ダウンロードした、プラグイン本体と、cssは、別途読み込みます。）

パラメータも、今回は2つしかないようです。

赤字の「speed」は、文字通り、アコーディオンが、開いたり閉じたりするスピードの調整です。

青字の「defautContent」は、ブラウザに表示されたときに、一番最初に開いている項目です。

上記のhtmlの場合、「defautContent:0」を指定した場合、グリーンの部分が、一番最初に開いた状態で、ブラウザに表示されます。

付属のcssも、非常にシンプルなので、自分のサイトに合わせて、カスタマイズしやすそうです。

今回使ってみたプラグインは、こちらです。

いい感じに、画像を並列に表示して、スライドしてくれます。

横についている「⇒」をクリックすると、画像がスライドします。
ダウンロードページは、こちらです。

使い方は、まずプラグインをダウンロードします。で、jQuery本体とプラグイン本体と、cssを2ファイル分、htmlに読み込みます。

cssは、メインのcss（libフォルダに入っている、jquery.jcarousel.css）と、使いたいスキン（skins/ie7もしくはtango/skin.css）の2ファイルです。今回は、ie7を使ってみました。

<link rel="stylesheet" type="text/css" href="path/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="path/ie7/skin.css" />
<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery.jcarousel.pack.js"></script>

こんな感じです。

あとは、htmlの<ul>タグを使って、イメージを指定します。

<ul id="mycarousel" class="jcarousel-skin-ie7">
 <li><img src="images/gazou_01_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_02_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_03_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_04_s.jpg" width="75" height="75" /></li>
 <li><img src="images/gazou_05_s.jpg" width="75" height="75" /></li>
 </ul>

こんな感じです。

後は、scriptタグで、実行します。

<script type="text/javascript">
$(function(){
 $("#mycarousel").jcarousel({
 size : 5,
 scroll:1
 });
});
</script>

こんな感じです。他のプラグイン同様、連想配列形式で、パラメータを引数に持てます。パラメータについての詳細は、本サイトを確認しましょう。

で、注意点としては、まずhtmlの赤字で書いてあるクラス名ですが、使いたいskinの名前になる様です。今回は、jcarousel-skin-ie7もし、tangoを使いたかったら、クラス名はjcarousel-skin-tangoになります。その際、読み込むcssも、tangoフォルダに入っている、skin.cssを読み込もう。

次の注意点は、青字の画像のサイズです。どうやらデフォルトは、width、hight共に、75pxでcssのファイルが作られているようです。この画像をwidth、hight共に100pxにしたい場合、htmlだけじゃなくて、skin.cssの内容も変えなきゃならないっぽいです。

変えたのは、5カ所です。

まず、ie7/skin.cssの7～10行目のwidthの値

.jcarousel-skin-ie7 .jcarousel-container-horizontal {
 width: 320px;/*デフォルトでは、 245px*/
 padding: 20px 40px;
}

つぎは、18～21行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-clip-horizontal {
 width:  320px;/*デフォルトでは、 245px*/
 height: 102px;/*デフォルトでは、 75px*/
}

つぎは、28～32行目のwidthと、heightの値

.jcarousel-skin-ie7 .jcarousel-item {
 width: 100px;/*デフォルトでは、 75px*/
 height: 100px;/*デフォルトでは、 75px*/
 border: 1px solid #fff;
}

とり合えず、上記の部分を直したら、きちんと表示されました。様は、表示しているところを画像サイズに合わせて広げる感じです。

後、写真自体を中央に配置したい場合は、jquery.jcarousel.cssの5行目以降の

.jcarousel-container {
 position: relative;
  }

に、

.jcarousel-container {
 position: relative;
 margin:0 auto;
}

こんな感じで、赤線のmargin:0 auto;を追加すれば、真中に表示出来ました。

他にも、本サイトのサンプルを見ると、いろいろ使い方があるみたいなので、追々触ってみようと思います。

こちらも、同名のプラグインがあるみたいだけど、今回使ってみたのは、こちらです。かなり、自由度の高い、角丸を作ってくれるプラグインです。
本サイト

使い方は、いたってシンプルで、まず、<script>で、ダウンロードしたプラグインを読み込んだら…

html

<div　class="corner">
 <h5>コーナー</h5>
 <div>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
 </div>

こんな感じで、htmlを書く。

次は、

ｊｓ

$(function(){
 $(".corner").corner();
});

こんな感じで、実行すればOK。

オプションもたくさん用意されていて、色々なタイプの角丸（角が丸くなるだけじゃないオプションもある。）が作れる。

とっても便利でしょう。

ただひとつ注意点は、このプラグインは、上記のhtmlの場合、div.cornerのバックグラウンドを角丸に変える感じに作られているらしく、背景色に、コンテンツ自体の背景色と同じ色をcssで指定していると、プラグインが適用されたかどうかがブラウザで目視しずらい。って言うか、同じ色だとわからない。プラグインを適用させたい場合は、cssで、バックグラウンドカラーを変えよう。

backgroundで、画像を指定したら、どうなるのかな？今度やってみよう。

同じような名前のプラグインがあるみたいだけど、今回試してみたのは、
こちらです。

使い方は、まず、プラグイン自体をダウンロード（っていうか、このサイトの場合はコピペ）して、実行させればオーケー。使い方自体は、他のプラグインと、たいして変わりません。

html

<div>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
...
</ul>
</div>

js

<script type="text/javascript">
$(function(){
$("div.foo").carousel();
});
</script>

こんな感じで、実装できます。オプションも追加可能です。オプションに関しての詳細は、本サイトへ。

さて、このプラグイン、実装自体は簡単だけど、なぜか一緒にくっついてくるはずの、（他のプラグインではくっついてきてた）cssのファイルが、本サイトに無い。リンクをたどると、似たようなのがあるけれど、それとは違うらしい。（違うのか？）うーん英語が解らない…。

ってことで、このプラグインを使うときは、cssは全部自前で作らなきゃならないらしい…。イメージも自分で用意しなきゃならないっぽい。firebugをフル活用でcssを組むしかないですな…。

使った感じは、やっぱり写真のスライドに使うのが無難な気がした…。テキストに充てるのは、若干面倒な感じ。

cssが、全部自前ってこともあり、汎用性はかなりあるのでは？ちょっと使いたいときには便利です。

ひとつ前に書いた記事のやり方だと、ie6でエラーが出たので、修正しました。

htmlは、<div>タグをひとつ追加

<div id="flip-tabs">
 <ul id="flip-navigation">
 <li><a href="javascript:void(0)" id="tab-0">Recent</a></li>
 <li><a href="javascript:void(0)" id="tab-1">Popular</a></li>
 <li><a href="javascript:void(0)" id="tab-2">Comments</a></li>
 </ul>
 <div id="rel">
 <div id="flip-container">
 <div>
 PutPut Content for first tab
 </div>
 <div>
 Put Content for second tab here
 </div>
 <div>
 Put Content for third tab here
 </div>
 </div>
 </div>
 </div>

cssは、一項目追加

@charset "utf-8";
#flip-tabs{
width:300px;
margin:20px auto; position:relative;
}

#rel{
position:relative;
}

#flip-navigation{
margin:0 0 10px; padding:0;
list-style:none;
}

#flip-navigation li{
display:inline;
}

#flip-navigation li a{
text-decoration:none; padding:10px;
margin-right:0px;
background:#f9f9f9;
color:#333; outline:none;
font-family:Arial; font-size:12px; text-transform:uppercase;
}

#flip-navigation li a:hover{
background:#999;
color:#f0f0f0;
}

#flip-navigation li.selected a{
background:#999;
color:#f0f0f0;
}

#flip-container{
width:300px;
font-family:Arial; font-size:13px;
}

#flip-container div{
background:#f00;
}

JSは、若干追加

$(function(){
//    initialize quickflip
 $('#flip-container').quickFlip();

 $('#flip-navigation li a').each(function(){
 $(this).click(function(){
 $('#flip-navigation li').each(function(){
 $(this).removeClass('selected');
 });
 $(this).parent().addClass('selected');
//            extract index of tab from id of the navigation item
 var flipid=$(this).attr('id').substr(4);
//            Flip to that content tab
 $('#flip-container').quickFlipper({ }, flipid, 1);
 return false;
 });
var cont_style   = $("#flip-container").attr("style");
var div_attr     = $("#flip-container div").attr("style");
var komozi       = div_attr.toLowerCase();
var div_attr_arr = komozi.split("height");
var style_tuika  = cont_style + " height " + div_attr_arr[1];
$("#flip-container").attr("style",style_tuika);
$("#rel").attr("style", "height" + div_attr_arr[1]);
});

各々、赤字の部分が変更点です。

プラグインで動的に付加してくれている、div#flip-containerのstyle属性のposition:relative;が、ie6では、無視されるらしい…

って事で、新たにdiv#relを追加して、cssで、position:relative;を指定しています。

JSの方は、なぜか、ie6の場合、style属性を取得すると、全部大文字で取得されちゃいました。（marginじゃなくてMARGIN…こんな感じでした）

なので、一度toLowerCase();で小文字に変換しています。

後、新しく追加したdiv#relに、style属性のheightを指定しています。

お願いだから、これ以上バグ出ないで…