Simple DropDown Plugin

by Mike McCaughan

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/ui-darkness/jquery-ui.css">
<div>
<select class="hm-dropdown">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
</div>

CSS

*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.hm-dropdown-wrapper
{
    border: 1px inset lightGray;
    border-radius: 3px;
    display: inline-block;
    font-size: 13px;
    height: 20px;
    margin: 2px;
    min-width: 59px;
    padding: 0 18px 0 4px;
    position: relative;
}
.hm-dropdown-wrapper.ui-state-hover
{
    background: none transparent;
    border: 1px inset lightBlue;
    font-weight: normal;
}
.hm-dropdown-wrapper .ui-widget-content
{
    background: none transparent;
    border-color: transparent;
    color: #000;
    left: 4px;
    position: absolute;
    top: -2px;
}
.hm-dropdown-selector
{
    background: none repeat scroll 0 0 transparent;
    border-color: transparent;
    border-radius: 0 3px 3px 0;
    height: 20px;
    position: absolute;
    right: -2px;
    top: -1px;
    width: 18px;
    z-index: 1;
}
.hm-dropdown-selector .ui-icon-triangle-1-s
{
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-hover .ui-widget.hm-dropdown-selector
{
    border: 1px inset darkBlue;
    background: #eaf6fd;
    background: -moz-linear-gradient(top,  #eaf6fd 0%, #d9f0fc 47%, #bce5fc 53%, #a9dbf6 93%, #a9dbf6 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eaf6fd), color-stop(47%,#d9f0fc), color-stop(53%,#bce5fc), color-stop(93%,#a9dbf6), color-stop(100%,#a9dbf6));
    background: -webkit-linear-gradient(top,  #eaf6fd 0%,#d9f0fc 47%,#bce5fc 53%,#a9dbf6 93%,#a9dbf6 100%);
    background: -o-linear-gradient(top,  #eaf6fd 0%,#d9f0fc 47%,#bce5fc 53%,#a9dbf6 93%,#a9dbf6 100%);
    background: -ms-linear-gradient(top,  #eaf6fd 0%,#d9f0fc 47%,#bce5fc 53%,#a9dbf6 93%,#a9dbf6 100%);
    background: linear-gradient(top,  #eaf6fd 0%,#d9f0fc 47%,#bce5fc 53%,#a9dbf6 93%,#a9dbf6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaf6fd', endColorstr='#a9dbf6',GradientType=0 );
}

JavaScript

(function($, window, document, undefined) {
    $.widget('hm.dropdown', {
        originalElement: null,
        options: {
            disabled: false,
            value: undefined,
            selectedIndex: undefined
        },
        _open: function() {},
        _close: function() {},
        _enable: function() {},
        _disable: function() {},
        _refresh: function() {},
        _mouseenter: function (e) {
            this.element.addClass('ui-state-hover');
        },
        _mouseleave: function (e) {
                this.element.removeClass('ui-state-hover');
        },
        _change: function(e) {
            this.element.trigger('change', e);
        },
        _focus: function(e) {
            this.element.trigger('focus', e);
        },
        _blur: function(e) {
            this.element.trigger('blur', e);
        },
        _keydown: function(e) {
            this.element.trigger('keydown', e);
        },
        _keyup: function(e) {
            this.element.trigger('keyup', e);
        },
        _value: function(value) {
            var currentValue = this.originalElement.val();
            if (value === undefined) {
                return currentValue;
            }

            if (currentValue !== value) {
                this.originalElement.val(value);
            }
            if (this.options.value !== value) {
                this._setOption('value', value);
            }
        },
        _text: function(text) {
            if (text === undefined) {
                return this.originalElement.find('option:selected').text();
            }

            this.originalElement.find('option').each(function() {
                var $this = $(this);
                $this.prop('selected', false);
                if ($this.text() == text) {
                    $this.prop('selected', true);
                    this._value($this.val());
                }
            });
        }, 
        _selectedIndex: function(selectedIndex) {
   ...