Get started with jquery.gridster CDN
MIT licensed
JQuery Gridster: Dynamic grid layout library for arranging UI elements with jQuery.
Tags:- grids
- ui
- templating
- jquery
Stable version
Copied!
How to start using jquery.gridster CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridster/0.5.2/css/gridster.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.cdnhub.io/jquery.gridster/0.5.6/jquery.gridster.min.js"></script>
<link rel="stylesheet" href="styles.css" />
<style>
#grid.gridster-item {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin: 1px;
padding: 10px;
text-align: center;
line-height: 140px;
font-size: 16px;
}
</style>
</head>
<body>
<div id="grid" style="width: 100%; height: 500px;"></div>
<script>
$(function() {
$('#grid').gridster({
widget_base_dimensions: [200, 200],
widget_margin: [1, 1],
autosize: true,
min_cols: 1,
max_cols: 5,
max_rows: 5,
draggable: {
enable: true
},
resizable: {
enable: false
},
swappable: false,
static_classes: ['no-move']
}).on('gridster.resizestop', function(event, ui) {
ui.item.data('size', ui.item.outerSize());
});
$('#grid').append('<div id="new-widget" class="gridster-item" style="background-color: #f1c40f;">New Widget</div>');
$('#grid').find('#new-widget').data('size', [200, 200]).gridsterItem();
$('#grid').append('<div id="new-widget2" class="gridster-item" style="background-color: #3498db;">New Widget 2</div>');
$('#grid').find('#new-widget2').data('size', [100, 100]).gridsterItem();
});
</script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!