Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paulstraw/FancySelect
A better select for discerning web developers everywhere.
https://github.com/paulstraw/FancySelect
Last synced: 18 days ago
JSON representation
A better select for discerning web developers everywhere.
- Host: GitHub
- URL: https://github.com/paulstraw/FancySelect
- Owner: paulstraw
- License: mit
- Archived: true
- Created: 2013-08-10T03:29:13.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-10-01T18:09:40.000Z (about 6 years ago)
- Last Synced: 2024-10-12T17:34:00.462Z (about 1 month ago)
- Language: HTML
- Homepage: http://code.octopuscreative.com/fancyselect/
- Size: 105 KB
- Stars: 754
- Watchers: 32
- Forks: 165
- Open Issues: 37
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# NOTICE: FancySelect is no longer actively maintained.
Now that it's possible to easily style `select` elements in all major browsers, I am no longer maintaining FancySelect. Native `select`s are more usable and accessible, and you should probably use them. You're welcome to use FancySelect, but for the time being it is not officially supported.
Feel free to yell at me on Twitter about this: https://twitter.com/paulstraw
-paul
FancySelect
===========
A better select for discerning web developers everywhere, lovingly crafted by [Paul Straw](http://paulstraw.com). You can download it here, or [check out the demo](http://code.octopuscreative.com/fancyselect/).
Basic Usage
-----------
FancySelect is easy to use. Just include jQuery or Zepto, target any `select` element on the page, and call `.fancySelect()` on it. If the select has an option with no value, it'll be used as a sort of placeholder text.
By default, FancySelect uses native selects and styles only the trigger on iOS devices. To override this, pass an object with `forceiOS` set to `true` when initializing it.
FancySelect also passes any classes specified in the select's `data-class` attribute, which you can use to style specific FancySelect instances.
### HTML
``` html
Select something…
Lorem
Ipsum
Dolor
Sit
Amet
```
### JavaScript
``` javascript
$('.basic').fancySelect();
```
Updating Options
----------------
If the options in your select change after initializing FancySelect, you can tell it to rebuild the list of options by triggering `update.fs` on the select element.
### JavaScript
``` javascript
var mySelect = $('.my-select');
mySelect.fancySelect();
mySelect.append('FooBar');
mySelect.trigger('update.fs');
```
Enabling/Disabling
------------------
FancySelect will automatically pick up your `select`'s `disabled` property on initialization. If you need to enable or disable it again later, you can do that by triggering `enable.fs` or `disable.fs` on your select element.
### HTML
``` html
First Option
Second Option
```
### JavaScript
``` javascript
var mySelect = $('.my-select');
mySelect.fancySelect(); // currently disabled because of html property
// later…
mySelect.trigger('enable.fs'); // now enabled
// even later…
mySelect.trigger('disable.fs'); // now disabled again
```
Including Blank Option
----------------------
FancySelect can include the blank option in the options list if you pass the `includeBlank` parameter:
### JavaScript
```
var mySelect = $('.my-select');
mySelect.fancySelect({includeBlank: true});
```
Templates
---------
If you need to do something fancy with the trigger or the individual options, you can use `triggerTemplate` or `optionTemplate`, which are both functions passed an `option` element (jQuery-wrapped) and returning an HTML string to render.
### HTML
``` html
Incandescent
CFL
Halogen
```
``` javascript
$('.bulbs').fancySelect({
optionTemplate: function(optionEl) {
return optionEl.text() + '
';
}
}
})
```
Triggering the change event
---------------------------
You can listen to the `change.fs` event in order to trigger the DOM's change event on the `` element.
### HTML
``` html
First Option
Second Option
```
### JavaScript
``` javascript
var mySelect = $('.my-select');
mySelect.fancySelect().on('change.fs', function() {
$(this).trigger('change.$');
}); // trigger the DOM's change event when changing FancySelect
```
Contributions
-------------
Any contribution is absolutely welcome, but please review the contribution guidelines before getting started.