mootoolsベースログインフォーム
- Show/hide Login and Signup Panel using Mootools 1.2〔ログインと新規登録パネルの表示非表示切替〕
Show/hide Login and Signup Panel using Mootools 1.2
ログインと新規登録パネルの表示非表示切替
2008/12/7
Show/hide Login and Signup Panel using Mootools 1.2
ページ上部のタブをクリックすると、ログインパネルが表示され、閉じるボタンをクリックすると非表示になるログインフォームを実装できます。 必要なときにこれらのパネルを表示することができるため、省スペースですっきりしたデザインにしたいときに使えます。 パネル内に、新規登録やパスワードリマインダーへのリンクも設置してあるので、情報量にもよりますが、パネル内で切り替えるとさらにコンパクト化できそうです。

Show/hide Login and Signup Panel using Mootools 1.2の設置サンプルサンプルを見る
<!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>Show/hide Login and Signup Panel using Mootools 1.2 | 設置サンプル</title> <link rel="stylesheet" type="text/css" href="/content/lib/global.css" /> <script src="/content/lib/mootools/mootools-1.2-core-yc.js" type="text/javascript"></script> <script src="/content/lib/mootools/mootools-1.2-more.js" type="text/javascript"></script> <script src="/content/lib/mootools/login_form/fx.slide.js" type="text/javascript""></script> <link rel="stylesheet" type="text/css" href="/content/lib/mootools/login_form/fx.slide.css" /> <style type="text/css"> body { background-color:#fff; margin:0; padding:0;} #wrap{ margin:0; padding:0; } #content{ margin:0; padding:50px 20px; } </style> </head> <body> <div id="wrap"> <!-- Login --> <div id="login"> <div class="loginContent"> <form action="#" method="post"> <label for="log"><b>ユーザー名:</b></label> <input class="field" type="text" name="log" id="log" value="" size="23" /> <label for="pwd"><b>パスワード:</b></label> <input class="field" type="password" name="pwd" id="pwd" size="23" /> <input type="submit" name="submit" value="" class="button_login" /> <input type="hidden" name="redirect_to" value=""/> </form> <div class="left"> <label for="rememberme"><input name="rememberme" id="rememberme" class="rememberme" type="checkbox" checked="checked" value="forever" /> ログイン情報を記憶</label></div> <div class="right"><a href="#">新規登録</a> | <a href="#">パスワードを忘れた方</a></div> </div> <div class="loginClose"><a href="#" id="closeLogin">パネルを閉じる</a></div> </div> <!-- /login --> <!-- top --> <div id="top"> <!-- login --> <ul class="login"> <li class="left"> </li> <li>こんにちは Guestさん</li> <li>|</li> <li><a id="toggleLogin" href="#">ログイン</a></li> </ul> <!-- / login --> </div> <!-- / top --> <div id="content"> <h1><a href='http://web-kreation.com/index.php/ajax-javascript/nice-login-and-signup-panel-using-mootools-12/'>Show/hide Login and Signup Panel using Mootools 1.2</a> | 設置サンプル</h1> <p>「ログイン」タブをクリックするとログインフォームが表示されます。</p> </div> </div> </body> </html>