[u] [b] gridster 플러그 인 [/ b] [/ u]
gridster 소개: gridster. js 는 Ducksboard 의 오픈 소스 프로젝트 입 니 다. Ducksboard 는 gridster. js 로 자신의 제품 을 만 들 었 습 니 다. gridster 는 사용자 정의, 클 라 이언 트 메뉴 플러그 인 입 니 다. 그 는 당신 이 주목 하 는 기하학 적 도형 을 마음대로 배치 할 수 있 습 니 다.
실제 항목 에서 모든 기하학 적 도형 을 widget 이 라 고 부 릅 니 다. 모든 widget 은 프로젝트 모듈 의 축소판 으로 체계 적 인 관찰 에 편리 합 니 다.
gridster 다운로드: [url]http://gridster.net/[/url].
gridster 요구 사항: Gridster 는 Internet Explorer 9 +, Firefox, Chrome, Safari 및 Opera. jquery 1.7 + 를 지원 합 니 다.
grister 사용:

 
  
    
	
	
	
	
    
    
 
   
	

 <br>	$(document).ready(function(){<br>		$(".gridster ul").gridster({<br>			//widget_selector: "> li #sss",<br>			//extra_rows: 1111,//          15  min_rows<br>			//extra_cols: 9,//                1 <br>			//max_size_x: 6,//    widget x size     6<br>			//max_size_y: 6,//    widget y size     6<br>			//autogenerate_stylesheet: true,//    widget       true<br>				avoid_overlapped_widgets: false,//                  widget         true<br>			//serialize_params: function($w, wgd) {//   serialize()      $w   li  wgd {col: 4, row: 3, size_x: 2, size_y: 1,el:b.fn.b.init[1]}<br>				//alert($w+"---"+wgd);<br>				//return { col: wgd.col, row: wgd.row }<br>			//},<br><br>			/*draggable.start: function(event, ui){},<br>			draggable.drag: function(event, ui){},<br>			draggable.stop: function(event, ui){},<br>			collision.on_overlap_start: function(collider_data) { },<br>			collision.on_overlap: function(collider_data) { },<br>			collision.on_overlap_stop: function(collider_data) { },*/<br>			widget_margins: [10, 10],//     widget margin       y    x<br>			widget_base_dimensions: [140, 140],//   widget width height <br>			draggable:{<br>				 start: function(event, ui){<br>					//alert("statr");<br>					console.log("start");<br>				 },<br>				 drag:function(event, ui){<br>					console.log("drag");<br>				 },<br>				 stop: function(event, ui){<br>					 console.log("stop");<br>				 }<br>			},<br>			collision:{<br>				on_overlap_start: function(collider_data) { <br>				//	alert(collider_data);<br>				console.log("on_overlap_start");},<br>				on_overlap:function(collider_data) {console.log("on_overlap"); },<br>				on_overlap_stop:function(collider_data) { console.log("on_overlap_stop");}<br>			}<br>		});<br><br><br>	});<br>	function test(){<br>		 var gridster = $(".gridster ul").gridster().data('gridster');//         ul <br>		 alert("row:"+gridster.rows+"--cols"+gridster.cols);<br>		 // alert(gridster);<br>		  gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);//    widget<br>		 // gridster.remove_widget( $('.gridster li').eq(3) );//    <br>	      var json = gridster.serialize();//       widget<br>			alert(json);<br>			gridster.disable( );<br>	}<br>	function test1(){<br>		var gridster = $(".gridster ul").gridster().data('gridster');//         ul <br>		var g = gridster.serialize($(".s1"));<br>		alert(g);<br>		for(var v in g){<br>			//alert(v);<br>		}<br>	}<br>  
 

		
Demo 


		


		

			[list]
				

					

						open source
					

				

				


				

				


				

				


				

				

				


				

				


				

				

				


						11
			    

			[/list]