It also needs the "extension, "module", "widget" or "plugin". Call it what you want but an Accordion by any other name is still an accordion. I downloaded everything in one file, or you can download just what you need here.
When it's unzipped, you get a boatload of files. You'll just need the file,
"jquery-ui-1.8.6.custom.min.js"
Again, the numbers indicate the version.
What's with the "min" in the file name?
That compresses the file size to minimize the size for downloading, thus reducing load time. All it does is remove the extra spaces and new lines. Yes, that will reduce the size enough to make a difference. Think about that next time you create just HTML code.
In the old Internet days, I used to remove all extraneous spaces and new lines and that did make a significant difference in load time for the users.
The "development" copies have the new lines for readability and don't have the "min" in the file name. This allows the advanced programmers to modify the main code for their needs or to fix bugs.
So, if you're using files with similar names with and without the "min" or different versions, then remove the older version or uncompressed files from your html document. Do this one at a time and test test test.
In the html document <head>, I have this - IN PROPER ORDER with the core file first.
<script type="text/javascript" src="/jqueryui/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/jqueryui/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="/jqueryui/jquery-ui-1.8.6.custom.min.js"></script>
You'll see the jQuery UI has "ui" in the file name whereas the "core" file doesn't.
MINIMUM CODE for JQUERY
The minimum code for jQuery +/- UI is (1) The
Now, in the <head>, following the <script> links, you can insert the JQuery [UI] code for your page. Because it's really Javascript, you need to have the jQuery within the <script> tags.
I'm installing the Accordion so the simplest code is
<script type="text/javascript">
$(function() {
$("#myAccordion").accordion();
});
</script> $("#myAccordion").accordion();
});
SYNTAX or the "grammar" of the program.
The jQuery is within the $().
The second part is just like a Javascript function(). Yes, jQuery has functions that you program.
$(
function() {
[PUT YOUR JQUERY STUFF HERE]
}
);
Of course, you can have several function()'s within this.
It's best to keep good formatting so that you can count the open and end parentheses and braces. Sometimes, I have to count the open ones that should be the same number as the closed ones. Other times I copy the cope into a word processing doc and color the blocks of code different colors so that I have everything nested correctly.
THE HTML PART
Okay, now to create the html code that will function like an accordion. Here is what your document will need.
- An outer tag, usually a <div> tag to enclose ("wrap") the accordion.
- A tag that when clicked will tell jQuery to open/close (show/hide) the content. This is defaulted to <a href="#"> tag. The navigation within your outer div tag will be disabled (there are ways to enable navigation but let's deal with that later). This tag will always show.
- Consistent layout of the elements, usually <li> tags to define the pieces to hide and show. What's between the <li> and </li> will show/hide.
<ol class="blue" id="myAccordion">
<li id="fold1" class="section">
<h2>My Content 1</h2>
</li>
<li id="fold1" class="section">
<h2>My Content 1</h2>
</li>
<li id="fold2" class="section">
<h2>My Content 2</h2>
</li>
<h2>My Content 2</h2>
</li>
</ul>
That's it.
Now, look back at the jQuery function():
$("#myAccordion").accordion();
The "selector" is "myAccordion" which is defined as the "id" for the <ol> tag.
If you want 2 different accordions, just add another line to the jQuery within parentheses of $()
$("#myAccordionTwo").accordion();
AND don't forget to include another set of html tags with the outer element ("wrapper") with
id="myAccordionTwo"
Some of my content for each <li> tag is large and I'm trying to figure out if that causes a jerky accordion movement. I changed the <!DOCTYPE that seemed to help, but it's still jerky. I think it may be the CSS that I'm using from the original web page that I'm modifying. If I remove the CSS altogether, it's a smooth open/close. Maybe I should just start from scratch and not modify that page.
No comments:
Post a Comment