almondlab. » jQuery http://www.almondlab.jp Web Design, Graphic Design, FLASH, CMS Sat, 28 Jan 2012 15:25:03 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 Google Mapsで住所、緯度・経度を取得。 http://www.almondlab.jp/labs/964 http://www.almondlab.jp/labs/964#comments Fri, 27 Jan 2012 14:01:28 +0000 almondlab. http://www.almondlab.jp/?p=964 Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>
 
 
 
<div id="map" style="width:500px; height:500px;"></div>
 
 
 
<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>
 
 
 
</body>
</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
 
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
 
 
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
 
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
 
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
 
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}
]]> http://www.almondlab.jp/labs/964/feed 0 jQueryでアンカーポイントまでスクロール。 http://www.almondlab.jp/labs/839 http://www.almondlab.jp/labs/839#comments Fri, 01 Apr 2011 13:26:33 +0000 almondlab. http://www.almondlab.jp/?p=839 jQueryでページ内のアンカーポイントまでスムーズにスクロールするスクリプトです。
スクロールのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11

function scrollToAnchor() {
	$("a[href*=#]").click(function() {
		var target = this.hash;
		var offset = $(target).offset().top;
		if (offset > $(document).height()-$(window).height()) {
			offset = $(document).height()-$(window).height();
		}
		$("html, body").animate({scrollTop:offset}, {duration:1000, easing:"easeOutQuart"});
		return false;
	});
}

<a>タグのリンクからハッシュ（#の部分）のみを抽出して、ページ先頭からの高さを調べています。

]]> http://www.almondlab.jp/labs/839/feed 0 jQueryで要素の存在を確認する方法。 http://www.almondlab.jp/notes/813 http://www.almondlab.jp/notes/813#comments Sun, 13 Mar 2011 13:31:02 +0000 almondlab. http://www.almondlab.jp/?p=813 jQueryを使って、要素の存在を確認する際のメモです。

1
2
3
4
5

$(function() {
	if ($("#target").length > 0) {
		//#targetが存在した場合の処理
	}
});
]]> http://www.almondlab.jp/notes/813/feed 0 テキストフィールドの文字数をカウント。 http://www.almondlab.jp/labs/802 http://www.almondlab.jp/labs/802#comments Sat, 05 Mar 2011 04:39:06 +0000 almondlab. http://www.almondlab.jp/?p=802 テキストフィールドに入力した文字数を、リアルタイムにカウントするためのスクリプトです。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	countField("textarea#field");
});
 
function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();
 
	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}
</script>
<title>Count Field</title>
</head>
<body>
 
 
 
<p>テキストエリアに入力した文字数がカウントされます。</p>
<form>
<textarea id="field" cols="100" rows="10"></textarea>
</form>
 
 
 
</body>
</html>

テキストエリア内でキーストロークがあった時、またはテキストエリアの内容が変更されたときに文字数をカウントして、表示を書き換えています。

13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

function countField(target) {
	$(target).after("<div class=\"count\"></div>");
	$(target).bind({
		keyup: function() {
			setCounter();
		},
		change: function() {
			setCounter();
		}
	});
	setCounter();
 
	function setCounter(){
		$("div.count").text("文字数："+$(target).val().length);
	};
}
]]> http://www.almondlab.jp/labs/802/feed 0 jQueryでモーダルウィンドウを作成。 http://www.almondlab.jp/labs/737 http://www.almondlab.jp/labs/737#comments Thu, 23 Dec 2010 10:45:17 +0000 almondlab. http://www.almondlab.jp/?p=737 ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。（2011.12.02）

jQueryを使ってモーダルウィンドウを作成します。ウィンドウに表示するコンテンツはjQueryのAjaxで読み込むようにしています。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="common/css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="common/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="common/js/init.js" type="text/javascript"></script>
<title>modal window</title>
</head>
<body>
 
 
 
<div id="modal">
<div class="background"></div>
<div class="container"></div>
</div><!-- modal -->
 
 
 
<ul>
<li><a href="test-01.html" class="modal">ウィンドウ1</a></li>
<li><a href="test-02.html" class="modal">ウィンドウ2</a></li>
<li><a href="test-03.html" class="modal">ウィンドウ3</a></li>
</ul>
 
 
 
</body>
</html>

jQueryを使ってリストのリンクをクリックで「href」のアドレスを参照し、「div#modal div.container」に対してコンテンツを読み込み、表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

