[jQuery] jQuery Zen Garden Interface

[jQuery] jQuery Zen Garden Interface

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns:m="http://schemas.microsoft.com/office/2004/12/omml" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=us-ascii">
<meta name=Generator content="Microsoft Word 12 (filtered medium)">
<style>
<!--
/* Font Definitions */
@font-face
{font-family:"Cambria Math";
panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
{font-family:Calibri;
panose-1:2 15 5 2 2 2 4 3 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
a:link, span.MsoHyperlink
{mso-style-priority:99;
color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{mso-style-priority:99;
color:purple;
text-decoration:underline;}
span.EmailStyle17
{mso-style-type:personal-compose;
font-family:"Calibri","sans-serif";
color:windowtext;}
.MsoChpDefault
{mso-style-type:export-only;}
@page Section1
{size:8.5in 11.0in;
margin:1.0in 1.0in 1.0in 1.0in;}
div.Section1
{page:Section1;}
-->
</style>
<!--[if gte mso 9]><xml>
<o:shapedefaults v:ext="edit" spidmax="1026" />
</xml><![endif]--><!--[if gte mso 9]><xml>
<o:shapelayout v:ext="edit">
<o:idmap v:ext="edit" data="1" />
</o:shapelayout></xml><![endif]-->
</head>
<body lang=EN-US link=blue vlink=purple>
<div class=Section1>
<p class=MsoNormal><a
href="http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html">http://www.whatbird.com/wwwroot/Components/Complete_Search_Tab.html</a><o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>I called this Zen Garden because I was thinking it would be
cool if there was a number of jQuery examples that demonstrated how to use the
various incredible plugins that are available.<o:p></o:p>
<table class=MsoNormalTable border=0 cellpadding=0 width="100%"
style='width:100.0%'>
<tr>
<td colspan=2 style='padding:1.5pt 1.5pt 1.5pt 1.5pt'></td>
</tr>
<tr>
<td colspan=2 style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>This
interface is an example of what a novice non programmer can do using jQuery
and a number of its best plugins. The project was an inspiration to me
because of how much I could accomplish with so little code. I had to become
familiar with a large number of topics that are very technical, but I had a
lot of hand hold and help from the community. I plan to say a lot more about
what is in this page, as I believe it captures many of the best things about
jQuery. Its going to grow a lot too.

PS I am sure my coding and structure could be vastly improved upon. So please
don’t laugh too hard when you look close.<o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><b><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Plugin</span></b><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><b><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Description
and comments</span></b><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
</tr>
<tr>
<td width="22%" style='width:22.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Accordion
(Resig/Dan)<o:p></o:p></span>
</td>
<td width="78%" style='width:78.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Easing<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Checkboxes<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Tabs<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>This
was the hardest of all the plugins to get working.<o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Match
List<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Click
on Acadian Flycatcher in the left panel of bids. It will open the overview or
mini species page<o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Mini
species page<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Contains
a summary of the bird. Green button takes you to the main species page.<o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Sort
Mode<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Click
on Icon checkbox. Note how two buttons are disabled below it. Notice the nice
visual fade effects and the way the cursor spins when the client has to wait
for the server to load a page. <o:p></o:p></span>
</td>
</tr>
<tr>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Attribute
Panel<o:p></o:p></span>
</td>
<td style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Click
on the Basic attributes menu then click on Shape, Location and Size<o:p></o:p></span>
</td>
</tr>
</table>
<p class=MsoNormal><o:p> </o:p>
</div>
</body>
</html>