jQuery响应式可拖拽的元素组件网格布局插件gridstack.js

共23个文件

html：6个

js：5个

css：3个

源码

需积分: 45 166 浏览量 2019-09-15 18:50:53 上传评论收藏 117KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery响应式可拖拽的元素组件网格布局插件_.zip （23个子文件）

201505171448

css

default.css 6KB

2.jpg 19KB

1.jpg 23KB

serialization.html 6KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 5KB

knockout-min.js 53KB

lodash.min.js 48KB

dist

gridstack.css 8KB

gridstack.min.map 19KB

gridstack.min.js 16KB

gridstack.min.css 7KB

gridstack.js 30KB

src

gridstack.scss 5KB

gridstack.js 30KB

knockout.html 6KB

nested.html 5KB

knockout2.html 6KB

jQuery之家.url 268B

readme.html 865B

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery响应式可拖拽的元素组件网格布局插件|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title> <link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="dist/gridstack.css"/> <link rel="stylesheet" type="text/css" href="css/default.css"> <style type="text/css"> .grid-stack { background: lightgoldenrodyellow; } .grid-stack-item-content { color: #2c3e50; text-align: center; background-color: #18bc9c; } </style>  </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>jQuery响应式可拖拽的元素组件网格布局插件 <span>A jQuery plugin for widget layout</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201505171847.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> <div class="htmleaf-demo center"> <a href="index.html">float</a> <a href="knockout.html" class="current">knockout</a> <a href="knockout2.html">knockout2</a> <a href="nested.html">nested</a> <a href="serialization.html">serialization</a> </div> </header> <div class="htmleaf-content bgcolor-3"> <div class="container-fluid"> <h1>knockout.js Demo</h1> <div> <button data-bind="click: add_new_widget">Add new widget</button> </div> <br> <div data-bind="component: {name: 'dashboard-grid', params: $data}"></div> </div> </div> <div class="related"> <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3> <a href="http://www.htmleaf.com/jQuery/Layout-Interface/201504171694.html"> <img src="related/1.jpg" width="300" alt="支持移动触摸设备的纯js元素拖放插件"/> <h3>支持移动触摸设备的纯js元素拖放插件</h3> </a> <a href="http://www.htmleaf.com/jQuery/Layout-Interface/201504101653.html"> <img src="related/2.jpg" width="300" alt="支持元素惯性拖放和多点触摸手势的js插件"/> <h3>支持元素惯性拖放和多点触摸手势的js插件</h3> </a> </div> </div> <script src="http://libs.useso.com/js/jquery/1.11.0/jquery.min.js" type="text/javascript"></script> <script src="http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="js/lodash.min.js"></script> <script src="js/knockout-min.js"></script> <script src="dist/gridstack.js"></script> <script type="text/javascript"> ko.components.register('dashboard-grid', { viewModel: { createViewModel: function (controller, componentInfo) { var ViewModel = function (controller, componentInfo) { var grid = null; this.widgets = controller.widgets; this.afterAddWidget = function (items) { if (grid == null) { grid = $(componentInfo.element).find('.grid-stack').gridstack({ auto: false }).data('gridstack'); } var item = _.find(items, function (i) { return i.nodeType == 1 }); grid.add_widget(item); ko.utils.domNodeDisposal.addDisposeCallback(item, function () { grid.remove_widget(item); }); }; }; return new ViewModel(controller, componentInfo); } }, template: [ '<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">', ' <div class="grid-stack-item" data-bind="attr: {\'data-gs-x\': $data.x, \'data-gs-y\': $data.y, \'data-gs-width\': $data.width, \'data-gs-height\': $data.height, \'data-gs-auto-position\': $data.auto_position}">', ' <div class="grid-stack-item-content"><button data-bind="click: $root.delete_widget">Delete me</button></div>', ' </div>', '</div> ' ].join('') }); $(function () { var Controller = function (widgets) { var self = this; this.widgets = ko.observableArray(widgets); this.add_new_widget = function () { this.widgets.push({ x: 0, y: 0, width: Math.floor(1 + 3 * Math.random()), height: Math.floor(1 + 3 * Math.random()), auto_position: true }); }; this.delete_widget = function (item) { self.widgets.remove(item); }; }; var widgets = [ {x: 0, y: 0, width: 2, height: 2}, {x: 2, y: 0, width: 4, height: 2}, {x: 6, y: 0, width: 2, height: 4}, {x: 1, y: 2, width: 4, height: 2} ]; var controller = new Controller(widgets); ko.applyBindings(controller); }); </script> </body> </html>

评论收藏

内容反馈