REDLINE MAGAZINE | jQueryでやってみるREDLINE MAGAZINEトップページへ

すべてのエントリを見る

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

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

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

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

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

<table id="table1">
<tr>
<td>サンプル01</td>
<td>1行目</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はこちら

<< script.aculo.us でアニメーション | Firebugを使ってjQueryを実行 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/145

コメント (5)

こんにちわー。

こ、これはイカス・・・!
僕もjQueryやりたくなってきました。

>Shunさん、こんばんわ。

MEとしては要チェックでしょー(w
js無効の場合を考えるとアレなんだけど、使い道はすげーー多そうなんで、これからもいろいろ試してみようと思います。css絡み以外の部分でもいろいろ活躍してくれそうですし。
jsは全然分からないけど、なんか書き方がcssチックというかなんとなく親しみやすいライブラリです。

macのDock風メニューの方法を探していてたどりつきました。
メインナビで使いたかったので、fisheyeitem.jsには、

の部分を入れて、乗り切りました。



ここに画像を横並びにさせる・・・

有益な情報に感謝!

すみません↑ソースが消えてしまいました・・・

メインナビで使いたかったので、fisheyeitem.jsには、
<div id="fisheye" class="fisheye">
の部分を入れて、乗り切りました。

<script src="common/fisheyeitem.js" charset="utf-8"></script>
<noscript>
ここに画像を横並びにさせる・・・
</noscript>

>kuriさん
コメントありがとうございます。
ちょっとでもお役に立てて嬉しいですw
サンプルには確か入れてなかったんですが、noscript、いいですねー。




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。