[jQuery] Not Blowing My Own Horn jQuery Super GUI Example

[jQuery] Not Blowing My Own Horn jQuery Super GUI Example

<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;}
code
{mso-style-priority:99;
font-family:"Courier New";}
p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph
{mso-style-priority:34;
margin-top:0in;
margin-right:0in;
margin-bottom:0in;
margin-left:.5in;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri","sans-serif";}
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>Its all jQuery plugins. The Home tab gives the names and
credits, and its not done yet. I think this is the best example of using jQuery
in an interface, though I am sure a more experience programmer could do a
better job. I think we would start a contest to see who can use the most number
of jQuery plugins in a useful interface. I would be willing to pay for a prize.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>Please do not look at this in IE7. Just FF. For some reason
IE is barfing on the species pages, something about the way I am loading the
HTML no doubt.<o:p></o:p>
<p class=MsoNormal><o:p> </o:p>
<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>
<table class=MsoNormalTable border=0 cellpadding=0 width="100%"
style='width:100.0%'>
<tr>
<td colspan=4 valign=top 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 were 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 valign=top 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"'>jQuery
Plugin</span></b><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
<td valign=top 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"'>Author</span></b><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
<td valign=top 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"'>Mitchies*</span></b><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
<td valign=top 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 style='height:28.5pt'>
<td width="11%" valign=top style='width:11.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt;
height:28.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>accordion<o:p></o:p></span>
</td>
<td width="16%" valign=top style='width:16.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt;
height:28.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Dan
Resig (Dan Switzer's adaption)<o:p></o:p></span>
</td>
<td width="7%" valign=top style='width:7.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt;
height:28.5pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>4<o:p></o:p></span>
</td>
<td width="66%" valign=top style='width:66.0%;padding:1.5pt 1.5pt 1.5pt 1.5pt;
height:28.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Has
a few rough edges but this design is far superior to the one that shows up
the most on Google search. </span><span style='font-size:10.0pt;font-family:
"Courier New"'>http://www.pengoworks.com/workshop/jquery/resig_accordion.htm</span><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'><o:p></o:p></span>
</td>
</tr>
<tr>
<td valign=top 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 valign=top 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 valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>5<o:p></o:p></span>
</td>
<td valign=top 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 valign=top 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 valign=top 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 valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>5<o:p></o:p></span>
</td>
<td valign=top 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 style='height:14.25pt'>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt;height:14.25pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>tabs<o:p></o:p></span>
</td>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt;height:14.25pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'> <o:p></o:p></span>
</td>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt;height:14.25pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>4<o:p></o:p></span>
</td>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt;height:14.25pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>The
tab plugin is the best one out there, its light weight and very flexible.<o:p></o:p></span>
</td>
</tr>
<tr>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>cycle<o:p></o:p></span>
</td>
<td valign=top 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 valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>5<o:p></o:p></span>
</td>
<td valign=top 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 American Avocet in the left panel of bids. It will open the overview or
mini species page. The cycle plugin rotates through the variations of the
bird (juvenile, winter, etc)<o:p></o:p></span>
</td>
</tr>
<tr>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>jTip<o:p></o:p></span>
</td>
<td valign=top 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 valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:9.0pt;font-family:"Arial","sans-serif"'>3<o:p></o:p></span>
</td>
<td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>
<p class=MsoNormal><span style='font-size:9.0pt;font-family:"Arial","sans-serif"'>Pass
your cursor over the American Dipper. The jTip tooltip will pop up.<o:p></o:p></span>
</td>
</tr>
</table>
<p class=MsoNormal><o:p> </o:p>
<p class=MsoNormal>* my own rating system<o:p></o:p>
</div>
</body>
</html>