しばらく充電します

2011年3月より、jQueryの基本構文から応用例にいたるまで、
実践サンプルとともに掲載してきたjQuery基本構文集ですが、
今回をもってしばらく充電いたします。
jQueryの新しいコンテンツを練り上げて、連載再開する日まで、
みなさまの応援よろしくお願いいたします。
jQueryに関してはプラグインを中心としたjQueryライブラリー
DOM形式のJavascriptに関してはJavascriptLibrary
phpに関してはphp実験室をよろしくお願いします。

Posted in: コラム by admin No Comments

【応用編】ナビゲーションNo5

IE6は透過PNGファイルに対応していないため、
通常のイメージタグでWEBサイトに貼りつけると、
透過部分が濁って表示されてしまいます。
ナビゲーションの最終回として、IE6対応のナビゲーションにしてみましょう。
わかりやすくなるよう、背景に画像を配置しておきましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“img.rollover”).each(function(){
  $(“<img>”).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
 });
 
 if($.browser.msie && $.browser.version<7){
  $(“img.rollover”).each(function(){
   $(this).data(“src”,$(this).attr(“src”)).attr(“src”,”images/transparent.gif”)
   .css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”);
   
  }).mouseover(function(){
   $(this) .css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+$(this).data(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)+”‘,sizingMethod=’scale’)”);
  }).mouseout(function(){
   $(this).css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”); 
   });
   }else{
  $(“img.rollover”).mouseover(function(){
   $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)); 
  }).mouseout(function(){
   $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)); 
  });
 }
});
</script>

【HTML】
ナビゲーションNo1と同じ

ナビゲーションサンプル

Posted in: 応用例 by admin No Comments

【応用編】ナビゲーションNo4

画像に透過効果を付けたいとき、PNGファイルを使いますが、
IE6はPNGファイルのアルファ値に対応していません。
しかし、現在使用されているブラウザはIEが最も多く、
IE6もまだ使用されているため、無視するわけにもいきません。
そこで、ユーザーのブラウザがIE6のときだけ、
処理を分岐させ、スタイルシートで透過PNG可能となるようにしましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //ロールオーバー時の画像をキャッシュ
 $(“img.rollover”).each(function(){
  $(“<img>”).attr(“src”,$(this).attr(“src”)
   .replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
 });
 //IE6のとき、透過PNGの対処
 if($.browser.msie && $.browser.version<7){
  $(“img.rollover”).each(function(){
   $(this).data(“src”,$(this).attr(“src”)).attr(“src”,”images/transparent.gif”)
   .css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
  (src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”)
;   
  }).mouseover(function(){
   $(this) .css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
  (src='”+$(this).data(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)
  +”‘,sizingMethod=’scale’)”)
;
  }).mouseout(function(){
   $(this).css(“filter”,”progid:DXImageTransform.Microsoft.AlphaImageLoader
 (src='”+$(this).data(“src”)+”‘,sizingMethod=’scale’)”)

  });
 //IE6以外のブラウザの場合
 }else{
  $(“img.rollover”).mouseover(function(){
   $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)); 
  }).mouseout(function(){
   $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)); 
 });
 }
});
</script>

【HTML】
ナビゲーションNo1と同じ

ナビゲーションサンプル

Posted in: 応用例 by admin No Comments

【応用編】ナビゲーションNo3

マウスオーバー時の画像を一度目に使用するとき、
サーバーからファイルを読み込むために時間が必要なため、
スムーズにロールオーバーしないことがあります。
その現象を防ぐために、ページが読み込まれるときに、
ロールオーバー後の画像ファイルも一緒に読み込んでしまいましょう。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“img.rollover”).mouseover(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)); 
 }).mouseout(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)); 
 }).each(function(){
  $(“<img>”).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″));
 });
});
</script>

【HTML】
ナビゲーションNo1と同じ

ナビゲーションサンプル

Posted in: 応用例 by admin No Comments

【応用編】ナビゲーションNo2

前回の方法でロールオーバーイメージを作った場合、
ボタン一つ一つにコードを書く必要があり、
ナビゲーションの数が変わるたびにコードを追加修正するのは
メンテナンス性の悪いコードです。
正規表現を使って、マウスオーバー時、マウスアウト時をスマートな書き方になるよう工夫しましょう。
これならば、ナビゲーションの数がいくつになってもコードを直す必要はありません。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“img.rollover”).mouseover(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)(\.[a-z]+)$/,”$1_on$2″)); 
 }).mouseout(function(){
  $(this).attr(“src”,$(this).attr(“src”).replace(/^(.+)_on(\.[a-z]+)$/,”$1$2″)); 
 });
});
</script>

【HTML】
<ul>
     <li><a href=”#”><img src=”images/oda.jpg” alt=”織田信長” />
          </a></li><!–
  –><li><a href=”#”><img src=”images/shibata.jpg” alt=”柴田勝家” />
          </a></li><!–
  –><li><a href=”#”><img src=”images/maeda.jpg” alt=”前田利家” />
           </a></li><!–
  –><li><a href=”#”><img src=”images/akechi.jpg” alt=”明智光秀” />
           </a></li>
</ul>

ナビゲーションサンプル

Posted in: 応用例 by admin No Comments