[jQuery] My First Plugin - Custom Select Box

[jQuery] My First Plugin - Custom Select Box

<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:st1="urn:schemas-microsoft-com:office:smarttags" xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<meta name=Generator content="Microsoft Word 11 (filtered medium)">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]--><o:SmartTagType
namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="PersonName"/>
<!--[if !mso]>
<style>
st1\:*{behavior:url(#default#ieooui) }
</style>
<![endif]-->
<style>
<!--
/* Font Definitions */
@font-face
{font-family:Tahoma;
panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
{font-family:Verdana;
panose-1:2 11 6 4 3 5 4 4 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:12.0pt;
font-family:"Times New Roman";}
a:link, span.MsoHyperlink
{color:blue;
text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
{color:blue;
text-decoration:underline;}
span.EstiloCorreo18
{mso-style-type:personal-reply;
font-family:Verdana;
color:windowtext;
font-weight:normal;
font-style:normal;
text-decoration:none none;}
@page Section1
{size:595.3pt 841.9pt;
margin:70.85pt 3.0cm 70.85pt 3.0cm;}
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=ES link=blue vlink=blue>
<div class=Section1>
<p class=MsoNormal><font size=2 face=Verdana><span lang=EN-GB style='font-size:
10.0pt;font-family:Verdana'>I agree, it’d be perfect if it was based in select
elements themselves. This way you could use it combined with other plugins to
manipulate the option list.<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Verdana><span lang=EN-GB style='font-size:
10.0pt;font-family:Verdana'><o:p> </o:p></span></font>
<p class=MsoNormal><font size=2 face=Verdana><span lang=EN-GB style='font-size:
10.0pt;font-family:Verdana'>Jip<o:p></o:p></span></font>
<p class=MsoNormal><font size=2 face=Verdana><span lang=EN-GB style='font-size:
10.0pt;font-family:Verdana'><o:p> </o:p></span></font>
<div>
<div class=MsoNormal align=center style='text-align:center'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>
<hr size=2 width="100%" align=center tabindex=-1>
</span></font></div>
<p class=MsoNormal><b><font size=2 face=Tahoma><span style='font-size:10.0pt;
font-family:Tahoma;font-weight:bold'>De:</span></font></b><font size=2
face=Tahoma><span style='font-size:10.0pt;font-family:Tahoma'>
discuss-bounces@jquery.com [mailto:discuss-bounces@jquery.com] <b><span
style='font-weight:bold'>En nombre de </span></b>Yehuda Katz
<b><span style='font-weight:bold'>Enviado el:</span></b> viernes, 29 de
diciembre de 2006 6:31
<b><span style='font-weight:bold'>Para:</span></b> <st1:PersonName w:st="on">jQuery
Discussion.</st1:PersonName>
<b><span style='font-weight:bold'>Asunto:</span></b> Re: [jQuery] My First
Plugin - Custom Select Box</span></font><o:p></o:p>
</div>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'><o:p> </o:p></span></font>
<p class=MsoNormal style='margin-bottom:12.0pt'><font size=3
face="Times New Roman"><span style='font-size:12.0pt'>Ah,
My ideal situation would be to have a select box that gets converted via JS for
graceful degradation.
-- Yehuda<o:p></o:p></span></font>
<div>
<p class=MsoNormal><span class=gmailquote><font size=3 face="Times New Roman"><span
style='font-size:12.0pt'>On 12/29/06, <b><span style='font-weight:bold'>blemming</span></b>
< <a href="mailto:david@brilliantlemming.com">david@brilliantlemming.com</a>>
wrote:</span></font></span><o:p></o:p>
<p class=MsoNormal><font size=3 face="Times New Roman"><span style='font-size:
12.0pt'>
* Be stylable in terms of borders and padding (based on the styles on the
select box itself)
There is no select box present in my plugin. If you notice it is based on a
grouping of nested divs and the padding and borders can be controled via css
* Delegate events on the custom select to the actual select (to allow for
$("select").click( // ))
Since there is no select box present I'm not sure how to delegate the events
to $("select") but I would love to know how to do it
* Position as you would expect a normal select box to position (minus weird
off-pixel problems)
it does
* Be able to float
Yep, the container div can be styled to float.
wycats wrote:
>
> My ideal custom select would:
>  * Be stylable in terms of borders and padding (based on the styles
on the
> select box itself)
>  * Delegate events on the custom select to the actual select (to
allow for
> $("select").click( // ))
>  * Position as you would expect a normal select box to position
(minus
> weird
> off-pixel problems)
>  * Be able to float
>
> In other words, I would want the existence of the custom select to be
> basically invisible from an implementer. How well does your custom select
> do
> this?
>
> -- Yehuda
>
> On 12/28/06, blemming <<a href="mailto:david@brilliantlemming.com">david@brilliantlemming.com
</a>>