JavaScriptテックラボ

jQueryのslideTogglede

slideToggle() でスライドアニメーション

JQueryを使ったスライドするログインバーを紹介します。
スクリプト部分は非常に単純で、JQueryを読み込んだ後、任意のボタンにJQueryのメソッドslideToggle()を実行するだけです。

<script src="jquery.js"></script>
<script>
// ログイン用
$(function(){
	$('a#link-login').click(function(){$('div#client-login').slideToggle(); return false;});
	$('button#btn-login').click(function(){alert("ok");$('div#client-login').slideToggle(); return true;});
	$('div#client-login').css('display', 'none');
});
</script>
<div id="client-login">
	<form action="" method="post" target="_blank">
		<label for="username">ユーザ名:</label><input id="username" name="username" type="text" class="txtbox" />
		<label for="password">パスワード:</label><input id="password" name="password" type="password" class="txtbox" />
		<button id="btn-login">ログイン</button>
	</form>
</div>
<div class="topnavi">
	<a href="#" id="link-login">ログイン</a>
</div>

関連記事