山东十一选五助手下载:jQuery多列網格式拖動布局插件Gridster.js

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

 9537  119  查看評論 (1)
分享到微信朋友圈
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]
   });
});
相關插件-布局,拖和放

24 News響應式html5模板

24 News一個響應式html5模板,適用于新聞,科技,動態網站/博客。您可以自定義它以適應任何其他業務。
  布局
 3728  41

jQuery非對稱瀑布插件Flex

jQuery非對稱瀑布流動畫網格插件Flex
  布局
 19376  197

不錯的保安類網站模板

不錯的bootstrap自適應網站模板
  布局
 22393  250

Bootstrap首頁分布效果

Bootstrap框架下的首頁demo,動畫效果豐富
  布局
 29938  483

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

    瓊嗣嗣 0
    2019/8/14 14:33:42
    這個狀態保存如何做? 回復
取消回復