Plugin desenvolvido para customizar selects drop-down a partir da tag select.
Vantagens de usar o Dropfy:
- Desenvolvido para ser Acessível
- Suporte para navegadores Antigos
Confira o [Demo]
jQuery, versão >= 1.10.x
Usar o Dropfy é mais simple que se imagina, segue o passo a passo:
Inclua o CSS em seu projeto:
<link href='css/dropfy.css' rel='stylesheet'>
Inclua o JavaScript em seu projeto:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/dropfy-2.0.js"></script>
HTML, declare uma class a sua escolha em seu select(tag):
<select class='mySelectTheme'>
<option value='norte'>Norte</option>
<option value='nordeste'>Nordeste</option>
<option value='centro-oeste'>Centro-Oeste</option>
<option value='sudeste'>Sudeste</option>
<option value='sul'>Sul</option>
</select>
JavaScript, chame o metodo dropfy():
<script type="text/javascript">
$(".mySelectTheme").dropfy();
</script>
onChange : Captura o valor selecionado, exemplo:
$(".mySelectTheme").dropfy({
onChange : function(value){
console.log(value)
}
});
iG Developers Team