FB Style Footer Panel 2


Description: FacebookのフッターパネルをjQueryで実装したもの。クリックで隠されていたコンテンツが表示されたり、ツールチップなどもオマージュされています。cssを調整する必要がありますが、IE6でも動作しました。
Sample: demo
Tutorial: Facebook Style Footer Admin Panel Part 2
License: -

Note

$(document).ready(function(){

	//Adjust panel height
	$.fn.adjustPanel = function(){
		$(this).find("ul, .subpanel").css({ 'height' : 'auto'}); //Reset subpanel and ul height

		var windowHeight = $(window).height(); //Get the height of the browser viewport
		var panelsub = $(this).find(".subpanel").height(); //Get the height of subpanel
		var panelAdjust = windowHeight - 100; //Viewport height - 100px (Sets max height of subpanel)
		var ulAdjust =  panelAdjust - 25; //Calculate ul size after adjusting sub-panel (27px is the height of the base panel)

		if ( panelsub >= panelAdjust ) {	 //If subpanel is taller than max height...
			$(this).find(".subpanel").css({ 'height' : panelAdjust }); //Adjust subpanel to max height
			$(this).find("ul").css({ 'height' : ulAdjust}); //Adjust subpanel ul to new size
		}
		else if ( panelsub < panelAdjust ) { //If subpanel is smaller than max height...
			$(this).find("ul").css({ 'height' : 'auto'}); //Set subpanel ul to auto (default size)
		}
	};

	//Execute function on load
	$("#chatpanel").adjustPanel(); //Run the adjustPanel function on #chatpanel
	$("#alertpanel").adjustPanel(); //Run the adjustPanel function on #alertpanel

	//Each time the viewport is adjusted/resized, execute the function
	$(window).resize(function () {
		$("#chatpanel").adjustPanel();
		$("#alertpanel").adjustPanel();
	});

	//Click event on Chat Panel + Alert Panel
	$("#chatpanel a:first, #alertpanel a:first").click(function() { //If clicked on the first link of #chatpanel and #alertpanel...
		if($(this).next(".subpanel").is(':visible')){ //If subpanel is already active...
			$(this).next(".subpanel").hide(); //Hide active subpanel
			$("#footpanel li a").removeClass('active'); //Remove active class on the subpanel trigger
		}
		else { //if subpanel is not active...
			$(".subpanel").hide(); //Hide all subpanels
			$(this).next(".subpanel").toggle(); //Toggle the subpanel to make active
			$("#footpanel li a").removeClass('active'); //Remove active class on all subpanel trigger
			$(this).toggleClass('active'); //Toggle the active class on the subpanel trigger
		}
		return false; //Prevent browser jump to link anchor
	});
	//Click event outside of subpanel
	$(document).click(function() { //Click anywhere and...
		$(".subpanel").hide(); //hide subpanel
		$("#footpanel li a").removeClass('active'); //remove active class on subpanel trigger
	});
	$('.subpanel ul').click(function(e) {
		e.stopPropagation(); //Prevents the subpanel ul from closing on click
	});

	$("#alertpanel li").hover(function() {
		$(this).find("a.delete").css({'visibility': 'visible'}); //Show delete icon on hover
	},function() {
		$(this).find("a.delete").css({'visibility': 'hidden'}); //Hide delete icon on hover out
	});
});

意外と軽量でいけるんですね。

Related snippet :

  • Description: マウスオーバーで隠れていた子リストが上から表示されます。消すには×を押す必要があります。クロスブラウザで動作してくれるので、少し変わったUIにしたい ...
  • Description: 簡単なコードで実装できる開閉アコーディオンです。Toggleメソッドの基本的な使い方です。テキストをクリックすると隠れたコンテンツが表示されます。 ...
  • Description: ログインフォームをパネル内に入れて開閉式にする、というアイデア。クロスブラウザに対応しています。ログインの為にページ推移も無く、それなりに邪魔にもな ...
  • Description: シンプルなヘルプコンテンツです。クリックすると隠されていたテキストが表示される仕組み。デモでIE8で表示されていませんが、IE6、7では問題ないので ...
  • Description: クリックでドロップダウンするメニューコンテンツを実装します。スムーズにダウンし、戻りもスムーズです。IE6でもIE7でも全く同様の動きをしてくれます ...
  • Description: 動的にタブを生成するプラグインです。タブはページ推移無しでコンテンツを切り替えることが可能です。クロスブラウザ対応ですが、IE6だけ多少cssハ ...
  • Description: マウスオーバーでフェードインアニメーションでドロップダウンするメガメニュー。3カラム、4カラムなども可能でクロスブラウザ対応です。 Sam ...