SelectBoxIt Method API

Using the Method API to open, close, move up, move down, and search

by firegroove

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css">
<script src="http://gfranko.github.com/javascripts/jQuery.selectBoxIt.min.js"></script>
<select id="test" name="test">
<option value="SelectBoxIt Is:">SelectBoxIt Is:</option>
<option value="Terrible">Terrible</option>
<option value="Not Bad">Not Bad</option>
<option value="Good">Good</option>
<option value="Great">Great</option>
<option value="Amazing">Amazing</option>
</select>

<div id="buttons">
    <br /><br />
<button id="open" class="ui-button ui-state-default ui-corner-all ui-button-text-only effects" role="button" aria-disabled="false">
    <span class="ui-button-text">Open</span>
</button>
<button id="close" class="ui-button ui-state-default ui-corner-all ui-button-text-only effects" role="button" aria-disabled="false">
    <span class="ui-button-text">Close</span>
</button>
<button id="moveDown" class="ui-button ui-state-default ui-corner-all ui-button-text-only effects" role="button" aria-disabled="false">
    <span class="ui-button-text">Move Down</span>
</button>
<button id="moveUp" class="ui-button ui-state-default ui-corner-all ui-button-text-only effects" role="button" aria-disabled="false">
    <span class="ui-button-text">Move Up</span>
</button>
    <input id="search" type="text" placeholder="Type something..." />
<button id="search" class="ui-button ui-state-default ui-corner-all ui-button-text-only effects" role="button" aria-disabled="false">
    <span class="ui-button-text">Search</span>
</button>
</div>

CSS

/*
 * jQuery.selectBoxIt.css 0.1.0
 * Author: @gregfranko
 */

/* div surrounding the Select Box */
#testSelectBoxItContainer {
    display: inline-block;
    *display: inline;
    zoom: 1;
    float:left;
}

/* Select Box */
#testSelectBoxIt {
  height: 30px; /* Height of the select box */
  cursor:pointer;
  white-space:nowrap;
  /* Provide a background image here if you want to use an image for the down arrow */
}

/* Select Box and Select Box Options  */
#testSelectBoxIt, #testSelectBoxItOptions {
  width: 220px; /* Width of the select box and select box options*/
}

/* Select Box Text */
#testSelectBoxItText {
  font: 14px Helvetica, Arial;
  text-indent: 5px;
  line-height: 30px;
  overflow:hidden;
  float:left;
  white-space:nowrap;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Select Box Options List*/
#testSelectBoxItOptions { 
  max-height: 180px; /* A vertical scrollbar appears if your select box options are taller than this */
  font: 14px Helvetica, Arial;
  margin:0;
  padding:0;
  list-style:none;
  position:absolute;
  overflow:auto;
  cursor:pointer;
  display:none;
  z-index:99999;
  outline:none;
 }

/* Select Box Individual Options */
#testSelectBoxItOptions li {
  line-height: 30px; /* Height of Individual Select Box Options */
  text-indent: 5px; /* Horizontal Positioning of the select box option text */
  overflow:hidden;
  white-space:nowrap;
}

/* Select Box Down Arrow Container (if an image is not used) */
#testSelectBoxItArrowContainer {
  width: 30px; /* Positions the down arrow */
  float:right;
}

/* Select Box Down Arrow */
#testSelectBoxItArrow {
    /* Horizontally centers the down arrow */
    margin-right:auto;
    margin-left:auto;
}

/*Prevents the blue selection background from showing up on webkit*/
*::selection {
    background:transparent;
}

#buttons{
    float: left;
   ...

JavaScript

var selectBox = $("select#test").selectBoxIt({
    showEffect: "fadeIn",
    hideEffect: "fadeOut"
}).data("selectBoxIt");

$(".ui-button").click(function() {
    var text = $(this).text().trim();
    switch (text) {
    case "Open":
        selectBox.open();
        break;
    case "Close":
        selectBox.close();
        break;
    case "Move Down":
        selectBox.moveDown();
        break;
    case "Move Up":
        selectBox.moveUp();
        break;
    case "Search":
       selectBox.search($("#search").val());
       break;
    default:
        break;
    };
});