Home > jQuery Archive

jQuery Archive

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>

以上

コードプリンター 0.1リリース

また大げさに書きましたが、世の中にあるJavascriptのライブラリを下手に使ってソースコードを色分けして印刷するためのツールを作ったので公開しておきます。
google-code-prettifyバージョン
コードプリンター by prettify

dp.SyntaxHighlighterバージョン
コードプリンター by dp.SyntaxHighlighter

サーバに何かデータを送っているわけじゃないので、機密漏洩とかは気にせんでよいです。
firefox3だと


w = window.open("about:blank", '_blank');
w.document.open();
w.document.write('<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
w.document.write('<link href="prettify/prettify.css" rel="stylesheet" type="text/css" />');
w.document.write('</head><body>'+$('#printcode').html()+'</body></html>');
w.document.close();
w.document.body.innerHTML = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaa";

みたいなことができて、新しいウインドウを開いて内容を書き込めたんだけど、firefox2だと最後の行がエラーだった。

あと、いつもいつもIEですが、preタグのinnerHTMLに代入すると勝手にエンティティ化されるばかりか改行コードも空白になっちゃうというひどい仕様が私を今の今まで苦しめた。改行コードは以下のようになるらしいです。
http://d.hatena.ne.jp/brazil/20060917/1158465641

こういう大したこと無いツールに結構労力を使っている。

以上

最近のjQuery

なんか1.2.4が怪しかったとかですぐに1.2.5が出てたんだけど、なんか1.2.5はうまく動かないなーと思っていたら1.2.6が出てた。今のところちゃんと動く。

以上

2ch2Javadoc-0.1 リリース

なんて大げさな話ではありませんが、個人的に役に立つブックマークレットを作成したので公開してみます。
2chのまとめページをJavadoc風に変換するブックマークレットです。
会社などで2ch系のページを見ている時にモニタを覗き込まれたら大変です。そこでこのブックマークレットは一見するとJavadocを見ているかのように偽装してくれます。2chを見ながらバリバリ仕事している感が出ますね!

すごく重いですがそんなことは気にしない。Firefoxでしか確認していません。
画像が貼ってある場合は「関連項目:showImage(int)」というのが挿入され、showImage(int)にマウスオーバーすれば表示されます。変な画像が画面にいっぱいだとリスク高いですもんね!
今のところ痛いニュースニュー速クオリティにしか対応してません。というわけで看板に偽りありで、2ch自体は変換できません。会社からはアクセスできないため、個人的には需要がないためです。そのうち他のメジャーなまとめサイトにも対応したいと思います。自分のために。万が一需要があれば本家2chにも対応いたします。

以上

jQueryトリビアルメモ4 要素の追加

最近ボールペンのキャップを閉め損ねて指が青色になって行きます。

javascriptでDOMの要素を追加するにはdocument.createElement()ですよね。


var div = document.createElement("div");
document.body.addChild(div);

jQueryでやるにはどうしたらええのか。最初分からんかったとです。まあ、ひとつには上記のやり方で追加するってのもありです。追加したものもjQueryで使えます。しかしまあ、なんとなくやりたくない。単にタグを追加するには


$("#hoge").append('<a href="http://www.google.com">google</a>');

で子要素に追加できるし、


$("#hoge").appendTo('<a href="http://www.google.com">google</a>');

で後ろに追加できるし、


$("#hoge").before('<a href="http://www.google.com">google</a>');

で前に追加できる。でもこんなことしたら属性をいじれないし、なによりDOMっぽくない。戻り値に追加した要素が入ってくるわけでもない。
でもどうやら$(“<foo>”)でfooタグを追加できるっぽい。そういうわけで以下のように書ける。


$("#hoge").before(
                  $("<a>").attr("href", "http://www.google.com").html("google")
               );

“<a>”でも”<a/>”でもいけた。

以上

jQueryでサウンド

先日、念願のビーフストロガノフを摂食いたしました。
某YAWARA!でその存在を知ってからいつか食べたい、いつか食べたいと熱望していたんですがとうとう夢がかないました。
その感想は・・・・・・・・これなんてビーフシチュー?
いつか本当のビーフストロガノフを満喫したい、ビーフストロガノフで溺れたいと思います。

そういうわけでJavascriptでサウンドを使うにはどうしたらいいのか。音出してえよ音。効果音とかBGMとか鳴らしてえよ。
prototype.jsでそういうプラグインあるらしいんでjQueryでもあるんじゃないの?と思って探してみたらありました。
http://groups.google.com/group/jquery-en/browse_thread/thread/3154fc7febd0993a
なんかまだ正式じゃないって言うか、もっと大きいプラグインの一部っぽいですが。
すごい簡単に使えます。


$.sound.play("hogehoge.wav");

一定時間で終了させるには


$.sound.play("hogehoge.wav", {timeout: 4000});

音楽ファイルのトラックのことはよく知らんのですが、トラックがある場合はトラックを指定して再生することもできるみたいです。
まあ、ファイルの先頭に使い方載ってるし、簡単だ。
サンプルページ:http://red-treasure.com/monitor/

以上

javascriptでjsonのパース

またjsonか。いちいちつまづくのでメモ。

例えばjQueryでajaxを以下のようにして使うことを考える。


function display(data) {
    // dataがきっとJSON!
}
$.get("hoge.php", null, display);

上記の場合、display()がコールバック関数での第一引数(data)にはhoge.phpの出力が入ってくる。
hoge.phpが例えば


[100,200,300]

って返すようになっているとき、display()でdataをJSONとして使うには


function display(data) {
   jsondata = eval(data);
   if (jsondata[0] == 100) {
      ~~~
      ~~~
   }
}

見たいな感じで使う。dataには文字列として入ってくるので


data = "[100,200,300]"

となってるから注意。
もしhoge.phpが


{"a":100,"b":200,"c":300}

な感じで連想配列になっている場合は、


jsondata = eval("("+data+")");

って感じで丸カッコを両端にくっつけた上でevalすればいいっぽい。

以上

簡単ドラッグ可能領域

これ簡単。
ドラッグできる領域を作る。なに使うかはしらんけど。
EasyDrag


easydrag()って呼ぶだけ。

以上

jQueryトリビアルメモ3 idとJSON?

前に書いたような気がするけど、チラッと見ても出てこないからもう一度書いておく。

jQueryでHTMLのエレメントを取得する場合、IDの場合は


$("#id_name");

なわけですが、idに「:」(半角コロン)を含むとだめ。上手く動かない。


$("#id:name");

HTMLの仕様上は半角コロンを含んでもOKのようですが。
jQueryではどうもJSONぽく扱われるようで、コロンで展開されてしまいます。
また、CSSの仕様では半角コロンを含んだidのものは設定できないらしいです。


#id:name {
    width:100px;
}

上記は無理っぽいです(FireFoxでは無理だった)。
CSSの場合はピリオドもだめですね。

idの仕様

以上

特定の要素の上でマウスホイールのイベントを取る。(jQuery)

jQueryのマウスホイール・イベントを取ってくれるプラグイン
その要素の上でだけ取ってくれます。
つまり下のような感じ。黒いところでマウスホイールをくりくりすると数字が変わります。(はず)

ソースは下記。mousewheel()で追加するだけです。


<style>
#test_area {
	background-color: #000000;
	width: 100px;
	height: 15px;
	color: #ffffff;
}
</style>
<script type="text/javascript">
	var count = 0;
	$(function() {
		$('#test_area')
			.mousewheel(function(event, delta) {
				if (delta > 0)
					$('#test_area').html(--count);
				else if (delta < 0)
					$('#test_area').html(++count);
				return false; // prevent default
			});
		});
</script>
<div id="test_area">0</div>

以上

Home > jQuery Archive

Search
Feeds
Meta
 合計:010890
 今日:0192 昨日:0214

Return to page top