jQueryで美しいグリッドレイアウトを実現できる「jquery.vgrid.js」

こんにちは、webデザインとかコーディング担当のさとうです。

初回から挨拶もそこそこにjqueryプラグインを紹介いたします。
今回紹介するプラグインはグリッドレイアウトを綺麗に、かっこ良く見せるものです。とても便利。

可変グリッドレイアウトのjQueryプラグイン書いたよ | Xlune::Blog
ブログのタイトルを見るとわかるように、このプラグインは日本の方が作っています。

必要なもの

jQuery本体　http://jquery.com/
jQuery easing　http://gsgd.co.uk/sandbox/jquery/easing/
jquery.vgrid.js　http://blog.xlune.com/2009/09/jqueryvgrid.html

実装方法

HTML+CSS
※サンプルではコードが長くなってしまうのでdivが2つしかありませんが、各自で増やして確認してみてください。

    ここにテキスト
  

    ここにテキスト
  

CSS

#grid-content {
	overflow: hidden;
 width: 800px;/*任意の幅に変更*/
	height: 0;
}
#grid-content div {
	width: 150px;
 height: auto;
	border: 1px solid #000;
 color: #333;
 margin: 5px;
	padding: 3px;
}

＜div id=”grid-content”＞ の内包するdivが自動で整列します。
この中のdivですが、サンプルでは文章の長さに応じて高さが変わるようにしてありますが、それぞれclassを付けて設定しても動作します。
また、このサンプルはデモ4の動作をするような設定をしています。その他のデモの動作を実装するには以下のコードにHTML内のjavascriptを書き換えてください。
▼デモ1

$(function(){
	$("#grid-content").vgrid();
});

▼デモ2

$(function(){
	$("#grid-content").vgrid({
		easeing: "easeOutBounce",
		time: 500,
		delay: 50
	});
});

▼デモ3

$(function(){
	$("#grid-content").vgrid({
		easeing: "easeOutQuint",
		time: 400,
		delay: 20
	});
});

▼デモ5(ソート機能つき)

$(function(){
	$("#grid-content").vgrid({
		easeing: "easeOutQuint",
		time: 400,
		delay: 20,
		fadeIn: {
			time: 500,
			delay: 50
		}
	});

	var hsort_flg = false;
	$("#hsort").click(function(e){
		hsort_flg = !hsort_flg;
		$("#grid-content").vgsort(function(a, b){
			var _a = $(a).find('h3').text();
			var _b = $(b).find('h3').text();
			var _c = hsort_flg ? 1 : -1 ;
			return (_a > _b) ? _c * -1 : _c ;
		}, "easeInOutExpo", 300, 0);
		return false;
	});

	$("#rsort").click(function(e){
		$("#grid-content").vgsort(function(a, b){
			return Math.random() > 0.5 ? 1 : -1 ;
		}, "easeInOutExpo", 300, 20);
		return false;
	});
});

HTMLにボタン追加

▼デモ6(ソート機能＋アイテム追加･削除機能つき)

$(function(){
	var hsort_flg = false;

	//setup
	var vg = $("#grid-content").vgrid({
		easeing: "easeOutQuint",
		time: 400,
		delay: 20,
		fadeIn: {
			time: 500,
			delay: 50
		},
		onStart: function(){
			$("#message1")
				.css("visibility", "visible")
				.fadeOut("slow",function(){
					$(this).show().css("visibility", "hidden");
				});
		},
		onFinish: function(){
			$("#message2")
				.css("visibility", "visible")
				.fadeOut("slow",function(){
					$(this).show().css("visibility", "hidden");
				});
		}
	});

	//add item
	$("#additem").click(function(e){
		var _item = $('
\
New Item

\

Foo

\

DELETE

\
			

')
			.hide()
			.addClass(Math.random() > 0.3 ? 'wn' : 'wl')
			.addClass(Math.random() > 0.3 ? 'hn' : 'hl');
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(300);
		});
		hsort_flg = true;
	});

	//delete
	vg.find("a").live('click', function(e){
		$(this).parent().parent().fadeOut(200, function(){
			$(this).remove();
			vg.vgrefresh();
		});
		return false;
	});

	//sort
	$("#hsort").click(function(e){
		hsort_flg = !hsort_flg;
		$("#grid-content").vgsort(function(a, b){
			var _a = $(a).find('h3').text();
			var _b = $(b).find('h3').text();
			var _c = hsort_flg ? 1 : -1 ;
			return (_a > _b) ? _c * -1 : _c ;
		}, "easeInOutExpo", 300, 0);
		return false;
	});
	$("#rsort").click(function(e){
		$("#grid-content").vgsort(function(a, b){
			return Math.random() > 0.5 ? 1 : -1 ;
		}, "easeInOutExpo", 300, 20);
		hsort_flg = true;
		return false;
	});
});

HTMLにボタン追加

▼デモ7(ソート機能＋画像入りアイテム追加･削除機能つき)

$(function(){
	var hsort_flg = false;

	//setup
	var vg = $("#grid-content").vgrid({
		easeing: "easeOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 20,
		fadeIn: {
			time: 500,
			delay: 50
		},
		onStart: function(){
			$("#message1")
				.css("visibility", "visible")
				.fadeOut("slow",function(){
					$(this).show().css("visibility", "hidden");
				});
		},
		onFinish: function(){
			$("#message2")
				.css("visibility", "visible")
				.fadeOut("slow",function(){
					$(this).show().css("visibility", "hidden");
				});
		}
	});

	//add item
	$("#additem").click(function(e){
		var _height = Math.max(30, Math.min(300, Math.round(Math.random()*300)));
		var _item = $('
\
New Item

\



\

DELETE

\
			

')
			.hide();
		vg.prepend(_item);
		vg.vgrefresh(null, null, null, function(){
			_item.fadeIn(300);
		});
		hsort_flg = true;
	});

	//delete
	vg.find("a").live('click', function(e){
		$(this).parent().parent().fadeOut(200, function(){
			$(this).remove();
			vg.vgrefresh();
		});
		return false;
	});

	//sort
	$("#hsort").click(function(e){
		hsort_flg = !hsort_flg;
		$("#grid-content").vgsort(function(a, b){
			var _a = $(a).find('h3').text();
			var _b = $(b).find('h3').text();
			var _c = hsort_flg ? 1 : -1 ;
			return (_a > _b) ? _c * -1 : _c ;
		}, "easeInOutExpo", 300, 0);
		return false;
	});
	$("#rsort").click(function(e){
		$("#grid-content").vgsort(function(a, b){
			return Math.random() > 0.5 ? 1 : -1 ;
		}, "easeInOutExpo", 300, 20);
		hsort_flg = true;
		return false;
	});
});

HTMLにボタン追加

No related posts.