gridster插件详解 -

a151555

浏览: 80491 次
性别:

最近访客更多访客>>

ssuubb2711

dragon__lin

lineys

Santy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

gridster插件详解

博客分类：

javascript
jquery插件

html javascript jquery

gridster插件
gridster简介：gridster.js是Ducksboard的开源项目，Ducksboard用gridster.js做了自己的产品，gridster是一款自定义，客户菜单插件，他可以随意摆放你关注的几何图形。
在实际项目中每个几何图形都被称为widget,每个widget可以是你项目模块的一个缩影，便于你系统性的观察。
gridster下载：http://gridster.net/.
gridster要求：Gridster supports Internet Explorer 9+, Firefox, Chrome, Safari and Opera.jquery 1.7+.
grister使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
    <meta name="article" id="articlelink" content="/technology/jquerynews/20120815-jqueryplugin-dragndrop-gridster/" />
	<meta name="author" content="www.gbin1.com" />
	<meta http-equiv="content-script-type" content="text/javascript">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="dist/jquery.gridster.min.css">
    <script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="dist/jquery.gridster.min.js" charset="utf-8"></script>
 </head>
   <!--
 <script type="text/javascript" src="dist/jquery.coords.js"></script>
	<script type="text/javascript" src="dist/jquery.draggable.js"></script>
	<script type="text/javascript" src="dist/jquery.collision.js"></script>-->
	<style>
		body{
			font-family: Helvetica, arial, sans-serif;
			margin:150px auto;
			background: red;
			color: #fff;
			font-size: 12px;
			width:940px;
		}
		
		a{
			color: #808080;
		}
		
		h1{
			padding:10px;
			font-size: 38px;
		}
		
		ul{
			list-style:block;
		}
		
		li{
			background: blue;
		}
		
		.s1{
			background: blue;
		}
		
		.s2{
			background: green;
		}
		
		.s3{
			background:yellow;
		}
		
		.s4{
			background: black;
		}
	</style>
	
 <script type="text/javascript">
	$(document).ready(function(){
		$(".gridster ul").gridster({
			//widget_selector: "> li #sss",
			//extra_rows: 1111,//设置多余的行数 默认15行 min_rows
			//extra_cols: 9,//设置多余的列数 列数减一 默认为1 
			//max_size_x: 6,//设置每个widget x的size 默认为 6
			//max_size_y: 6,//设置每个widget y的size 默认为 6
			//autogenerate_stylesheet: true,//自动生成widget的样式 默认为true
				avoid_overlapped_widgets: false,//不让你从数据库或是其他途径 生成的 widget 互相覆盖 默认为true
			//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]}
				//alert($w+"---"+wgd);
				//return { col: wgd.col, row: wgd.row }
			//},
			
			/*draggable.start: function(event, ui){},
			draggable.drag: function(event, ui){},
			draggable.stop: function(event, ui){},
			collision.on_overlap_start: function(collider_data) { },
			collision.on_overlap: function(collider_data) { },
			collision.on_overlap_stop: function(collider_data) { },*/
			widget_margins: [10, 10],//设置每个 widget margin 前一个参数是y 后面是x
			widget_base_dimensions: [140, 140],//设置 widget width height 
			draggable:{
				 start: function(event, ui){
					//alert("statr");
					console.log("start");
				 },
				 drag:function(event, ui){
					console.log("drag");
				 },
				 stop: function(event, ui){
					 console.log("stop");
				 }
			},
			collision:{
				on_overlap_start: function(collider_data) { 
				//	alert(collider_data);
				console.log("on_overlap_start");},
				on_overlap:function(collider_data) {console.log("on_overlap"); },
				on_overlap_stop:function(collider_data) { console.log("on_overlap_stop");}
			}
		});

	
	});
	function test(){
		 var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul 
		 alert("row:"+gridster.rows+"--cols"+gridster.cols);
		 // alert(gridster);
		  gridster.add_widget('<li class="new">The HTML of the widget...</li>', 2, 1);//添加一个widget
		 // gridster.remove_widget( $('.gridster li').eq(3) );//删除某个
	      var json = gridster.serialize();//得到 所有的 widget
			alert(json);
			gridster.disable( );
	}
	function test1(){
		var gridster = $(".gridster ul").gridster().data('gridster');//只能通过 样式得到ul 
		var g = gridster.serialize($(".s1"));
		alert(g);
		for(var v in g){
			//alert(v);
		}
	}
  </script>
 <body>
<article>
		<h1>Demo </h1>
		
		<section>

		<div class="gridster">
			[list]
				<li id="sss" class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
					<div>
						open source
					</div>
				</li>
				<li class="s1" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
					
				</li>
				<li class="s1" data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>

				<li class="s2" data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
				<li class="s4" data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>

				<li class="s1" data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
				<li class="s2" data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
				<li class="s1" data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>

				<li class="s1" data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
				<li class="s1" data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>

				<li class="s1" data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
				<li class="s3" data-row="2" data-col="6" data-sizex="1" data-sizey="2"></li>
				<div style="position:absolute;top:150px;background:black;width:1000px;height:200px;">
		
						11
			    <div>
			[/list]
			

		</div>
		
		</section>
		
	</article>
	<input type='button' value='test' onclick='test()'/>
		<input type='button' value='test1' onclick='test1()'/>
 </body>
</html>

demo.zip (196.6 KB)
下载次数: 231

0
顶

0
踩

分享到：