Incredible Login Form


Description: ログインフォームをパネル内に入れて開閉式にする、というアイデア。クロスブラウザに対応しています。ログインの為にページ推移も無く、それなりに邪魔にもなるのでこうして必要な方が引き出す仕様にするのはいいユーザビリティですね。
Sample: demo
Tutorial: Build An Incredible Login Form With jQuery
License: -

Sample


パネル内です

Username:


Password:

「開ける」でパネルを開きます。

Note

$(document).ready(function() {
	$("div.panel_button").click(function(){
		$("div#panel").animate({
			height: "500px"
		})
		.animate({
			height: "400px"
		}, "fast");
		$("div.panel_button").toggle();

	});	

   $("div#hide_button").click(function(){
		$("div#panel").animate({
			height: "0px"
		}, "fast");

   });	

});

シンプルなコードで手軽です

Related snippet :

  • Description: フォームがアクティブの時にラベルを外にスライドさせます。通常はアクティブ時に消えますが、外にだすことで、入力補助になりそうです。クロスブラウザにも対 ...
  • Description: フォームがアクティブでもうっすらとラベル要素を残すプラグインです。ユーザー入力補助の一環として。デモでも使われているようにログインフォームなんかに良 ...
  • Description: FacebookのフッターパネルをjQueryで実装したもの。クリックで隠されていたコンテンツが表示されたり、ツールチップなどもオマージュされていま ...
  • Description: スライドするタブメニューです。条件分岐でIE用のcssを用意してクロスブラウザ対応させています。少しリッチなUIにしたい、という時にこうしたエフェク ...
  • Description: シンプルなモーダルウィンドウです。jQueryUIとThickbox Varietiesを併用するタイプで、クロスブラウザで動作します。使いどころは ...
  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...
  • Description: Facebookのように、インスタンスサーチから選択後にタグ化出来るプラグインです。大量の選択肢がある場合は、ドロップダウンや入力方式であることが殆 ...