jQueryでウェブデザイン

ひさびさにjQueryをのぞくといろいろ便利そうなプラグインが出てる。

１．レイアウト
ウェブページのレイアウトって、クロスブラウザでやろうと思うとなかなか大変である。スタイルシートとかIEとFirefoxではだいぶ違う。
・Docking layout manager
きっとクロスブラウザ。少なくともFirefox3とIE7では同じに見えた。
http://labs.rajeeshcv.com/layoutmanager/default.html

・Flexify
もっといろいろできるっぽい。リサイズ可能なスプリッターもある。
http://plugins.jquery.com/project/Flexify

２．フォーム
フォームはかっこよく、かつ便利にしたいもの。
・Labelize: a jQuery Label Maker
フォームを含んだいくつかのHTML要素をひとまとめにできる。これは便利。スタイルシートのクラスを指定してlabelize()ってやればいいみたいで、その際引数にマウスオーバ時のスタイルシートを指定できるようだ。（なにも渡さなければマウスオーバ時になにも変化しない）
http://github.com/bentlegen/labelize/tree/master
<br /> iframe使ってごめんよ。<br />


<html>
<head>
	<script src="jquery-1.2.6.js"></script>
	<script src="jquery.labelize.js"></script>
	<style>
		* {margin: 0 0 0 0; padding: 0 0 0 0;}
		.radio-label { background-color: #F0FFF0; width: 200px; color:#000000; font-weight:bold;}
		.radio-label-hover { background-color: #333333; color:#ffffff; font-weight:bold;}
	</style>
</head>
<body>
<script>
	$(function() {
		$('li.radio-label').labelize('radio-label-hover');
	});
</script>

<div>
<form>
	<ul>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 1</li>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 2</li>
	<li class="radio-label"><input type="radio" name="radio"/> テスト 3</li>
	</ul>
</form>
</div>
</body>
</html>

以上

コスミーについて

昔（？）はゲーム作ってました。今もなんか作ろうとしています。

コスミーの投稿をすべて表示 →

jQueryでウェブデザイン

関連記事

コスミーについて