Smart Columns


Description: グリッドを守ったレイアウトを構築するプラグインです。モニタサイズに依存することなく、時系列を崩さないレイアウトを守れます。
Sample: demo
Tutorial: Smart Columns w/ CSS & jQuery
License: -

Note

$(document).ready(function(){

	$('a[href^="http://"]')	.attr({ target: "_blank" });

	function smartColumns() {

		$("ul.column").css({ 'width' : "100%"});

		var colWrap = $("ul.column").width();
		var colNum = Math.floor(colWrap / 200);
		var colFixed = Math.floor(colWrap / colNum);

		$("ul.column").css({ 'width' : colWrap});
		$("ul.column li").css({ 'width' : colFixed});

	}	

	smartColumns();	

	$(window).resize(function () {
		smartColumns();

	}); 

});

jQueryと上記コードでOKです。

Related snippet :

  • Description: シンプルなツールチップ。です。超軽量で、手軽に実装可能ですよ。アンカータグ内のtitleをツールチップに実装します。クロスブラウザで動作してくれるの ...
  • Description: テーブルにヒートカラーを追加するプラグインです。色付けするとどうしても見にくいテーブルがとても可視性が高くなります。また、ソートも可能でクロスブラウ ...
  • Description: 簡単なコードで実装できる開閉アコーディオンです。Toggleメソッドの基本的な使い方です。テキストをクリックすると隠れたコンテンツが表示されます。 ...
  • Description: クロスブラウザに対応したシンプルで使い勝手の良いギャラリー系プラグインです。マークアップもシンプルで導入も手軽に行えます。 Sample: ...
  • Description: マウスオーバーでフェードインアニメーションでドロップダウンするメガメニュー。3カラム、4カラムなども可能でクロスブラウザ対応です。 Sam ...
  • Description: バー全体が降りてくるタイプのドロップダウンメニューです。横並びに羅列されるので、下部コンテンツを邪魔することもありません。クロスブラウザで動作します ...
  • Description: 背景をアニメーションさせるjQueryプラグインです。テキストを書くことも出来ますし、透過された画像を重ねて表示させる事も可能です。IE6のために、 ...