Skip to content

Latest commit

 

History

History
148 lines (129 loc) · 4.69 KB

README.md

File metadata and controls

148 lines (129 loc) · 4.69 KB
Raw

#jQuery Selectric icon

jQuery Selectric is a jQuery plugin designed to help at stylizing and manipulating HTML selects.

  • Keyboard navigation (Up/Down/Left/Right/Word search)
  • Easily customizable
  • Pretty lightweight (3,5KB minified and less than 2KB minified/gzip)
  • Options box always stay visible
  • Doesn't rely on external libraries (besides jQuery)
  • Word search works with western latin characters set (e.g.: á, ñ, ç...)

###Demo

##How to use:

Make sure to include jQuery in your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Include jQuery Selectric:

<script src="js/jquery.selectric.min.js"></script>

Put styles in your CSS and change it to your taste :D

/*======================================================================
	Selectric
======================================================================*/
.selectricWrapper { position: relative; margin: 0 0 10px; width: 300px; cursor: pointer; }
.selectricDisabled { filter: alpha(opacity=50); opacity: 0.5; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.selectricOpen { z-index: 9999; }
.selectricHideSelect { position: relative; overflow: hidden; }
.selectricHideSelect select { position: absolute; left: -100%; }
.selectric { border: 1px solid #DDD; background: #F8F8F8; position: relative; border-radius: 2px; }
.selectricOpen .selectric { border-color: #CCC; background: #F0F0F0; z-index: 9999; }
.selectric .label { display: block; white-space: nowrap; overflow: hidden; margin: 0 30px 0 0; padding: 6px; font-size: 12px; line-height: 1.5; color: #444; }
.selectric .button { position: absolute; right: 0; top: 0; height: 30px; width: 30px; color: #BBB; text-align: center; font: normal 18px/30px sans-serif; }
.selectricHover .selectric { border-color: #CCC; }
.selectricHover .selectric .button { color: #888; }
.selectricTempShow { position: absolute !important; visibility: hidden !important; display: block !important; }

/* Items box */
.selectricItems { display: none; position: absolute; overflow: auto; top: 100%; left: 0; background: #F9F9F9; border: 1px solid #CCC; z-index: 9998; box-shadow: 0 0 10px -6px; /* margin: -1px 0; */ }
.selectricItems ul,
.selectricItems li { list-style: none; padding: 0; margin: 0; min-height: 20px; line-height: 20px; font-size: 12px; }
.selectricOpen .selectricItems { display: block; }
.selectricItems li { padding: 5px; cursor: pointer; display: block; border-bottom: 1px solid #EEE; color: #666; border-top: 1px solid #FFF; }
.selectricItems li.selected { background: #EFEFEF; color: #444; border-top-color: #E0E0E0; }
.selectricItems li:hover { background: #F0F0F0; color: #444; }
.selectricItems li.disabled { background: #F5F5F5; color: #BBB; border-top-color: #FAFAFA; }

Initialize jQuery Selectric:

<script>
$(function(){
	$('select').selectric();
});
</script>

##Options:

Option Default Type Description
onOpen function() {} Function Function called when select options is opened
onClose function() {} Function Function called when select options is closed
maxHeight 300 Integer Maximum height options box can be
keySearchTimeout 500 Integer After this time without pressing any key, the search string is reseted
arrowButtonMarkup <b class="button">&#9662;</b> String [HTML] Markup for open options button
disableOnMobile true Boolean Initialize plugin on mobile browsers
border 1 Integer Options box border thickness
openOnHover false Boolean Open select box on hover, instead of click
expandToItemText false Boolean Expand options box past wrapper

##Public methods:

$('select').selectric('refresh'); // Reconstruct the instance of plugin
$('select').selectric('destroy'); // Destroy Selectric and go back to normal
$('select').selectric('open'); // Open options
$('select').selectric('close'); // Close options

##Browser support:

  • Firefox
  • Chrome
  • Safari
  • Internet Explorer 7+
  • Opera