プラグイン初挑戦ということで、偶数行と奇数行の背景色を変えるプラグインを作ってみました。

jquery.even-odd.plugin.js

(function($) {
	$.fn.myPlugin = function(settings) {
		var config = $.extend({
			'even_color':'#dcdcdc',
			'odd_color':'#494949'
		},settings);
		$(this).find('p:even').css('background-color',config.even_color);
		$(this).find('p:odd').css('background-color',config.odd_color);
		return this;
	};
})(jQuery);

index.html:実行部分

$(function(){
	$('#odd').even_odd();
	$('#even').even_odd({'even_color':'#7F110E','odd_color':'#420302'});
});

『感ずること』

チュートリアルやリファレンスでjQueryの勉強をしていて、実践ではどう使うの？なんて考えることがあります。
実践の場でjQueryの技を使っているサイトを機能別にまとめて紹介しているサイト「jQuery Style」。
同じ機能でもサイトの仕様によって作り方が違っていたりするので、その機能に限らず他の使い方がひらめく事もあるかもしれません。
今は分からなくてもコードを読む癖を付けることが成長に繋がると私は思います。そして実際にコードを書いて動きを見て、リファレスンス等と見比べ理解する。
それの繰り返しで、そうすると自然とコードが書けてくるから面白い。面白いと感じるようになれば勉強意欲が爆発的にわいてくる事でしょう。

以下、jQuery機能一覧
検索する際にこのタグを覚えておくとまた新しい発見があるかもしれませんね。

• Accordian
• Animation and Effects
• Ajax
• Background
• Browser Tweaks
• Carousel
• Data
• DOM Manipulation
• Drag 'n' Drop
• jQuery Extensions
• Layout
• Modal/Lightbox/Popup
• Navigation
• Preload
• Shopping Cart
• Slider
• Slideshow
• Tabs
• Text Replacement
• Tooltip
• Transitions
• UI
• Utilities
• Validation
• Widgets

『感ずること』

新しいことの発見と挑戦が人生のスパイス。ワナビィ～

ニュースサイトやブログなどで最新ニュースや過去の記事を１つのブロックでタブを切り替えて表示しているのを見かけることがあります。タブを切り替えることによって情報やレイアウトをまとめることができると思います。

今回のネタも毎度おなじみの「SOHTANAKA」よりテクニックを紹介。
「Simple Tabs w/ CSS & jQuery」
このサイトは、特にjQueryのプラグインを使わず、jQueryだけを使いシンプルかつ簡単に素晴らしいテクニックを載せているのが初心者に優しいと思います。
英語サイトなので読むのが困難かもしれませんが、「キングソフト辞書」を使って読むのも良いでしょう。難しいと思うことも最初だけで、慣れていくとそれ以上を求めたり自分の成長に確実につながると思います。

さて、本題に入ります。
先に 先に DEMO をどうぞ。

どうでしょうか？なかなか、いい動きしていますね。

コードを読んでいきたいと思います。

html

<ul class="tabs">
	<li><a href="#tab1">JQUERY</a></li>
	<li><a href="#tab2">DIARY</a></li>
	<li><a href="#tab3">STUDY</a></li>
</ul>

<div class="tab_container">
	<div id="tab1" class="tab_content fix">
    <!-- コンテンツ -->
	</div>

	<div id="tab2" class="tab_content fix">
    <!-- コンテンツ -->
	</div>

	<div id="tab3" class="tab_content fix">
    <!-- コンテンツ -->
	</div>
</div>

jQuery

$(function() {
	$('.tab_content').hide();
	$('ul.tabs li:first').addClass('active').show();
	$('.tab_content:first').show();

	$('ul.tabs li').click(function(){
		$('ul.tabs li').removeClass('active');
		$(this).addClass('active');
		$('.tab_content').hide();

		var activeTab = $(this).find('a').attr('href');
		$(activeTab).fadeIn();
		return false;
	});
});

