Select Boxes
A jquery plugin that replace traditional default select dropdown to selectable boxes.
####Support
- single select
- options for defining rows, per row items, to show select box or hide it.
- support for font awesom or glyphicons
####Pending Work
- Make it responsive
- Multi select support
- Proper alignment of text field
How To
- Include
<link rel="stylesheet" type="text/css" href="selectboxes.css"> <script src="libs/jquery-1.11.0.js"></script> <script src="selectboxes.js"></script>- Initiate
<select class="pwn-boxes form-control"> <option value="Cake" pwnicon="fa fa-birthday-cake">Cake</option> <option value="Coffe" pwnicon="fa fa-coffee">Coffe</option> <option value="Bear" pwnicon="fa fa-beer">Bear</option> <option value="Wine" pwnicon="fa fa-vine">Wine</option> <option value="Omlet" pwnicon="fa fa-cutlery">Omlet</option> <option value="Pizza" pwnicon="fa fa-bullseye">Pizza</option> </select> // 2 row with each row 4 element $('.pwn-boxes').pwnselectboxes({ rows : 2, // no of rows to show for select option selecthide : false }); // single row $('.pwn-boxe').pwnselectboxes({ selecthide : false, // to show related select box, default it hide perrow: 8 // per row element count });- For custom icons In select box option tag add "pwnicon" attribute and set the class for either font-awesom or glyph-icons or your custom class for icons.
Screen Shot
