Fun with jQueryUI
I recently took advantage of the jQuery plugin, jQuery UI for the first time. It’s actually pretty simple to use when you get right down to it but I had a couple false starts. I figured I’d document my first success with it in the hopes of saving anyone else trouble with it.
To keep things simple and to allow for more flexibility later I downloaded the whole package but you can customize your package by only downloading specific modules from their download page. If you have a specific use in mind you can easily grab a particular component or if like me you’re just getting started on a new and growing site you can grab the whole package.
When you download the components you want they’ll actually come with fairly coherent and complete docs and examples so I’ll keep my explanation short and sweet. Once you get one module working it’s a small step to get more working or to modify them. I started with the datepicker because that was the first thing I needed.
To begin I downloaded the whole jQuery UI. Once I had everything I grabbed the javascript files from the js directory and the css files from the css directory and moved them to directories of the same name in the top level directory on my server. From there it was just a matter of including the necessary files (jQuery among them of course) and creating an element in a form on my page to act as the date picker. This element needs to be a text input field in a form.
<head>
<script type=”text/javascript” src=”js/jquery-1.7.1.js”></script>
<link type=”text/css” href=”css/dot-luv/jquery-ui-1.8.17.custom.css” rel=”stylesheet” />
<script type=”text/javascript” src=”js/jquery-1.7.1.min.js”></script>
<script type=”text/javascript” src=”js/jquery-ui-1.8.17.custom.min.js”></script></head>
<html>
p style=”padding-left: 30px;”><form><p class=”form_label”>Event Date:</p>
<input type=”text” id=”datepicker” /><br/><br/></form>
