Home > Javascript | jQuery > jQueryでウェブデザイン

jQueryでウェブデザイン

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

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

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

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


<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>

以上

Comments:1

matte 15-09-24 (木) 9:08

I enjoy, cause I found exactly what I used to be taking a look for. You have ended my four day lengthy hunt! God Bless you man. Have a nice day. Bye|

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://red-treasure.com/report/wp-trackback.php?p=263
Listed below are links to weblogs that reference
jQueryでウェブデザイン from コスミー報告書[社外秘]

Home > Javascript | jQuery > jQueryでウェブデザイン

Search
Feeds
Meta
 合計:011767
 今日:0095 昨日:0143

Return to page top