Preparing your website to use Gridster

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

(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:


Books to Consider

comments powered by Disqus