@charset "utf-8"; 
 
 
 
html,
body {
	height: 100%;
	margin: 0px;
	padding: 0px;
}
div#modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
}
div#modal div.background {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 0.75;
	filter: alpha(opacity=75);
	-ms-filter: "alpha(opacity=75)";
}
div#modal div.container {
	position: relative;
	width: 500px;
	height: 500px;
	background-color: #ffffff;
}

CSSでは、モーダルウィンドウの背景を黒（#000000）の透明度75%としています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

$(function() {
	setModal();
})
 
function setModal() {
 
	//HTML読み込み時にモーダルウィンドウの位置をセンターに調整
	adjustCenter("div#modal div.container");
 
	//ウィンドウリサイズ時にモーダルウィンドウの位置をセンターに調整
	$(window).resize(function() {
		adjustCenter("div#modal div.container");
	});
 
	//背景がクリックされた時にモーダルウィンドウを閉じる
	$("div#modal div.background").click(function() {
		displayModal(false);
	});
 
	//リンクがクリックされた時にAjaxでコンテンツを読み込む
	$("a.modal").click(function() {
		$("div#modal div.container").load($(this).attr("href"), data="html", onComplete);
		return false;
	});
 
	//コンテンツの読み込み完了時にモーダルウィンドウを開く
	function onComplete() {
		displayModal(true);
		$("div#modal div.container a.close").click(function() {
			displayModal(false);
			return false;
		});
	}
}
 
//モーダルウィンドウを開く
function displayModal(sign) {
	if (sign) {
		$("div#modal").fadeIn(500);
	} else {
		$("div#modal").fadeOut(250);
	}
}
 
//ウィンドウの位置をセンターに調整
function adjustCenter(target) {
	var margin_top = ($(window).height()-$(target).height())/2;
	var margin_left = ($(window).width()-$(target).width())/2;
	$(target).css({top:margin_top+"px", left:margin_left+"px"});
}

リンクの「href」のアドレスを参照してコンテンツを読み込み、表示しています。
背景の「div#modal div.background」、またはコンテンツ内の「a.close」をクリックで、モーダルウィンドウを閉じます。

]]> http://www.almondlab.jp/labs/737/feed 3 jQueryを使ってDIVボックスをセンター配置。 http://www.almondlab.jp/notes/723 http://www.almondlab.jp/notes/723#comments Sun, 07 Nov 2010 03:48:42 +0000 almondlab. http://www.almondlab.jp/?p=723 jQueryをリサイズイベントを応用して、ページに配置されたDIVボックスをセンターに配置する方法です。
センター配置にはCSSのプロパティ「top」「left」を使っています。ページ読み込み時、ウィンドウがリサイズされた時に上記のプロパティを設定することでセンター配置しています。
サンプルはこちら

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>center-box</title>
<style type="text/css">
html,
body {
	height: 100%;
	margin: 0px;
}
div#outer {
	width: 50%;
	height: 100%;
	background: #e6e6e6;
}
div#inner {
	position: relative;
	width: 200px;
	height: 200px;
	background: #b3b3b3;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	centerBox();
 
	//ウィンドウがリサイズされたとき
	$(window).resize(function() {
		centerBox();
	});
})
 
//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定
function centerBox() {
	var margin_top = ($("div#outer").height()-$("div#inner").height())/2;
	var margin_left = ($("div#outer").width()-$("div#inner").width())/2;
	$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});
}
</script>
</head>
<body>
<div id="outer">
<div id="inner">BOX</div>
</div><!-- outer -->
</body>
</html>

ページの読み込み時、ウィンドウがリサイズされた時に関数を実行しています。
センター配置には外側のボックスを内側のボックスの余白を計算して、内側ボックスの左上の座標を設定しています。

25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

$(function(){
	centerBox();
 
	//ウィンドウがリサイズされたとき
	$(window).resize(function() {
		centerBox();
	});
})
 
