« jQueryのプラグインでツールチップ | トップページ | Google Chartsのグラフを簡単に »

2009.05.15

最後の行だけ違うスタイルにするJavaScript

いろいろできるyuga.js|web creators 2009年4月

若干古いですが、web creators 4月号の「Webデザイン スタイルアップ Tips」に紹介されていたKyosuke.jpさんの「yuga.js」は、小粒ですがなかなか痒いトコロに手が届くスクリプトが集まっています。

中でもcss3classは、CSS3からサポートされる予定の「:lastChild」や「:firstChild」という疑似要素を現状のブラウザでも指定できてしまう。
これを利用すれば、リストやテーブルの先頭の行や最後の行のスタイルを変えるコトが手軽になります。
HTMLで特定の行にclass定義してしまえばそれまでなんですが、更新や修正でいちいち直す必要がなくなるのは、正直非常にありがたいのでは…。
例えば、各行に下線をひくが、最後の行だけは下線なしにしたいとか云う場合にもってこいです。

というコトで、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

また、yuga.jsには他にもいろいろな機能が盛込まれています。
ロールオーバー、
現在のページをハイライト表示、
外部リンクは別ウインドウを設定、
画像へ直リンクするとthickboxで表示、
ページ内リンクはするするスクロール、
簡易タブ機能、
奇数、偶数を自動追加などなど

ホントに至れり尽くせりと云う感じで、使いたい機能が凝縮されています。
また、jQueryを使うトコロもGood!入れておいて損はないと思いますよ。

「yuga.js :: Kyosuke.jp」

|

« jQueryのプラグインでツールチップ | トップページ | Google Chartsのグラフを簡単に »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/45012458

この記事へのトラックバック一覧です: 最後の行だけ違うスタイルにするJavaScript:

« jQueryのプラグインでツールチップ | トップページ | Google Chartsのグラフを簡単に »