山东十一选五和值走势图带连线:jQuery多列網格式拖動布局插件Gridster.js

2019山东十一选五杀号 www.xvcvn.com 所屬分類:UI,輸入-布局,拖和放

 12971  163  查看評論 (4)
分享到微信朋友圈
X
jQuery多列網格式拖動布局插件Gridster.js ie兼容7

Gridster.js

主要特性

  • 只依賴 jQuery

  • 支持元素的添加和刪除

  • 文檔比較全

  • 擁有測試用例,你可以查看你的瀏覽器的測試結果

  • 比較適合開發益智游戲

如何使用

引入類庫,包括 jQuery 和 gridster.js

<script src="//www.xvcvn.com/jquery/jquery-1.10.2.js"></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>
   <ul>
       <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
       <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
       <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
       <li data-row="1" data-col="2" data-sizex="2" data-sizey="1"></li>
       <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"></li>
       <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
       <li data-row="2" data-col="4" data-sizex="2" data-sizey="1"></li>
       <li data-row="3" data-col="4" data-sizex="1" data-sizey="1"></li>
       <li data-row="1" data-col="5" data-sizex="1" data-sizey="1"></li>
       <li data-row="3" data-col="5" data-sizex="1" data-sizey="1"></li>
       <li data-row="1" data-col="6" data-sizex="1" data-sizey="1"></li>
       <li 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,代碼如下:

$(function() {
   $(".gridster ul").gridster({
       widget_margins: [10, 10],
       widget_base_dimensions: [140, 140]
   });
});
相關插件-布局,拖和放

jQuery響應式網頁模板

jQuery響應式網頁,外國網站常用的風格
  布局
 38202  269

Bootstrap響應式網站,模板

Bootstrap響應式網站模板,風格簡潔大氣。
  布局
 22933  318

兼容IE8的響應式網格瀑布流布局jQuery插件

Pinterest Grid是一款仿Pinterest網站的響應式網格瀑布流布局jQuery插件。該瀑布流插件使用簡單,可以隨父容器的大小自動調節網格布局,并且支持IE8+的IE瀏覽器。
  布局
 22823  271

5款不同的多級導航切換DIV的jQuery特效

5款不同的多級導航切換的jQuery特效,適用于APP前端特效,點擊二級菜單會切換出三級菜單來替換二級菜單。再次點擊又會切換回二級菜單,每款都有很炫酷的特效?;隊蠹蟻略匱芯墾芯看頌匭?。
  布局
 33116  251

討論這個項目(4)回答他人問題或分享插件使用方法獎勵jQ幣 評論用戶自律公約

    maozhen 0
    2019/12/18 16:51:22
    請問如何限制最大行數 回復
    暖? 0
    2019/10/30 15:21:10
    元素的添加和刪除是那個方法? 回復
    瓊嗣嗣 0
    2019/8/14 14:33:42
    這個狀態保存如何做?
        Eric"0
        2019/10/9 15:39:04
        放在緩存里
    回復
取消回復