//外側のボックスと内側のボックスの余白を計り、内側のボックスに座標を設定
function centerBox() {
	var margin_top = ($("div#outer").height()-$("div#inner").height())/2;
	var margin_left = ($("div#outer").width()-$("div#inner").width())/2;
	$("div#inner").css({top:margin_top+"px", left:margin_left+"px"});
}
]]> http://www.almondlab.jp/notes/723/feed 0 特定の拡張子のリンクファイルのみ別ウィンドウで表示。 http://www.almondlab.jp/notes/620 http://www.almondlab.jp/notes/620#comments Mon, 17 May 2010 15:00:34 +0000 almondlab. http://www.almondlab.jp/?p=620 <a>タグでリンクを張られたファイルがPDFなど特定の拡張子を持つ場合に、jQueryを使って別ウィンドウで表示する際のメモです。

1
2
3
4
5
6

$("a[href$='pdf']").each(function() {
	$(this).click(function() {
		window.open($(this).attr("href"));
		return false;
	});
});

href属性の値が「pdf」で終わる<a>タグ全てに対して、別ウィンドウでの表示に置き換えています。

]]> http://www.almondlab.jp/notes/620/feed 0 ウィンドウ内をスクロールするパネル。 http://www.almondlab.jp/labs/557 http://www.almondlab.jp/labs/557#comments Sun, 25 Apr 2010 11:46:44 +0000 almondlab. http://www.almondlab.jp/?p=557 jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	$("a.panel-01").click(function() {scrollGeneral(0)});
	$("a.panel-02").click(function() {scrollGeneral(1000)});
	$("a.panel-03").click(function() {scrollGeneral(2000)});
	$("a.panel-04").click(function() {scrollGeneral(3000)});
	$("a.panel-05").click(function() {scrollGeneral(4000)});
 
})
function scrollGeneral(pos) {
	$("div#container").animate({scrollLeft: pos}, {duration: 750, easing: "easeOutQuint"});
	return false;
}
</script>
<title>scroll-panel</title>
</head>
<body>
 
 
 
<!-- navi - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="navi">
<ul>
<li><a href="javascript:;" class="panel-01">01</a></li>
<li><a href="javascript:;" class="panel-02">02</a></li>
<li><a href="javascript:;" class="panel-03">03</a></li>
<li><a href="javascript:;" class="panel-04">04</a></li>
<li><a href="javascript:;" class="panel-05">05</a></li>
</ul>
</div><!-- navi -->
 
 
 
<div id="container">
<div id="general">
 
 
 
<!-- panel-01 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="panel-01" class="inner">
<p>panel-01</p>
</div><!-- panel-01 -->
 
 
 
<!-- panel-02 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="panel-02" class="inner">
<p>panel-02</p>
</div><!-- panel-02 -->
 
 
 
<!-- panel-03 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="panel-03" class="inner">
<p>panel-03</p>
</div><!-- panel-03 -->
 
 
 
<!-- panel-04 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="panel-04" class="inner">
<p>panel-04</p>
</div><!-- panel-04 -->
 
 
 
<!-- panel-05 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
 
<div id="panel-05" class="inner">
<p>panel-05</p>
</div><!-- panel-05 -->
 
 
 
</div><!-- general -->
</div><!-- container -->
 
 
 
</body>
</html>

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

@charset "utf-8"; 
 
 
 
/* text -------------------------------------------------------------------------------- */
 
* {
	margin: 0px;
	padding: 0px;
}
html,
body {
	height: 100%;
}
html {
	overflow: hidden;
}
 
 
 
/* navi -------------------------------------------------------------------------------- */
 
div#navi {
	position: absolute;
}
 
 
/* container -------------------------------------------------------------------------------- */
 
div#container {
	overflow: hidden;
	width: 100%;
	height: 100%;
}
 
 
 
/* general -------------------------------------------------------------------------------- */
 
div#general {
	width: 6000px;
	height: 100%;
}
div#general div.inner {
	float: left;
	width: 1000px;
	height: 800px;
}
div#general div.inner p {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 60px;
	color: #d9d9d9;
	padding: 30px 60px;
}
 
 
 
/* panels -------------------------------------------------------------------------------- */
 
div#panel-01 {
	background: #f8f8f8;
}
div#panel-02 {
	background: #ffffff;
}
div#panel-03 {
	background: #f8f8f8;
}
div#panel-04 {
	background: #ffffff;
}
div#panel-05 {
	background: #f8f8f8;
}
]]> http://www.almondlab.jp/labs/557/feed 0 jQueryでイメージのロールオーバーの設定。 http://www.almondlab.jp/notes/488 http://www.almondlab.jp/notes/488#comments Sat, 27 Feb 2010 14:11:32 +0000 almondlab. http://www.almondlab.jp/?p=488 jQueryを使ってナビゲーションボタンなどによく使われている、画像のロールオーバー、ロールアウトを設定する方法です。
予め通常時、ロールオーバー時の画像データ2種類を用意します。ファイル名は通常時が「button.png」の場合、ロールオーバー時は「button-over.png」と「-over」を付加しておきます。ともに同じディレクトリに保存します。
HTMLに通常時の画像を配置し、クラスを「over」としておきます。

