Home > Archives > 2007-02

2007-02

[JavaScriptとcssを簡単にするためのjQuery] 2ndDay ストライプテーブル

2日目はストライプテーブルとtrのマウスオーバーイベントを設定する章です。

Table Striping Made Easy

この表組みのように偶数列と奇数列で異なるclassを設定し、背景色を別にします。

ここで覚えることは以下です。

  • $("table.stripe tr:even").addClass("even");…擬似クラスっぽい:evenを設定
  • $("table.stripe tr").hover(function() { , });…擬似クラス:hoverを設定

$("table.stripe tr:even").addClass("even");

偶数、奇数を設定する擬似クラスっぽいものに:odd, :evenがあります。書き方はcssを編集する感覚でオッケー!!そこにaddClass("even")などを設定することで奇数または偶数の要素にクラスを追加設定できます。

今回のストライプテーブルの設定は以下です。

  1. ストライプテーブルにするtableにclass stripeを設定します。
  2. $("table.stripe tr:even").addClass("even");
  3. 偶数行 trに以下のcssを設定します。
    / *  stripe
    -----------------------------------*/
    table.stripe tr.even td {
    background-color: #f3f3f3;
    }

これで偶数行のみ背景色を変更できます。

trのhover時に背景色を変更

trにマウスオーバーしたときにハイライト表示する設定をします

 $("table.stripe tr").mouseover(function() {$(this).addClass("hover");})
.mouseout(function() {$(this).removeClass("hover");}); 

本来なら、jqueryのhoverメソッドを用いればいいのですが、今回のエッセンスはそうではありません。mouseoverとmouseoutの二つのメソッドを同時に指定できるところにあります(たぶん!)。

実際にはマウスオーバーイベントよりhoverの方がよさげなので、僕は以下のように設定しました。

 $("table.generalTbl tr").hover(function() {
$(this).addClass("hover");
},
function() {
$(this).removeClass("hover");
} );  

メソッドの引数は

hover(hover時の設定,hoverが外れたときの設定)

と、このようになります

  • Comments (Close): 0
  • Trackbacks (Close): 0

[JavaScriptとcssを簡単にするためのjQuery] 1stDay

jQueryをそこそこ使いこなすための日記。チュートリアルがあったので、軽く訳しながら実践してみますね~。

Quicker Than window.onload

DHTMLなど動的なhtmlをいじる際には、window.onloadが必要になってきます。しかし、画像ファイルサイズがでかいときはなかなかロードしてくれない、という問題あります。

「jQuery」にはDOMが読み込まれた時点で、おまじないをかけて(このへん訳できへんかった!)onloadとみなしてユーザ定義関数を実行してくれます。というわけでめっさ速くなる。そのおまじないコードがこれです。


$(document).ready(function(){
// ここにコードを書く!!
});

このように書けばDOM読み込むや否や、さっさと動作してくれます。ということが書いてあったのが1st Day!!

ついに!あの会社を辞めます!

最初のエントリーで、いきなりヘビーイッシュー!!

2006年5月中旬よりド素人で始めた会社でした。
いったい何を学んだのか、何を残したのか疑問に感じるのが辞表を出す瞬間ですよね。

思えば本当にキツかったです。ウチの会社のサイト作りはまさに焼畑農業!とにかく、Webサイトという形さえ作ればよい状況にあって、Webサイトの作り方なんてあってないようなもの。Photoshopのデザインデータもなければ、元写真データもない。もしPhotoshopデータがあったとしても、レイヤーが平積みされてて、アクセスできない!!

そんな訳のわからないデータ探しとレイヤー探しの旅もようやく終わった。改善しようと躍起になったこともあったけれど、やる気のない人々にはなかなか伝えられませんでした。

とりあえず、焼畑Web制作してるみなさん!Photoshopのレイヤーはあらかじめフォルダを大量に作っておいたテンプレートを用意して制作しましょう!ひとを思いやる気持ちさえあれば、デザイン業界がもっとクリエイティブになりますよー!

  • Comments (Close): 0
  • Trackbacks (Close): 0

Home > Archives > 2007-02


Search
Feeds
Meta

Return to page top