jQuery

By Rika on DESIGN

jQueryどうも、現在利用させていただいているThemeは、JavaScript ライブラリのjQueryを利用してタブ表示をしているようです。
で、jQueryってナニ?
ちょっと調べたら、おもしろい、おもしろい。ハマったよ。
jQueryからjQuery.jsをダウンロードして遊んでます。

jQueryは、それ単独でもAJAX機能はもとより、prototype.jsのscript.aculo.usやYUIのアニメーションクラスに一部相当する フェイドインやスライド、アニメイト機能が備わっていますが、それらをさらに拡張するライブラリとして、 jQuery UIとプラグインが用意されています。 jQuery UIには、ドラッグドロップ、リサイズ 、アコーディオン、ピッカー、ダイアログ、ソーターテーブルなどのウィジェットが含まれて おり、プラグインには、ユーザーが自分で拡張できる仕組み(Plugins)を利用したさまざまなジャンルのスクリプトが登録されています。

via: jQueryの魔法 - All About

  <html>
  <head>
    <script type="text/javascript"
               src="path/to/jquery.js"></script>
    <script type="text/javascript"
               src="path/to/プラグインやjQuery UIなどの.js"></script>
    <script type="text/javascript">
      // ここに自分のコードを書きます
    </script>
  </head>
  <body>
    <a href="http://jquery.com/">jQuery</a>
  </body>
  </html>

■ クラスの追加
共通の作業として位置づけられる他のものとしては、要素へのクラスの追加(または削除)があります。 例えば… $(”a”).addClass(”test”); スクリプトのヘッダーにスタイル情報を以下のように加えたとすると <style type=”text/css”>a.test { font-weight: bold; }</style> 上記「addClass」はページ中の全ての<A>要素を一括して太字とする効果を発揮します。
逆にクラスを解除したければ「removeClass」を使うことになります。

via: Untitled Document

<html> <head>
    <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">a.test { font-weight: bold; } </style>
  </head>
  <BODY>
   <A href="http://jquery.com/" class = "link">jQuery</A>
 <A href="http://hama-lab.mai.jp/">Hama-Lab Top</A>
 <script type="text/javascript">
  $("A.link").click(function(){
    alert("Thanks for visiting!");
  });
 </script>
  </BODY>
  </html>
     <script type=”text/javascript”>
    $(document).ready(function() {

    //Part 1
    $(”div”).filter(”.sample”).hover(
    function() {
    $(this).addClass(”sample_hover”); //change style for hover effect
    },
    function() {
    $(this).removeClass(”sample_hover”); //remove style
    });

    //Part 2
    $(”div”).filter(”.sample”).click(function() {
    var thelink = $(this).find(’a').eq(0).attr(”href”);
    window.open(thelink,’_blank’,”);
    return false;
    });

    }); //END DOC READY
    </script>

JQUERYコードのPART1は、まずSAMPLEのDIVをマウスがHOVERした場合、そのDIVのクラスをsampleからsample_hoverに変えるという物。PART2は、<div class=sample> </div>内部のリンクタグ(<a href=”…”> </a>)を探し出し、クリックした際、そこへユーザーを飛ばすというものだ。

via: JQUERYで簡単にリンクボックスを作成 : HotWeb Magazine

prototype.js等との衝突が心配だけど、回避法もあるようです。
これで、Theme作りたいって思ってしまった。
ダメよ。寝る時間が無くなるから。

こうやって、今まで知らなかった新しいことを、気になるイカしたThemeを利用させていただくことによって、理解していこう同好会(ナニソレ
言い方を変えればパクリ同好会(ナニソレ

1カラム普及委員会があるようなので、1カラムで、スルスルーのびょんびょん(←私的にjQueryを一言で言うとこうなる。)でTheme作りたいなー。(そのうち。) ;-)
しばらくこのjQueryを勉強してみようと思います。

you may want to subscribe to my RSS feed. Thanks for visiting!

関連する投稿
4 Responses to “jQuery”
  1. yutaka

    ちょいと、おねぇさん 質問です
    このエントリーのコードを表示している部分ってig_syntax hiliteプラグインで
    すか? :-|)

  2. Rika
  3. yutaka

    これはいいわ :)
    ワンクリックでコピーできるし、スッキリしてるね。テーマといいプラグインといい、探すの上手だなぁ

  4. Rika

    びんさんは、とっくに知っているプラグインだと思ってました :)

Have Your Say

RSS feed

rss rss

Category

TagCloud

ADS

BottomBar