jQuery
どうも、現在利用させていただいているThemeは、JavaScript ライブラリのjQueryを利用してタブ表示をしているようです。
で、jQueryってナニ?
ちょっと調べたら、おもしろい、おもしろい。ハマったよ。
jQueryからjQuery.jsをダウンロードして遊んでます。
jQueryは、それ単独でもAJAX機能はもとより、prototype.jsのscript.aculo.usやYUIのアニメーションクラスに一部相当する フェイドインやスライド、アニメイト機能が備わっていますが、それらをさらに拡張するライブラリとして、 jQuery UIとプラグインが用意されています。 jQuery UIには、ドラッグドロップ、リサイズ 、アコーディオン、ピッカー、ダイアログ、ソーターテーブルなどのウィジェットが含まれて おり、プラグインには、ユーザーが自分で拡張できる仕組み(Plugins)を利用したさまざまなジャンルのスクリプトが登録されています。
<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>
JQUERYでロールオーバーand Link
<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!








ちょいと、おねぇさん 質問です
このエントリーのコードを表示している部分ってig_syntax hiliteプラグインで
すか?
SyntaxHighlighter Plus
です
これはいいわ
ワンクリックでコピーできるし、スッキリしてるね。テーマといいプラグインといい、探すの上手だなぁ
びんさんは、とっくに知っているプラグインだと思ってました