JavaScriptテックラボ

スライドログインバー

2009年6月25日

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

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// ログイン用
$(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>

Comment

コメントを残す

メールアドレスが公開されることはありません。

関連記事

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。

株式会社リズムファクトリーでは現在、下記の職種について人材募集を行っております。
求人をクリックすると「求人情報サイトFind Job!」の求人詳細画面が開きますので、こちらからご応募下さい。

提供 : Webな人の求人情報サイト Find Job!