This is the first of number of posts to come on getting started with jQuery with no previous knowledge of the framework. Over the course, various jQuery Plug-Ins will be used and discussed along with gradual integration with traditional ASP.Net 2.0 web applications components (i.e. Master Pages, User Controls, and ASP.Net AJAX).
Combining this research with my company's request, I began to notice that some of the sites that I frequent use jQuery. The things that appeals the most to me about jQuery was it's small foot print, the number of community based plug-ins that have been created, and the amount of examples and documentation on the web site to get a person up and running in no time. If you spend a little time on the site, you'll begin noticing items like "jQuery for Designers" which makes me think that it should be pretty simple overall. Granted some of the best designers can cut some of the best code, but not too many from my experience. Regardlesss, this seemed like a perfect choice; however, this was partly for work so I needed to dig deeper and do a test run.
For any initial UI research, I tend to try to keep things simple. For such this time, I used Expression Web instead of Visual Studio 2005 or 2008. In order to begin using jQuery for this example, I downloaded the following items:
- jQuery v1.2.6 minimized - link
- jQuery v1.2.6 Uncompressed - link
- Center Element Plug-in (trying to keep CSS compliant) - link
- Rounded Corners Plug-in (for aesthetics) - link
So, I wanted a simple UI with a Header, Navigation, Body, and 3 Footer Columns. Below is the HTML:
And now for a little bit of CSS styling...
Now that that's done. The page renders something similar to the image below.
Nothing too glamorous. The column/adjacent <div> tags at the bottom wrap to a second line but overall everything is as it should be.
Now it's time to apply some of the UI elements of the jQuery framework. First, let's go ahead and center the container tag. I'm not a fan of the <center> tag so having a jQuery Plug-In to write handle the screen width and centering dynamically takes a lot of time off a task is pretty common.
There's a number of things going on here but first, a quick jQuery syntax 101 lesson.
Line 1 sets a new function to be called when the document is ready. Inside that function, we are selecting the tag with the ID of "container". Once we have the jQuery object for the container element, we are calling the center() function. The center() function is an extension to the jQuery object that is provided by the Center jQuery Plug-in. Line 3 is telling the center function to only center the container element horizontally.
Below is the now-centered UI.
The last thing for this initial (and longer) entry will be to implement the rounded corners. I'm not much of a graphics guy (though am learning Expressions Design) so having a simple and effective way to create cross browser compatible corners on the fly is appealing. This really shows where jQuery's $ function is powerful.
We have only added lines 7 and 8. We are first selecting all elements associated with the CSS classes rounded and columns. Next we are calling the corners() function that also extends the jQuery object returned by the $ function. This function will generate the rounded corners for us based on the parameters we pass it. On Line 7, we are passing "20px" to say that we want the vertical and horizontal radii to be 20px each. Line 8 does the same thing; however, we have signified we only want the top two corners to be rounded.
Below is the rounded UI.
The next post on the series will a small bug that I discovered while playing around with this and how I managed to fix it. Afterwards we'll be looking at a simple post of showing and hiding the header (just for kicks).