软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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