jQueryを使ったサンプルコード

ネタ元：一晩で覚えるjQueryの逆引き基礎サンプル7つ

色々書こうかと思ったらでぃべろっぱーず・さいどさんにほとんど書かれてる。。。

ですので、2サンプルほど

閉じる、開くボタンを同一の場所で交互にしたい

ネタ元ですと、毎回ロードしてるけど同じデータなら最初の一回だけでよくないです?

$(function(){
	$("input[name='btn22']").one("click", function(){
		$("#load1").load("./load.html");
	}).toggle(
		function(){
			$(this).attr('value','閉じる');
			$("#load1").show();
		},
		function(){
			$(this).attr('value','ローディング');
			$("#load1").hide();
		}
	)
});

サンプル

jQueryにはoneという関数があって、最初の一回だけ実行する処理を設定できます。

loadは一回だけで、あとはshow関数とhide関数を使ってCSSのdisplayで制御。

チャットなどの更新性が高い場合は毎回loadしたほうがよいのでケース バイ ケースですが。

あと、jQueryのAjax機能は優秀で読み込むファイルが更新されていない場合、DOMの再構築を行わないので毎回読み込んでもそれほど負荷にはならないです。

ひとつのリンクで、複数のフォームに情報を挿入したい

ネタ元は

<code title1="北海道" title2="飛行機" title3="20000">

code要素に独自属性作ってデータを保持するという力技(というかバッドノウハウ)でされてるのですがそれはどうかと。。。

JavaScript内でデータを管理する方法はid:amachangが書かれています。

ですので、私はHTML内でデータを管理する方法で書いてみました。

規模や管理体制によって簡単なデータはJavaScriptではなくHTMLで制御したい場合も多いはず。

HTMLはこんな感じ

<p class="menu">
<a href='javascript:void(0)' title="プランA">
	<span class="title1">北海道</span>
	<span class="title2">飛行機</span>
	<span class="title3">20000</span>
</a> | 
<a href='javascript:void(0)' title="プランB">
	<span class="title1">東京</span>
	<span class="title2">新幹線</span>
	<span class="title3">5000</span>
</a> | 
<a href='javascript:void(0)' title="プランC">
	<span class="title1">アメリカ</span>
	<span class="title2">泳いで</span>
	<span class="title3">3000</span>
</a> | 
<a href='javascript:void(0)' title="プランD">
	<span class="title1">インド</span>
	<span class="title2">鳥に乗って</span>
	<span class="title3">300000</span>
</a> | 
</p>

サンプル2

属性とか不可視な領域に記述するとJavaScript OFFの人が見えなくて不親切。

入力補助の機能が提供できなくても、入力候補ぐらいは見せて上げたいところです。

a要素のhrefは悩ましい所ですがvoid(0)で。

参考:Re:href="#" onclick の悪習

DOMなどの参考書にはよくhrefには機能しなくてもURLを書きましょうと書かれてありますが、ここでは間違ってもurlを書いたら駄目です。

JavaScript OFFの人がクリックしたらフォームの入力途中で画面遷移してしてしまうから。

そうしたら、a要素使うなという感じの話になったりしますが、ここではそこらへんはスルーで。

(JavaScript OFFもどこまで対応するかは悩ましいですね)

スクリプトです。

$(function(){
	$("p.menu a").click(function(){
		$("#ls1").val($("span.title1",this).text());
		$("#ls2").val($("span.title2",this).text());
		$("#ls3").val($("span.title3",this).text());
	}).each(function(){
		$(this).append($(this).attr("title"));
		$("span",this).hide();
	})
});

click関数でクリックされた際の処理をeach関数で表示のコントロールをしています。

値のクリアはinput要素のresetでいいんじゃないかと思ってます。

関連エントリー

複数のjsライブラリを利用する際にonloadを書き換える方法
文字サイズの変更を取得するJavaScript
displayプロパティを初期値に戻す為のJavaScript
jQuery版のLightBox「ThickBox」
DOM 読み込み完了時に関数を実行する domready.js

スポンサードリンク

«re:MT。 | メイン | [MT4LP5] MTの設置・運用に関するTIPS by 丹羽章»