1

<img src="button.png" alt="ボタン" class="over" />

次のjQueryを含むJavasScriptを、Head内、外部ファイルなど任意の場所に記述します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(function(){
	imageOver();
})
 
//イメージのロールオーバー設定
function imageOver() {
 
	//クラスに「over」を持つ、ページ内の全てのimg要素に対して実行
	$("img.over").each(function() {
 
		//イメージURLから拡張子を取り出し、ロールオーバー用イメージURLを作成
		var image = this.src;
		var extension = image.substr(image.lastIndexOf("."), image.length-1);
		var image_over = image.replace(extension, "-over"+extension);
 
		//ロールオーバー用イメージを読み込み
		new Image().src = image_over;
 
		//ロールオーバー、ロールアウト時のイメージURL設定
		$(this).hover(
			function(){this.src = image_over},
			function(){this.src = image}
		);
	});
}

上記のスクリプトでは、HTMLページ内に配置してある「over」クラスを持つイメージ全てに対して、ロールオーバー時に「-over」を付加した画像ファイルに置き換える設定にしてあります。ロールアウトで元の画像に戻します。
スクリプト内でロールオーバー用画像を読み込んでおくことにより、ロールオーバー時に画像の読み込みのため一瞬、間が空くことを防いでいます。

]]> http://www.almondlab.jp/notes/488/feed 0 jQueryのプラグインでCookieを扱う方法。 http://www.almondlab.jp/notes/393 http://www.almondlab.jp/notes/393#comments Thu, 11 Feb 2010 01:35:09 +0000 almondlab. http://www.almondlab.jp/?p=393 jQueryのプラグインを使うと、ブラウザのクッキーを簡単に扱えます。
実装するにはjQueryのコアと、「jquery.cookie.js」プラグインを読み込ませてから、「$.cookie」メソッドでクッキーの読み込み、書き込みの操作ができるようになります。
次のコードでは読み込み、書き込みごとに関数にして、「cookie-test」というクッキー名の値を操作しています。
クッキーの有効期限は「expires」の引数で、日にちを指定できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
 
<script type="text/javascript">
 
//クッキーの読み込み
function getCookie() {
	return $.cookie("cookie-test");
}
 
//クッキーの書き込み
function setCookie(str) {
	$.cookie("cookie-test", str, {expires:3}); //有効期限を3日
}
</script>

jquery.cookie.jsプラグインページ

]]> http://www.almondlab.jp/notes/393/feed 0 jQueryのプラグインでFLASHの埋め込み。 http://www.almondlab.jp/notes/119 http://www.almondlab.jp/notes/119#comments Tue, 05 Jan 2010 02:04:08 +0000 almondlab. http://www.almondlab.jp/?p=119 jQueryのプラグインを利用して、HTMLにFLASHを簡単に埋め込む方法です。短いコードで記述できるので、ソースコードがすっきりとして見やすくなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery FLASH</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});
 
</script>
</head>
<body>
 
<div id="flash">
<p>このページのコンテンツには、Adobe Flash Playerの最新バージョンが必要です。</p>
</div><!-- flash -->
 
</body>
</html>

<head>タグ内にjQuery本体とjquery.flash.jsを読み込んで、div#flashに対して埋め込みの記述をします。
最低限必要なのはSWFファイルのパスのみで、width、heightは省略できます。

6
7
8
9
10
11
12
13
14

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.flash.js"></script>
<script type="text/javascript">
 
$(document).ready(function() {
$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400'});
});
 
</script>

FLASHにパラメータを渡す場合は、次のようにflashvarsをオブジェクトで追加します。

10

$('div#flash').flash({'src':'main.swf', 'width':'800', 'height':'400', 'flashvars':{'init':'init.xml', 'image':'image.jpg'}});

jquery.flash.jsプラグインページ

]]> http://www.almondlab.jp/notes/119/feed 0