Preparing your website to use Gridster

Exclusive offer: get 50% off this eBook here
Instant jQuery Drag-and-Drop Grids How-to [Instant]

Instant jQuery Drag-and-Drop Grids How-to [Instant] — Save 50%

A practical, hands-on guide to building drag-and-drop layouts using Gridster, jQuery, and CSS with this book and ebook

$12.99    $6.50
by Marcos Placona | May 2013 | Open Source

This article by Marcos Placona, from the book Instant_jQuery Drag and Drop Grids How-to, will describe all the necessary steps to get Gridster up and running on your website, as well as demonstrate how to include any of the dependencies needed by the library.

(For more resources related to this topic, see here.)

Getting ready

There are only two things needed to get Gridster installed on your source code. You first need to download jQuery if you don't already have it, and then download the latest version of Gridster. After that, you will use plain HTML code to include both libraries in your webpage.

For most casual users, adding the latest version of jQuery will suffice. There are also nightly builds available, but these won't be discussed here as they are not necessary, and the latest version should be able to do everything we need.

How to do it...

  1. Start by visiting jQuery's website, http://jquery.com/download/, and download the library to a location you will remember. We won't be debugging our jQuery code in the examples given in this book, so downloading the production version will be fine.

  2. We should now head over to Gridster's website, http://gridster.net/#download/, and download the minified versions of both the gridster.js and gridster.css files. These are the files we will use throughout this entire book, so make sure they are kept safe and accessible. A suggestion would be to create a directory structure to make it easier to refer to the files. I will be using the following structure for the examples given here:

  3. Under the directory recipe1, create a new text file called index.html. This file should initially contain the following code:

    <!DOCTYPE html>
    <html>
    <head>
    <script src = "../scripts/jquery-1.8.3.min.js"></script>
    <script src = "../scripts/jquery.gridster.min.js"></script>
    <link href = "../styles/jquery.gridster.min.css" rel="stylesheet" />
    <title>Recipe 1</title>
    </head>
    <body>
    Hello Gridster!
    </body>
    </html>

    You can download the example code files for all Packt books that you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub. com/support and register to have the files e-mailed directly to you.

  4. By double-clicking on this file, you should be presented with a screen that looks like the following screenshot:

  5. You can check that everything has loaded up correctly by pressing the F12 key on your browser (Chrome or Firefox), and checking that all files have been correctly loaded without errors, as shown in the following screenshot:

There's more...

Instead of downloading the files into your project, you can simply load them up via CDN-hosted copies of the files, as follows:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/
jquery.min.js">
</script>

In that case, the files wouldn't be coming from your website, but from jQuery's website itself. This is a good practice when trying to improve performance, as big web servers tend to host files on multiple locations and use very aggressive caching techniques to make sure the files are served quickly.

Gridster also offers files in the same way from their website as you will find in their download section. So, for example, you could link directly to their minified file as follows:

<script
src ="https://raw.github.com/ducksboard/gridster.js/master/dist/
jquery.gridster.min.js">
</script>

Summary

In this recipe we described all the necessary steps to get Gridster up and running on your website, and also demonstrated how to include any of the dependencies needed by the library.

Resources for Article :


Further resources on this subject:


Instant jQuery Drag-and-Drop Grids How-to [Instant] A practical, hands-on guide to building drag-and-drop layouts using Gridster, jQuery, and CSS with this book and ebook
Published: March 2013
eBook Price: $12.99
See more
Select your format and quantity:

About the Author :


Marcos Placona

Marcos Placona grew up in Sao Paulo, Brazil, and started tinkering with web development when 14.400 kbs modems were the coolest thing. He then started a Computer Science degree, but a better opportunity arose on the other side of the Atlantic. In his 20s, he decided to move to England where he worked as a ColdFusion developer and started blogging at http://www.placona.co.uk .

After acquiring a taste for mobile application development, he has now published over 20 applications for all the major mobile markets, and hopes he will someday see a kid on the train playing one of his games.

He is now working as a technical lead for HolstelBookers, he tries to stay on top of its ColdFusion and .Net teams, as well as designing solutions and working with the stakeholders to turn dreams into reality.

Books From Packt


jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Learning jQuery, Third Edition
Learning jQuery, Third Edition

jQuery UI 1.8: The User Interface Library for jQuery
jQuery UI 1.8: The User Interface Library for jQuery

jQuery Mobile First Look
jQuery Mobile First Look

jQuery Mobile Web Development Essentials
jQuery Mobile Web Development Essentials

jQuery Plugin Development Beginner's Guide
jQuery Plugin Development Beginner's Guide

jQuery Tools UI Library
jQuery Tools UI Library

jQuery UI Themes Beginner's Guide
jQuery UI Themes Beginner's Guide


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
k
K
v
r
5
2
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software