JavaScript++かも日記: 【ライブラリ】YUIとjQuery

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2008年04月29日

【ライブラリ】YUIとjQuery

【Ajax , JavaScript , Yahoo! UI , jQuery , ライブラリ】

ブックマーク-- Hatena

/ Livedoor

YUIもjQueryもお気に入りのライブラリなんですが、YUIのブログでaddClass的な処理のチュートリアルがあって、「ああ、最近はこうだよね」と、思いつつも、ふと、試しにjQueryに書き換えてみたら、やっぱりjQueryの楽チンさが際立ちました。

ちなみにこのjQueryコードで書き換えるのに要した時間は30秒です(^^;。CSSやHTMLはまったく同じでコード部分だけが違います。＜むしろ、ブログに書くのに時間がかかりますf^^;;

Introduction to Unobtrusive JavaScript, DOM Scripting, and the Yahoo! User Interface (YUI) Library
http://2tbsp.com/node/91
Unobtrusive Rollovers Using YUI
http://yuiblog.com/blog/2008/04/28/unobtrusive-rollovers-using-yui/

このYUIサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
YUIソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with YUI Goodness</title>
  
  <link rel="stylesheet" 
        href="yui-rollover_files/yui-rollover.css" 
        type="text/css" media="screen">
  <script type="text/javascript" 
          src="yui-rollover_files/yahoo-dom-event.js"></script>
  <script type="text/javascript">

    // Create a menu object, put everything we need into it
    var menu = {
      // Initialize the menu rollover
      init : function() {
        // Get the btn elements
        btns = YAHOO.util.Dom.getElementsByClassName('btn', 'div', 'menu');
        // Assign event listeners to the btns
        for (var i=0; i<btns.length; i++) {
          YAHOO.util.Event.addListener(btns[i], 'mouseover', menu.roll, i);
          YAHOO.util.Event.addListener(btns[i], 'mouseout', menu.roll);
        }
      },
      // First, turn 'em all off, then turn one on
      roll : function(e, i) {
        YAHOO.util.Dom.removeClass(btns, 'btn-over');
        YAHOO.util.Dom.addClass(btns[i], 'btn-over');
      }
    };
    // Initialize the menu
    YAHOO.util.Event.on(window, 'load', menu.init);

  </script></head><body>
  <div id="menu">
    <div class="btn">
      <a href="#">Link 1</a>
      <p>Description for link 1</p>
    </div>
    <div class="btn">
      <a href="#">Link 2</a>
      <p>Description for link 2</p>
    </div>
    <div class="btn">
      <a href="#">Link 3</a>
      <p>Description for link 3</p>
    </div>
  </div>
</body>
</html>

試しに作ったjQueryサンプル
http://jsgt.org/lib/jquery/test/yui-rollover.html
jQueryソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu with jQuery</title>

  <link rel="stylesheet" 
        href="jquery-rollover_files/jquery-rollover.css" 
        type="text/css" media="screen">
  <script type="text/javascript" 
             src="jquery-rollover_files/jquery-1.2.3.min.js"></script>
  <script type="text/javascript">
  
    jQuery(function($) {
        btns = $('.btn');
        btns.hover(
          function(){ $(this).addClass('btn-over')},
          function(){ $(this).removeClass('btn-over')}
        )
      })
      
  </script></head><body>
  <div id="menu">
    <div class="btn">
      <a href="#">Link 1</a>
      <p>Description for link 1</p>
    </div>
    <div class="btn">
      <a href="#">Link 2</a>
      <p>Description for link 2</p>
    </div>
    <div class="btn">
      <a href="#">Link 3</a>
      <p>Description for link 3</p>
    </div>
  </div>
</body>
</html>

もちろん、こんなhoverはCSSでやれば良い(笑)と思うんですけれど、addClass/removeClassという考え方は、いろんな場面でスマートに使える良い手法で、このサンプルはその基本手法がわかりやすくて良いかなと。

たとえば、ドラッグ中のフラグや、アニメーション中のフラグをclass名に追記したり削除しながらコントロールするという使い方は、実際にjQuery UIなどでもよく使われていますが、構造が把握しやすく便利です。

【コメント】