jQuery

テキストフィールドの文字数をカウント。

2011.03.05 / Labs

テキストフィールドに入力した文字数を、リアルタイムにカウントするためのスクリプトです。
サンプルはこちら

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

</form>

</body>

</html>

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

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);
	};
}

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

};

}

jQueryでモーダルウィンドウを作成。

2010.12.23 / Labs

（追記／2011.12.02）ウィンドウをスクロールの際に、背景もズレてしまう不具合があったので、CSSとJavaScriptの一部を調整しました。

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>modal window</title>

</head>

<body>

</div>

<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」に対してコンテンツを読み込み、表示します。

@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;
}

@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%としています。

$(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"});
}

$(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」をクリックで、モーダルウィンドウを閉じます。

jQueryを使ってDIVボックスをセンター配置。

2010.11.07 / Notes

jQueryをリサイズイベントを応用して、ページに配置されたDIVボックスをセンターに配置する方法です。
センター配置にはCSSのプロパティ「top」「left」を使っています。ページ読み込み時、ウィンドウがリサイズされた時に上記のプロパティを設定することでセンター配置しています。
サンプルはこちら

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>center-box</title>

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>

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

</body>

</html>

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

$(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"});
}

$(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"});

}

特定の拡張子のリンクファイルのみ別ウィンドウで表示。

2010.05.18 / Notes

<a>タグでリンクを張られたファイルがPDFなど特定の拡張子を持つ場合に、jQueryを使って別ウィンドウで表示する際のメモです。

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

$("a[href$='pdf']").each(function() {

$(this).click(function() {

window.open($(this).attr("href"));

return false;

});

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

ウィンドウ内をスクロールするパネル。

2010.04.25 / Labs

jQueryによるウィンドウ内を、左右にスクロールするパネルのスクリプトです。
横幅1000pxのパネルを横に5枚並べて、リンクをクリックすることで目的のパネルに移動するスクリプトです。
アニメーションのイージングには「jquery.easing.1.3.js」を利用しています。
サンプルはこちら

index.html

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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

<ul>

</ul>

</div>

<p>panel-01</p>

</div>

<p>panel-02</p>

</div>

<p>panel-03</p>

</div>

<p>panel-04</p>

</div>

<p>panel-05</p>

</div>

</div>

</div>

</body>

</html>

style.css

@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;
}

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

}