このエントリーをはてなブックマークに追加

読了: 約 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します。

基本形を覚えて、日本語訳してから頭で描いてから、書き始めると覚えられそうです。

明日は実際に何か形にできるものを書いていきたいと思います。

 

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'