JavaScript ライブラリ "jQuery"　実例編

2012年2月 1日

最近のwebサイトはコンテンツのアニメーション、Ajaxのように
javascriptを使用する場面が多々あります。
またデザインが複雑な場合、cssでは対応できないような場合があります。
そこで使用するのがJavaScriptライブラリ『jQuery』

・cssの理解があると学習しやすい
・構文が直感的で解りやすい
・クロスブラウザ対応・プラグインが豊富
・プラグインが豊富

等の理由で人気のライブラリです。
弊社でも作業の効率化・対応のためjQueryを使用しています。
と、ここまでは前回のお話。
今回は実例を元にお話させて頂きます。
簡単な例では

【HTML】

<ul class="sample">
　　<li>first line</li>
　　<li>second line</li>
　　<li>third line</li>
</ul>

このようなhtmlでデザイン上、最初の<li>にだけcssを適用させる為に

class名"first"を付記したい場合。

【JavaScript】

$(".sample li:first").addClass("first");

他には、

【HTML】

<p class="ul-open">list open</p>
<ul class="sample">
　　<li>first line</li>
　　<li>second line</li>
　　<li>third line</li>
</ul>

このようなhtmlで<p class="ul-open">のクリックで

<ul class="sample">
をプルダウンさせたい場合。

【JavaScript】

 $(".sample").hide().prev().css("cursor", 
　"pointer").toggle(
function () {
  　$(this).next().slideDown("slow");
}, function () {
　　$(this).next().slideUp("slow");
 });

上記の様に個別にスクリプトを記述する他にも自作の汎用プラグイン制作

での効率化も図っています。

例えば、

○ページのURLを判定してナビゲーションをカレント状態にする

【HTML】

<ul id="gnavi"> 
　<li><a href="/"><img src="/gnavi01.gif"
　width="50" height="50" alt="HOME" /></a></li>
  <li><a href="/info/"><img src="/gnavi02.gif"
　width="50" height="50" alt="お知らせ" /></a></li>
　<li><a href="/outline/"><img src="/gnavi03.gif" 
　width="50" height="50" alt="会社概要" /></a></li>
</ul>

【JavaScript】

$("#gnavi li a:urlHrefMatch").find("img").activeNavi();

○画像をJavaScriptでリサイズ・トリミング

【HTML】

<p><a href="/test_image.jpg"><img src="/test_image.jpg" 
width="1000" height="1000" alt="" class="img" /></a></p>

【JavaScript】

$(".img").imgTrim(700,525);

○リスト表示でアイコン分のインデントの幅を揃える

【HTML】

<ul class="sample">
　<li><span class="icn">※ </span>first line first line first line</li>
　<li><span class="icn">※ </span>second line second line second line</li>
　<li><span class="icn">※ </span>third line third line third line</li>
</ul>

【JavaScript】

$(".sample li span.icn").idtBaseLine();

今後もjQueryプラグインを充実させて更なる効率化を図りたいと思っています。

JavaScript ライブラリ "jQuery" 実例編

JavaScript ライブラリ "jQuery"　実例編