1行目：定番のDOMがREADY状態になったときに実行

2行目：CSS-CLASS[.tab_content]を[hide()]非表示にします
*[hide()]しない場合、全てのコンテンツが表示されます

3行目：[ul.tabs li:first]にCSS-CLASS[active]を追加して[show()]表示します
*[li:first]は[ul.tabs]の最初に現れる[li]の事で、その[li]にCSS-CLASS[active]を追加して表示しています
CSS .activeの部分

ul.tabs li.active,
ul.tabs li.active a:hover {
	background-color: #fff;
	border-bottom: 1px solid #fff;
}

*CSS-CLASS[active]によって現在表示しているタブをCSSで色などを変えて識別できます。

4行目：CSS-CLASS[.tab_content:first]最初のコンテンツを表示
*ここまでの状態でタブの[JQUERY]と、そのコンテンツだけが表示されています

5行目：[ul.tabs li]をクリックしたときの処理。
*タブをクリックしたときの処理になります

6行目：[ul.tabs li]のCSS-CLASS[active]を[removeClass]排除しています

7行目：そして、クリックされたタブにCSS-CLASS[active]を追加しています

8行目：クリックする前に表示されていたコンテンツを非表示にします

9行目：[ul.tabs li]にある[href]の属性(#tab1等)を変数[activeTab]に代入しています。
$(this)は[ul.tabs li]の[li]部分
find('a')は[a]タグを探し
attr('href')は属性[#tab1]
jQuery[attr](要素が持つ指定属性の値を返す）

10行目：[href]の属性を持った変数[activeTab]をjQueryエフェクトの[fadeIn()]でコンテンツを表示しています

11行目：よく見かける[return false]は、まだ良く分かっていない。
*イメージ的に、１回の処理を終わらせていることなのかな？って思って試しに[return true]にしてみたところ、
URLの最後に「#tab1」が付いてくる

return true

http://b23.jp/labo/jquery/jQuery-Simple-Tabs/#tab1

return false

http://b23.jp/labo/jquery/jQuery-Simple-Tabs/

なるほど！分かった！「値を返さない」ということだ。
うっかりしてたｗ

『感ずること』

jQueryのサンプルとか見ていると、いつも疑問なのが「どうしたら、こういうものが作れるのか？」と思う。
よくよく考えると、まず先に「何がしたい？」から始まり、そこから内容を詰めて、jQueryのAPIなどを調べて「何がしたい？」を実現していくんだと思う。
要するに「設計」になるのかな？そうだね、「何がしたい？」がないと、作る物がないから疑問に思っていたんだね。なるほろね。

昨日に引き続き、jQuery を使ったリキッドレイアウトのテクニックを紹介

リキッドレイアウトとは？

リキッドレイアウトとは、Webデザインにおいて、Webページの表示領域の幅がある程度変更されても従来のレイアウトを維持できるようにする手法のことである。
引用：IT用語辞典バイナリより「リキッドレイアウト」

ディスプレイのサイズはユーザーによって異なるので、Webページのデザインも意識して作る必要があります。
現在標準と言われているサイズはXGA（1024×768ドット）。

さて、本題に入ります。
先に DEMO をどうぞ。
今回の元ネタは「Smart Columns w/ CSS & jQuery」
まんまでごめんなくぁwせdrftgyふじこlp…

えっと、コードを読んでいこうかと思います。
*htmlやCSSはデモを参照してください。

jQuery

$(function() {
	$('a[href^="http://"]').attr({ target: "_blank" });
	function smartColumns() {
		$("ul.columns").css({ 'width' : "100%"});
		var colWrap = $("ul.columns").width();
		var colNum = Math.floor(colWrap / 200);
		var colFixed = Math.floor(colWrap / colNum);
		$("ul.columns").css({ 'width' : colWrap});
		$("ul.columns li").css({ 'width' : colFixed});
	}
	smartColumns();
	$(window).resize(function () {
		smartColumns();
	});
});

1行目：定番のDOMがREADY状態になったときに処理を実行する。
2行目：リンクが設定されている箇所にターゲットを設定(targetは_blank(新規ウィンドウ))
*attrはキーと値を渡して、全ての要素に属性を設定する。
3行目：関数[smartColumns]は今回のメイン関数
4行目：[ul.columns]のスタイルを幅100%に設定
5行目：変数[colWrap]は[ul.columns]の幅の値を代入
*cosole.log(colWrap)で値を表示すると[1281]
6行目：変数[colNum]はMath.floorを使い colWrap(1281)を200で割る。
*この200は1コラムの幅。
*cosole.log(colNum)で値を表示すると[6]になり１行で6カラム表示することになる。
7行目：変数[colFixed]はコラムどうしの間隔を取得するものだと思われる。
*実際CSSでmargin-rightが10pxなので colWrap と colNum を割って1コラム全体の幅を算出
*cosole.log(colFixed)で値を表示すると[213]。
8行目：[ul.columns]の幅のスタイルをcolWrap[1281]に設定
9行目：[ul.columns li]の幅のスタイルをコラムどうしの間隔colFixed[213]に設定
11行目：[smartColumns()]を実行
12行目：ウィンドウのサイズが変わったときに[smartColumns()]を実行

長くなったけど、コード自体シンプルなので読みやすいと思います。
jQueryなどの開発でよく使う「console.log()」はFireFoxのアドオン「Firebug」で使える関数で、変数の値を表示したりバグが探しやすかったりするので非常に便利です。

こちらの「Firebugの使い方」を見ながら練習すると使い方が分かります。

『感ずること』

プログラムの解説や日記、記事を書き方のテクニックを勉強しないとね。

CSSでレイアウトを組んでいるとコラムどうしの高さが合わなくて悩むことがあります。
しかし、サイトの目的などによっては、それも素晴らしいデザインに変わることもあります。
CreativeDepart: Supporting Creative Journeys
D&DEPARTMENT

見せ方がうまいとコラムのデコボコした高さが一変しますね。

さて、本題に入ります。
コラムの高さを均等に表示するjqueryのテクニックを検証してみたいと思います。

検証するテクニック記事
Equal Height Columns with jQuery

DEMO
jQueryのコード

$(function() { //1
	equalHeight($('.column')); //2
});
function equalHeight(group) { //3
	tallest = 0; //4
	group.each(function() { //5
		thisHeight = $(this).height(); //6
		if(thisHeight > tallest) { //7
			tallest = thisHeight;
		}
	});
	group.height(tallest); //8
}

とてもシンプルなコードなので理解しやすいです。

1.DOMがREADY状態になったときに[equalHeight]が実行
2.関数[equalHeight]の引数にクラス[.column]を渡す
3.引数[group]にはクラス[.column]が渡されています
4.一番高いコラムに高さを設定するための変数。初期値は0
5.繰返し関数[each]を使い、それぞれの引数[group]（クラス[.column]）の高さを取得
6.変数[thisHeight]に現在のコラムの高さを代入
7.変数[thisHeight]と変数[tallest]を比較
変数[thisHeight]が変数[tallest]よりも大きい場合に
変数[tallest]に変数[thisHeight]を代入
8.全ての引数[group]（クラス[.column]）に高さをセット

検証1 ～関数[equalHeight]の実行～

$(function() {
	equalHeight($('.column'));
    console.log($('.column'));
});

Firebugの[console.log()]を使い[$(".column")]の中身を出力
出力結果：[div#col1.column, div#col2.column, div#col3.column]

検証2.～関数[equalHeight]の処理～

function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
        console.log(thisHeight); //1

		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
    console.log(tallest); //2
}

出力結果
1.変数[thisHeight]を出力
結果：[133 85 101]

2.変数[tallest]の出力
結果：[133]