HTML制作においてのかゆい所に手が届く、的なJSライブラリ「yuga.js」を試してみました。

yuga.jpg

yuga.js

このライブラリはWEB制作において面倒な部分をごくシンプル且つ簡単にJSで動的に実装し、
WEB制作を優雅にする為に作られている、と謳っているのですが、
ほんと分かりやすく使いやすいです。(一緒にjQueryを使用します)

yuga.jsで可能なことは、
・画像のロールオーバーをシンプルに
・外部リンクを自動で別ウィンドウに
・画像リンクを自動でthickboxで展開
・リストやテーブルの開始行、最終行、奇数行、偶数行のclass動的追加
などなど様々ですが、(上記以外にもいろいろあります)
4つ目に書いた「リストやテーブルの開始行、最終行、奇数行、偶数行のclass動的追加」は
かなり便利です。

yuga.jsとjQueryを使用するページで読み込ませることで、
そのソース内で使用している<li>タグや<tr>タグに
開始行には「firstChild」
最終行には「lastChild」
奇数行には「odd」
偶数行には「even」
といったclassが自動で入るようになります。

HTML制作においてよくあるのが、
リストそれぞれに下線をつけて最終行のみ下線は非表示、
といった場合に、最終行にわざわざclassを追加する必要はありません。

実装したデータはこちら↓↓↓↓↓↓↓↓

上記画面のリスト部分のソースは
—————————————
<ul>
<li>リストサンプル1</li>
<li>リストサンプル2</li>
<li>リストサンプル3</li>
<li>リストサンプル4</li>
<li>リストサンプル5</li>
</ul>
—————————————
と、class指定は全くしていません。
CSSで最終行の「lastChild」には下線を表示しない指定を入れておくだけ。

奇数行、偶数行の判別では上記ソースと同じものを使って
以下のようなことが実装できます。↓↓↓↓↓↓↓↓

同様にテーブルの場合は↓↓↓↓↓↓↓↓

すべて一切タグにclassはつけない形で表現が可能です。

ページの見た目を飾るというよりは製作者側向けのライブラリ。
ソースがかなりシンプルに構成可能になるので今後活用していけそうです。
JSファイル自体も中を見ると参考になります。

SHARE

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して