How to use JQuery in Blimey
Original by Cameron Queener, subsequent edits by Mr. Hoglen, and significant
edit recommends by Lida F. and other 2 nd year Web Design students.
Prerequisite: Complete the Blimey tutorial here:
http://www.adobe.com/devnet/dreamweaver/articles/dw_fw_css_pt1.html
Difficulty: Medium to difficult.
Step 1: Setup
If you didn’t finish or your Blimey has bugs, download the completed Blimey files here.
In Blimey we were introduced to building a web page from a “composite”, adding Dreamweaver spry
widgets, and changing the CSS of the spry widgets to match our site’s design.
This tutorial assumes you have completed the Blimey tutorial. The purpose is to show you another way
of adding widgets to your site that work just as well (better). The new widgets are from JQuery which is
an open source JavaScript library of widgets and other web resources which are designed to make your
job as a web designer easier. JQuery also tends to be lighter and simpler in coding. It is also free (…more)
1. Go to the Jquery web site (…more). At
this site you will find the “Build Custom
Download” button at the top-right - click
it.
2. Leave all the boxes checked. Scan the
checked boxes to see what widgets are
available at JQuery. You may find items
not offered in Dreamweaver Spry
Widgets.
3. Find the subtitle “Theme”. Below it is a drop down menu. Click it and choose “Smoothness.”
This is one of the many themes offered at JQuery and closely matches our Blimey site. You can
see the various themes offered at JQuery here. This is the theme roller. You can make your own
or select the “Gallery” button to see available themes. Click a them on the left and the right side
of the page will take on that theme showing what several JQuery widgets will look like in that
theme.
4. Download the file to your Blimey folder and unzip it. This is where all your JS and CSS files will be
located. You will find the following folders and files in your unzipped folder:
a. css
i. smoothness\jquery-ui-1.8.11.custom.css (this is the color/design scheme we
chose in Step 3 above)
ii. smoothness\images (contains all images used by your custom css (images that
go with the smoothness scheme)
b. js
i. jquery-1.5.1.min.js: Basic JQuery which allow widgets to work on your site.
ii. jquery-ui-1.8.11.custom.min.js: The individual widget code.
c. development-bundle: These are files for developers of web content, not us.
i. demos\ a folder which contains demos for all the widgets you downloaded
ii. docs\ a folder of files describing options for each of the widgets
iii. themes
1. \base (the basic JQuery theme .css files and images
2. \smoothness (the theme we selected .css and images
iv. External\I don’t know what this is for.
5. Organize your Blimey and JQuery files
a. Make a copy of the index.html. Name
the copy index_jquery.html. This is
the file we will work with leaving our
original Blimey index.html alone.
b. Make a new folder “scripts”.
c. Copy the following files to this folder:
i. Both JQuery .js files
ii. The .css and related “images”
folder
Question 1: Some of the files end with .min.js. “min” is an abbreviation for “minified”. What is the
difference between a .min.js and a .js file? (hint: Google it!)
Step 2: Slash and Burn the Blimey Script
Open up your Blimey index in Dreamweaver and enjoy its beauty. Now let’s destroy it.
Add required head links:
Blimey: the blog of blogs
This is your Blimey head tag.
Blimey: the blog of blogs
@import url("jquery-ui-1.8.7.custom.css");
Make these changes.
Find spry widget script and replace with JQuery script:
The truth is this probably will not disrupt the display of your page in a browser but Dreamweaver will
give you errors noting the spry widgets referenced are no longer in your web page. This will happen
after you complete Step 3 later. You will replace this script in Step 3 with two JavaScript functions placed
in the head of your document.
Find and delete the script below. You may find it anywhere in your web page, not just the head. I found mine at
the bottom near the . I believe its placement is determined by the cursor position when you added the
Dreamweaver spry widgets. Its purpose was to call the accordion and tab spry widget JavaScript.
Add this code to the head of the document. It does the same thing for the JQuery accordion and tab JQuery script.
The big difference (other than how it looks) between spry widget and JQuery script is that JQuery has to be called
once. The spry widget needs to be called for each instance of accordion or tab (note the “Accordion1” and
TabbedPanels1” titles in the spry widget script.
$(function() {
$( "#accordion" ).accordion();
});
$(function() {
$( "#tabs" ).tabs();
});
Question 2: I know we changed the names of for the JavaScript and CSS files, but, what significant
change are we making here?
Answer: We have changed where the web page will look for the widget code. It will now look
for the JQuery rather than the Spry Widget code.
Question 3: What does each of the changes do?
Answer:
a. JQuery style sheet provides the theme for our widgets.
b. The first JS provides the basic code to make widgets work on our page
c. The second JS is for the JQuery UI which has all your widgets and other UI
Step 3: Call Me
Next we need to tell our page that we want to call the JQuery Accordion widget scripts (we will do tabs
in the next tute) to our page and make them useable. We need to remove the old method of calling the
script by deleting the highlighted script below.
Accordion Menu 1
When finished your code should look like the code below.
Accordion Menu 1
Sublink 1
Sublink 2
Sublink 3
Accordion Menu 2
Sublink 1
Sublink 2
Sublink 3
Accordion Menu 3
Sublink 1
Sublink 2
Sublink 3
Accordion DIVs removed – Note: Menu titles left intact. Also note extra s removed after last
Your accordion code should be nice and clean again. We can now add our new accordion call.
Accordion Menu 1 for headers content in a -->
Sublink 1
Sublink 2
Sublink 3
Accordion Menu 2
Sublink 1
Sublink 2
Sublink 3
Accordion Menu 3
Sublink 1
Sublink 2
Sublink 3
Completed code for our accordion.
Step 3: Review
Before we go any further let’s take a look back on what we did.
Our Code Before: Our New Code:
Accordion Menu 1
Accordion Menu 1
Sublink 1 Sublink 1
Sublink 2 Sublink 2
Sublink 3 Sublink 3
Accordion Menu 2
Accordion Menu 2
Sublink 1 Sublink 1
Sublink 2 Sublink 2
Sublink 3 Sublink 3
Accordion Menu 3 (names the tag)
Accordion Menu 3
Sublink 1 Sublink 1 (inside the
Sublink 2 accordion)
Sublink 3 Sublink 2
Sublink 3
They are the same length but the one on the right is much cleaner.
Save your file and check to see that it is working. If it’s not working make sure that all your (AccordionPanal) tags
are gone and all you and tags are finished and done correctly. If that still doesn’t fix it make sure your
code looks like the above-right.