<!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>基于Bootstrap的可拖拽式网格系统插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism.css" />
<link rel="stylesheet" href="./indexstyle.css">
<link rel="stylesheet" href="./jquery.gridstrap.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>基于Bootstrap的可拖拽式网格系统插件 <span>Draggable Bootstrap Grid Layouts With Gridstrap.js</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/201911295852.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<section class="main-content">
<p><a href="//github.com/rosspi/gridstrap.js" target="_blank">gridstrap.js</a> is a jQuery plugin designed to take Bootstrap's responsive <a href="//getbootstrap.com/css/#grid" target="_blank">grid</a> system and turn it into a managed draggable and resizeable grid while truely maintaining its responsive behaviour. It will also work with any kind of CSS-driven layout.</p>
<p>I made this plugin to fill a gap that existed for easily creating Bootstrap-based drag 'n' drop grid interfaces.</p>
<p>Both gridster.js and gridstack.js inspired this plugin.</p>
<h1 id="header-1"><a href="#header-1"></a>Demo</h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#basic-demo" aria-controls="basic-demo" role="tab" data-toggle="tab">Basic</a>
</li>
<li role="presentation">
<a href="#responsive-demo" aria-controls="responsive-demo" role="tab" data-toggle="tab">Responsive</a>
</li>
<li role="presentation">
<a href="#nested-demo" aria-controls="nested-demo" role="tab" data-toggle="tab">Nested</a>
</li>
<li role="presentation">
<a href="#resize-demo" aria-controls="resize-demo" role="tab" data-toggle="tab">Resize</a>
</li>
<li role="presentation">
<a href="#noncontiguous-demo" aria-controls="noncontiguous-demo" role="tab" data-toggle="tab">Non-contiguous</a>
</li>
<li role="presentation">
<a href="#dual-demo" aria-controls="dual-demo" role="tab" data-toggle="tab">Dual</a>
</li>
<li role="presentation">
<a href="#custom-demo" aria-controls="custom-demo" role="tab" data-toggle="tab">Custom</a>
</li>
<li role="presentation">
<a href="#api-demo" aria-controls="api-demo" role="tab" data-toggle="tab">API</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="basic-demo">
<div id="basic-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="basic-grid" class="row">
<div class="col-xs-4 col-sm-2 col-md-1"></div>
<div class="col-xs-4 col-sm-2 col-md-1"></div>
...
</div>
<script>
$('#basic-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="responsive-demo">
<iframe style="width:500px;" id="ff" src="./responsive.html" >
</iframe>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><script>
// The above grid is within an iframe to demonstrate its responsive behaviour.
// It is otherwise the same as the basic demo.
$('#responsive-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="nested-demo">
<div id="nested-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="nested-grid" class="row">
<div class="col-xs-4 col-sm-2 col-md-1"></div>
<div class="col-xs-4 col-sm-2 col-md-1"></div>
<div class="col-xs-4 col-sm-2 col-md-1">
<div class="nested-inner-grid">
<div class="col-xs-4 col-sm-2 col-md-1"></div>
<div class="col-xs-4 col-sm-2 col-md-1"></div>
....
</div>
</div>
<div class="col-xs-4 col-sm-2 col-md-1"></div>
...
</div>
<script>
// Init outer grid first.
$('#nested-grid').gridstrap();
// Inner grid is identifiable via a class rather than an id.
// This is necessary because gridstrap creates a copy of all internal html elements
// and you cannot have two elements with the same id.
// By default the visible cells within the grid will have a 'gridstrap-cell-visible' class.
$('.gridstrap-cell-visible .nested-inner-grid').gridstrap();
</script></code></pre>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="resize-demo">
<div id="resize-grid">
</div>
<div class="row">
<div class="col-xs-12">
<pre><code class="language-javascript"><div id="resize-grid" class="row">
<div class="col-xs-2 cell"><div class="inner"><div class="resize"></div></div></div>
<div class="col-xs-2 cell"><div class="inner"><div class="resize"></div></div></div>
...
</div>
<script>
$('#resize-grid').gridstrap({
resizeHandleSelector: '.resize'
});
// The above is all you need to do to enable resizing.
// However, the below shows how we can maintain Bootstrap's
// grid functionality.
var gs = $('#resize-grid').data('gridstrap');
$('#resize-grid').on('cellresize', function (e) {
e.preventDefault();
var index = gs.getCellIndexOfElement(e.target);
gs.modifyCell(index, function ($getVisibleCell, $getHiddenCell) {
var $hiddenCell = $getHiddenCell();
// Remove Bootstrap's column classes, then add ones appropriate
// to the cell's outer width.
for (var i = 1; i <= 12; i++) {
$hiddenCell.removeClass('col-xs-' + i);
}
$hiddenCell.addClass('col-xs-1');
var oneWidth = $hiddenCell.outerWidth();
for (var i = 2; i <= 12; i++) {
if ($hiddenCell.outerWidth() + oneWidth / 2 <= e.width) {
$hiddenCell.removeClass('col-xs-' + (i - 1));
$hiddenCell.addClass('col-xs-' + i);
} else {
$hiddenCell.removeClass('col-xs-' + i);
书架-Nested.zip （50个子文件） 
书架-Nested css 
htmleaf-demo.css 6KB normalize.css 2KB indexstyle.css 18KB related 
2.jpg 24KB 1.jpg 20KB
responsive.html 2KB ul.html 5KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB jquery.gridstrap.js 57KB index.html 13KB divjs drag.js 5KB div.html 1KB jquery-1.10.2.js 94B main.js 47B style.css 368B 平面 css context.standalone.css 5KB image 1楼.jpg 111KB
demo_picture.png 48KB pm.html 13KB js jquery.min.js 91KB context.js 3KB drag.js 906B layer.ext.js 5KB layer.js 15KB dist jquery.gridstrap.min.js.map 32KB jquery.gridstrap.min.js 26KB jquery.gridstrap.js 57KB jquery.gridstrap.min.css 645B jquery.gridstrap.css 730B src utils.js 4KB internal.js 20KB handlers.js 6KB setup.js 2KB gridstrap.js 4KB methods.js 10KB constants.js 973B style.css 470B uljs jquery.min.js 341B jquery.dragsort-0.5.2.min.js 17KB index - 副本.html 1KB indexscript.js 1KB responsiveLocal.html 2KB jQuery之家.url 268B index.1.html 8KB readme.html 865B jquery.gridstrap.css 730B indexLocal.html 12KB资源评论
何欣颜
- 粉丝: 76
- 资源: 4730
最新资源
- MPU6050 DMP移植文件
- allure2.14.0的安装包
- ur3step ur10step
- 基于ESN的数据多变量时序预测 Matlab代码
- 软件开发C++重要培训资料分享13软件开发C++开发技术资料.zip
- 亲测试有效的25个经典springboot vue项目源码+LW无门槛下载，适合毕业设计
- FPGA搭建nvme读写硬盘系统 cpu通过pcie模块操作硬盘读写 图片是sdk下面枚举到硬盘过程中的打印 FPGA用的
- 重要性抽样：蒙特卡洛模拟中的效率提升利器
- PADS Router教程演示文件-原理图-PCB练习源文件-成品PCB源文件
- 在C++项目中集成代码文档工具：提升开发效率与代码质
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
