免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 广信之家 > 免费资源 > 免费插件 > 文章正文

jQuery插件:超酷的多列网格式拖放插件gridster.js

时间:08-21 11:02 来源:gbin1.com 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  以往的文章中,我们分享了很多jQuery相关拖放插件,今天我们这里再推荐的一个超酷的jQuery拖放插件-gridster.js绝对会让你眼前一亮,和其它的插件不太一样的地方在于你处理

jQuery插件:超酷的多列网格式拖放插件gridster.js

在线演示   本地下载

以往的文章中,我们分享了很多jQuery相关拖放插件,今天我们这里再推荐的一个超酷的jQuery拖放插件-gridster.js绝对会让你眼前一亮,和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小,并且支持多列的网格布局,它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的html元素转换为网格组件。

主要特性

1.只依赖jQuery

2.支持元素的添加和删除

3.文档比较全

4.拥有测试用例,你可以查看你的浏览器的测试结果

5.比较适合开发益智游戏

如何使用

引入类库,包括jQuery和gridster.js:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.gridster.min.js"></script> 

然后导入gridstrer的css文件:

<link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">

HTML内容如下:

<div class="gridster">
   <ul>
    <li class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></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>
   </ul>
  </div>

注意gridster.js使用HTML5的data属性来定义相关的拖放元素属性,data-row为行号,data-col为列号,data-sizex为X轴元素宽度,datasizey为Y轴元素宽度。

最后调用插件js,代码如下:

$(".gridster ul").gridster({
 widget_margins: [10, 10],
 widget_base_dimensions: [140, 140]
});

完整代码:

<!DOCTYPE html>
<html>
<head>
 <title>gridster.js Demo by GBin1.com</title>
 <meta name="article" id="articlelink" content="/technology/jquerynews/20120815-jqueryplugin-dragndrop-gridster/" />
 <meta name="author" content="www.gbin1.com" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="js/jquery.gridster.min.js"></script>
 <script type="text/javascript" src="js/cufon-yui.js"></script>
 <script type="text/javascript" src="js/voxBOX_400.font.js"></script>
 <script>
 
  $(function(){ //DOM Ready
   Cufon.replace('a, h1').CSS.ready(function() {
   
    $(".gridster ul").gridster({
     widget_margins: [10, 10],
     widget_base_dimensions: [140, 140]
    });
   
   });

  });

 </script>
 <link rel="stylesheet" type="text/css" href="css/jquery.gridster.min.css">
 <style>
  body{
   font-family: Helvetica, arial, sans-serif;
   margin:150px auto;
   background: #303030;
   color: #fff;
   font-size: 12px;
   width:940px;
  }
  
  a{
   color: #808080;
  }
  
  h1{
   padding:10px;
   font-size: 38px;
  }
  
  ul{
   list-style:none;
  }
  
  li{
   background: #808080;
  }
  
  .s1{
   background: url('http://placehold.it/140x140');
  }
  
  .s2{
   background: url('http://placehold.it/300x140');
  }
  
  .s3{
   background: url('http://placehold.it/140x300');
  }
  
  .s4{
   background: url('http://placehold.it/300x300');
  }
  
 </style>

</head>
<body>
 
 <article>
  <h1>GridSter Demo By <a href="http://www.gbin1.com">GBin1.com</a></h1>
  
  <section>

  <div class="gridster">
   <ul>
    <li class="s1" data-row="1" data-col="1" data-sizex="1" data-sizey="1"></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>
   </ul>
  </div>

  </section>
  
 </article>
 
 
</body>
</html>

是不是非常简单。虽然有时候拖放会有些bug,不过整体效果还是很不错的。希望大家喜欢我们的文章,如果你有任何问题,请给我们留言!

来源:jQuery插件:超酷的多列网格式拖放插件gridster.js

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,jQuery插件:超酷的多列网格式拖放插件gridster.js对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与jQuery插件:超酷的多列网格式拖放插件gridster.js无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对广信之家有任何意见或建议,请到交流平台反馈。到留言板反馈