javascript Archive

Javascriptでページ内スクロールをスムーズにするするっと動かすスクリプトを使おうとしたのだが、
IE6でのスクロールダウンが極端に遅いということでXML宣言をなくすと普通に動作するらしい。

それもなんだかなーということで、
IE6はスムーズスクロールじゃなくたってリンク先にぴょんって移動すればいいじゃないか！
ということで、
IE6だけスクリプトを読み込ませない方法を探しました。

全文を読む

目的：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;
   });
  });
 });
});

ついつい忘れがちになってしまうので、メモします。

リンク先URLがステータスバーに表示＆JavaScriptがOFFでも閲覧できるように別ウィンドウを小窓で開く方法

<a href="index.html" onClick="window.open('index.html','windowname','scrollbars=yes,width=600,height=600'); return false;">別ウィンドウでひらく</a>

<a href=”…”>の機能を無効化するためにreturn false; を指定
この記述がないと元のウインドウ側もリンク先へ移動してしまう
これでリンク先URLがステータスバーに表示され、JavaScriptがOFFでも閲覧できる小窓を開けます。

そして最後の仕上げに、onkeypressも合わせて記述しておきましょう。

<a href="index.html" onClick="window.open('index.html','windowname','scrollbars=yes,width=600,height=600'); return false;" onkeypress="window.open('index.html','windowname','scrollbars=yes,width=600,height=600'); return false;">別ウィンドウでひらく</a>

※スクリプトのイベント処理では、装置非依存性を確保するために、次の属性は対で使用するように薦められています。
onmousedown+onkeydown
onmouseup+onkeyup
onclick+onkeypress

ついでに、ウィンドウを閉じるときは…

<a href="javascript" onclick="window.close(); return false;">このウィンドウを閉じる</a>

これでOK！

そして、さらにtarget=”_blank”について検討すべきであるが、これはまた今度下記サイトを参考に検証しよう。
target=”_blank” を使わないで新しいウィンドウでリンクを開く方法
target=”_blank”を使わずに別ウィンドウで開く