REDLINE MAGAZINE | jQueryでやってみる

jQueryでやってみる

これまでこのサイトでいろいろ実験したネタを書いてきたわけですが、最近いいなーと思っている「jQuery」というライブラリを使って代わりの方法を試してみる。

フッタのナビゲーション

フッタのナビゲーションは p なの? ul なの? をjQueryでやってみる。
このエントリを書いた時はcssだけでやってみたんだけど、どう考えてもjQueryを使った方がcssがシンプル。またブラウザごとの差異に悩まされる事もない。

>>フッタのナビゲーションをjQueryでやってみるサンプル

xhtml、css、js内容はこんな感じ。

<div id="footer">
<ul>
<li>テスト</li>
・・・略・・・
</ul>
</div>

#footer li{display:inline;} 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#footer li+li")
.css("border-left","#999 1px solid")
.css("padding","0 0 0 0.4em")
})
</script>

jQueryはいろんなセレクタをブラウザがサポートしてるしてないに関わらず使えるので、（>>参考「CSS Selectors」）上の例では「li+li」を使用してます。区切りをcssでやってた時は最初のli、または最後のliの区切りは要らないということで、そのliに対して別のcssを指定してたりしましたが、「li+li」が使えるならソースもスッキリです。

js無効の場合は区切り線が表示されないという事になりますが、まぁ･･･別に線なくてもリンクは生きてるし、レイアウトにも問題なしです。

macのDock風メニュー

「dojo」のFisheyeListをjQueryでやってみる。
前回OSXのDock風なメニューが作れるとdojoのライブラリで実験してみたんですが、jQueryにも「Fisheye menu」という拡張みたいなのがありました。（demo）

>>macのDock風メニューをjQueryでやってみるサンプル

xhtml、css、js内容はこんな感じ。
と言っても上記サイトのソース、ほとんどそのままですが（汗）

<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<ul>
<li><a href="#" class="fisheyeItem"><img src="xxx.gif" width="50" alt="サンプル画像" /><span>サンプル</span></a></li>
・・・略・・・
</ul>
</div>
</div>

.fisheye{
	text-align: center;
	height: 50px;
	position: relative;
}
a.fisheyeItem{
	text-align: center;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	width: 50px;
	position: absolute;
	display: block;
	top: 0;
	}

.fisheyeItem img{
	border: none;
	margin: 0 auto 5px auto;
	width: 100%;
	}
.fisheyeItem span{
	display: none;
	positon: absolute;
	}
.fisheyeContainter{
	height: 50px;
	width: 300px;
	left: 500px;
	position: absolute;
	}
	
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 50,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
	

jQueryを使用した場合はdojoの場合は違ってちゃんとバリデータも通ります。（個人的にはここが一番熱い）js無効の場合は上のソースで試した場合、画像が1つしか出ないみたいな感じになってました。メインナビゲーションでそれはちょっとまずいな･･･。

あとSafariで確認すると、キャプション部分が時々画像からマウスを離しても残る時があった。配布元サイトのデモもそうなってたけど･･･。まぁキャプション入れない場合は何の問題もないか。別にキャプションが残るから絶対まずいーってケースもそんなにないだろうし、その辺りは気にしなくていいか。

テーブル背景を１行おきに着色する

テーブル背景を１行おきに着色するをjQueryでやってみる。

>>テーブル背景を１行おきに着色をjQueryでやってみるサンプル

前回の記事で作ったサンプルではマウスがのった際に色を変えるってことはしなかったんだけど、jQueryを使うとaタグ以外のhoverに未対応のIEでもちゃんと着色されるので便利。ソースはこんな感じ。

<table id="table1">
<tr>
<td>サンプル01</td>
<td>１行目</td>
</tr>
・・・略・・・
</table>

tr.even {background: #ddd;}
tr.hover {background: #b3f0ff;}

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
$("#table1 tr:even").addClass("even");
$("#table1 tr").hover(function(){
$(this).addClass("hover");
},
function(){
$(this).removeClass("hover");
}
);
});
</script>

js無効の場合は色が付かないだけなので、情報を閲覧する事に関しては支障なし。上で作ったサンプルではテーブルの罫線とか入れてないので無効の場合少し見難いけど。

>>jQueryはこちら

2007年04月28日 13:46 | Red | パーマリンク