jQuery Archive

目的：jQueryを使ってアコーディオンメニューをつくる。
“TRIPLEXXX：jQueryでアコーディオンメニューを作成する“を参考にさせていただきました。
下記にサンプルをかきかきしてみよう。
もちろんだが、jQueryをつかっているのでライブラリを入手して読み込みます。
今回は、jquery-1.4.3.min.jsを使用しました。

xhtml

<ul class="acc">
 <li><a href="1">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

1.シンプルなアコーディオンメニュー

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    $j(this).next().toggle().parent().siblings()
    .children("ul:visible").hide();
    return false;
   });
  });
 });
});

2.メニューの開閉がスムーズなアコーディオン

//　変更前
$j(this).next().toggle().parent().siblings()
.children("ul:visible").hide();
//　変更後
var params = {height:"toggle"};
$j(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params);

よって

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    //$j(this).next().toggle().parent().siblings()
    //.children("ul:visible").hide();
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

3.メニューの開閉がスムーズなアコーディオン（透明度もアコーディオン♪）

//変更前
var params = {height:"toggle"};
//変更後
var params = {height:"toggle", opacity:"toggle"};

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("li > a", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle", opacity:"toggle"};
    $j(this).next().animate(params).parent().siblings()
    .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

よし！
と思いきや、これではmenu 1-1など、リンクが無効になってしまっている。
理由はreturn false;でリンク先に飛ばないよう設定してしまっているため。
回避するには…return false;を消すわけにはいかないので、、、
アコーディオンにしたいaタグにクラス指定をする！
さぁやってみよう…

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

合わせてスクリプトの指定も変更

//変更前
$j("li > a", this).each(function(index){
//変更後
$j("a.open", this).each(function(index){

無事成功。
これでリンクが指定したURLに飛びます。

以下自分用まとめ

【今回使用するセット】

xhtml

<ul class="acc">
 <li><a href="1" class="open">menu1</a>
  <ul>
   <li><a href="#">menu 1-1</a></li>
   <li><a href="#">menu 1-2</a></li>
   <li><a href="#">menu 1-3</a></li>
  </ul>
 </li>
 <li><a href="2" class="open">menu2</a>
  <ul>
   <li><a href="#">menu 2-1</a></li>
   <li><a href="#">menu 2-2</a></li>
   <li><a href="#">menu 2-3</a></li>
  </ul>
 </li>
 <li><a href="3" class="open">menu3</a>
  <ul>
   <li><a href="#">menu 3-1</a></li>
   <li><a href="#">menu 3-2</a></li>
   <li><a href="#">menu 3-3</a></li>
   <li><a href="#">menu 3-4</a></li>
  </ul>
 </li>
</ul>

css

ul.acc a, ul.acc li ul a {
 text-decoration: none;
 color: #EFEFEF;
}
ul.acc a:hover, ul.acc li ul a:hover {
 text-decoration: underline;
}
ul.acc ,ul.acc li ul {
 list-style: none;
}
ul.acc {
 width: 150px;
 color: #EFEFEF;
 background-color: #333333;
}
ul.acc a{
 padding: 0 10px;
 display: block;
 height: 30px;
 line-height: 30px;
}
ul.acc li {
 border-top: 1px dotted #555555;
}
ul.acc li ul {
 margin: 0 0 0 15px;
 background-color: #666666;
}
ul.acc li ul a {
 padding: 5px;
 display: block;
 height: 20px;
 line-height: 20px;
}
ul.acc li ul li{
 border-top: 1px dotted #888888;
}

js

var $j = jQuery;
$j(function(){
 $j(".acc").each(function(){
  $j("a.open", this).each(function(index){
   var $this = $j(this);
   if(index > 0) $this.next().hide();
   $this.click(function(){
    var params = {height:"toggle"};
    $j(this).next().animate(params).parent().siblings()
         .children("ul:visible").animate(params);
    return false;
   });
  });
 });
});

商用でフラッシュ（swf）をライトボックス風に表示したくていろいろ見ていたのだが、
今回探すポイントとしては、
1. jQuery系プラグイン
2. 商用フリー
3. IE6対応

これが、なかなか見つからないのだ。
いろいろ探した結果報告。

shadowbox がよさそうなのだが、これは商用フリーではなく…

video lightbox これもよさそうだが、これまた商用フリーではなく…

そんなこんなでたどり着いたのが、、、

prettyphoto
ライセンス：Commons Attribution 2.5

おぉー。角丸でいい感じ。
商用でも使えそう♪
といろいろ試してみる。
いろいろ調整してみて、これならいけるかもーとちょっと喜んだのもつかの間、、、

IE6のこと忘れてた！！

チェックしてみると…
うぅぉぉー…表示がおかしい…。
だめか…
だめなのか…
もういやだ…
IEなんて大嫌い…
と、prettyphotoで結構時間を費やしてしまった…

なんか、はまるとすごく時間かかるよね。
気を取り直して翌日改めて探すことにする。

ってことで改めて探した結果、見つけたー！

その名もFancyBox
ライセンス：MIT and GPL licenses

るんるんるん♪

サンプルを参考にこんな感じで実装

<script type="text/javascript" src="./jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
 $(document).ready(function() {
  $("#spot .movie").fancybox({
   'padding'   : 10,
   'autoScale'   : true,
   'transitionIn'  : 'none',
   'transitionOut'  : 'none',
   'titlePosition'  : 'outside',
   'width'  : '320',
   'height'  : '240',
   'overlayColor'  : '#000',
   'overlayOpacity' : 0.9
  });
 });
</script>

<ul id="spot">
　　<li><a href="test1.swf" title="testmovie1" class="movie">動画1</a></li>
　　<li><a href="test2.swf" title="testmovie2" class="movie">動画2</a></li>
</ul>

cssの置き場所とかを変えるときはパスも合わせて変更する。

今回、動画の外に余白を入れたかったので、
‘padding’ : 10
を設定。

また、タイトルの表示は、
‘titlePosition’は’outside’にした。
この際の表示位置はどうやらそのページのスタイルにつられているようなので、
強制的に中央ぞろえにしたければスタイルを上書きして

.fancybox-title-outside {
 text-align: center;
}

とすればよい。

また、暗めにしたかったので
‘overlayColor’ : ‘#000′
‘overlayOpacity : 0.8
を設定。標準設定は
overlayColor : ‘#777′
overlayOpacity : 0.7

このように追加する場合は「,」を忘れないように、かつ最後に「,」をつけないようにする。
これは、ちゃんとIE6でも大丈夫！！

やったー！

と思いきや、コンテンツを既存ページに組み込むと、別のフラッシュも一緒に表示されるじゃないか…。
なんとなく記憶をたどって意外とすんなり解決。

解決方法
param name=’wmode’がvalue=’transparent’になっているかチェックし、なっていなければ設定する。

これで、無事解決！

ありがとうFancyBox！！

と思いきや、IE6だと閉じるボタンが見えない…
どうやらIE8でも。

ヌォーー…

ちょこちょこした結果、下記で解決できました。

【IE6-IE8】FancyBoxでクローズボタン（閉じるボタン）などが表示されない場合の解決方法！

jquery.fancybox-1.3.4.css
/* IE6 */以下の画像パスをルートからのパスに修正する！！

例
/js/fancybox/fancy_close.png　に画像がある場合、

fancybox/fancy_close.png
↓
js/fancybox/fancy_close.png

こんなかんじ。これで表示されるはず！

ふぅー解決できてよかったー。