dojox.form.DropDownSelect¶
Status: | Draft |
---|---|
Version: | 1.2 |
Project owner: | Nathan Toone |
Available: | since V1.2 |
A styleable drop down select box (similar to html select element)
Introduction¶
HTML Select tags are problematic when it comes to styling - they are not very styleable, not to mention nearly impossible to get a consistent cross-browser widget. This widget aims to resolve that issue.
Usage¶
The DropDownSelect is designed to replace existing HTML select elements with minimal effort. You can also create them programmatically.
Examples¶
A simple DropDownSelect¶
This example shows a simple DropDownSelect widget - converted from a select tag.
<script> dojo.require("dojox.form.DropDownSelect"); </script>
<select name="select" dojoType="dojox.form.DropDownSelect"> <option value="TN">Tennessee</option> <option value="VA" selected="selected">Virginia</option> <option value="WA">Washington</option> <option value="FL">Florida</option> <option value="CA">California</option> </select>
<style type="text/css"> @import "/_static/dojo/dojox/form/resources/DropDownSelect.css"; </style>
A “styled” DropDownSelect¶
When styling the entries of a DropDownSelect, you must use div and span tags, instead of select and option tags - as IE will strip out any HTML within the option tags.
<script> dojo.require("dojox.form.DropDownSelect"); </script>
<div name="select" value="AK" dojoType="dojox.form.DropDownSelect"> <span value="AL"><b>Alabama</b></span> <span value="AK"><font color="red">A</font><font color="orange">l</font><font color="yellow">a</font><font color="green">s</font><font color="blue">k</font><font color="purple">a</font></span> <span value="AZ"><i>Arizona</i></span> <span value="AR"><span class="ark">Arkansas</span></span> <span value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a</span></span> <span value="NM" disabled="disabled">New<br> Mexico</span> </div>
<style type="text/css"> @import "/_static/dojo/dojox/form/resources/DropDownSelect.css"; .ark { text-decoration: underline; } </style>