Sha256: b70bdaa1f0acce23bd6da8bc16b2c660b92b3144f93b092f5e537de383e3d29f
Contents?: true
Size: 1.47 KB
Versions: 5
Compression:
Stored size: 1.47 KB
Contents
<!doctype html> <html> <head> <title>Demo » Add widgets dynamically » gridster.js</title> <link rel="stylesheet" type="text/css" href="assets/css/demo.css"> <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1>Add widgets dynamically</h1> <p>Create a grid adding widgets from an Array (not from HTML) using <code>add_widget</code> method. Widget position (col, row) not specified.</p> <div class="gridster"> <ul></ul> </div> <script type="text/javascript" id="code"> var gridster; $(function () { gridster = $(".gridster > ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [100, 55] }).data('gridster'); var widgets = [ ['<li>0</li>', 1, 2], ['<li>1</li>', 3, 2], ['<li>2</li>', 3, 2], ['<li>3</li>', 2, 1], ['<li>4</li>', 4, 1], ['<li>5</li>', 1, 2], ['<li>6</li>', 2, 1], ['<li>7</li>', 3, 2], ['<li>8</li>', 1, 1], ['<li>9</li>', 2, 2], ['<li>10</li>', 1, 3] ]; $.each(widgets, function (i, widget) { gridster.add_widget.apply(gridster, widget) }); }); </script> </body> </html>
Version data entries
5 entries across 5 versions & 1 rubygems