読了: 約 3 分
本業はwebデザイナーですが、日々ちょっとしたプログラムやシステムが解れば
プログラマと意思疎通を図るのが簡単だし、コーディングしていてつまづいた時
楽だなぁと思う次第です。
そこでjQueryをとりあえず10日連続で何か記事を書くという目標を立てました。
たしかに巷にはタブやスクロール、ナビ、などなど素晴らしいプラグインがあるのですが、
これからは読めるだけでなく、書く必要がある時代になります。
何故なら、コーダーが必要ないからです。
そもそも僕がこうしてWordpressで組んでいるのも、簡単に作れるからであって、
容易なコーディングなど飛ばしてしたいのが皆の思いでしょう。
つまり、これからはデザイン・プログラムとパッきり分かれると考えています。
デザインで圧倒的なセンスがあるのか、プログラムで圧倒的な力を発揮するのか。
今中間にいる人は、コーディング＋jsかjQueryを勉強する必要がありそうです。
ということで、今回はある例となるソースを紐解いて、勉強したいと思います。
今回はこちら
// Tab changer
$(function() {
$(‘.tabs-wrapper .tabs li’).click(function() {
$(‘.tabs-wrapper .tabs li’).removeClass(‘current’);
$(this).addClass(‘current’);
$(‘.tabs-wrapper .tab-box’).hide();var select = $(this).find(‘a’).attr(‘href’);
$(select).show();return false;
});
});// Tab changer(category-tabs)
$(function() {
$(‘.tabs-inner .category-tabs li’).click(function() {
$(‘.tabs-inner .category-tabs li’).removeClass(‘current’);
$(this).addClass(‘current’);
$(‘.tabs-inner .tab-box-inner’).hide();var select = $(this).find(‘a’).attr(‘href’);
$(select).show();return false;
});
});
とても簡単なところから始めます。
このソースの意味はtabs-wrapperのtabs liをクリックすると、
tabs-wrapperのtabs liのclass”current”をリムーブするということ。
さらに、 currentを隠すと書いてあります。こうやって日本語に訳すると覚えやすいかもしれません。
基本はドットでつないで書いていきます。
var select = $(this).find(‘a’).attr(‘href’);
も同じようなもので、a の hrefがあるものを見つけた時、select（この場合はcurrent）をshowします。
基本形を覚えて、日本語訳してから頭で描いてから、書き始めると覚えられそうです。
明日は実際に何か形にできるものを書いていきたいと思います。