https://github.com/grassator/jquery-brute-select
Simple stylizable custom select input implementation.
https://github.com/grassator/jquery-brute-select
Last synced: 5 months ago
JSON representation
Simple stylizable custom select input implementation.
- Host: GitHub
- URL: https://github.com/grassator/jquery-brute-select
- Owner: grassator
- License: mit
- Created: 2013-03-17T10:33:35.000Z (almost 13 years ago)
- Default Branch: master
- Last Pushed: 2013-06-22T11:41:18.000Z (over 12 years ago)
- Last Synced: 2023-04-09T14:49:35.761Z (almost 3 years ago)
- Language: JavaScript
- Homepage: http://kubyshkin.ru
- Size: 242 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# Brute Select
Simple select implementation with customizable styles. It retains default browser behavior for dropdown list itself while making possible adjusting all aspects of collapsed view of select.
What makes **Brute Select** really different is an ability to customize every aspect of it's looks and behavior by providing configuration functions instead of limited scalar options used in most jQuery plugins.
## Getting Started
Download the latest version from [github][github]. Then in your web page:
[github]:https://github.com/grassator/jquery-brute-select/archive/master.zip
```html
$(function() {
$('select').bruteSelect();
});
```
## Configuration
You can pass configuration object to plugin initialization with parameters described below:
### `baseName` string
Base for all string entities related to brute select including base part of element classes when using default `generateClassName` function.
Defaults to `brute-select`
### `generateClassName` function (elementNameOrModifier, isModifier)
Generates appropriate class names for select elements in generated markup. It can be used to adjust class names to conform to specific naming guidelines, like the ones used in [BEM](http://bem.info/).
Default implementation just appends `elementNameOrModifier` to `baseName` with `-` in the middle and can be accessed via `$.fn.bruteSelect.generateClassName`.
Here is an sample implementation of BEM-style class generation:
```js
$('select').bruteSelect({
generateClassName: function (elementNameOrModifier, isModifier) {
var cls = this.baseName;
if(elementNameOrModifier) {
cls += (isModifier ? '_' : '__') + elementNameOrModifier;
}
return cls;
}
});
```
### `formatter` function (title, value, $option, $select)
Allows you to customize the way you format the title of currently selected option inside the select. If you wish to use some html for formatting be sure to disable `stripTagsInTitle` option.
Default implementation just returns `title` and can be accessed via `$.fn.bruteSelect.formatter`.
Must return `string` value.
### `allowHtmlInTitle` boolean
Defaults to `false` meaning that Brute Select will use jQuery `text()` method to update formatted option title. Allowing html inside the title could allow for XSS vulnerability if option list is generated by users and is not filtered in formatter or on the server side.
### `markup` function ($select)
You can use this configuration function to customize generated markup or in the case you want to generate markup by some other means (like server side) and provide ready-to-use references to necessary elements for brute select functionality.
Must return `object` with following properties.
```js
{
$el: $(...),
$title: $(...)
}
```
### Function Context
All of the configuration functions are merged into special object that contains state of the select and handles user interactions. Apart from ability to access all the other configuration options within configuration function it also provides references to top-most generated markup element via `this.$el`, current item title via `this.$title`, and original select via `this.$select`.
### Global Configuration
All of the previously listed options are also available in `$.fn.bruteSelect.options` object that contains default options for the plugin allowing you to adjust them globally.
## Further Extending
If you need even more control or wish to extend functionality of this plugin, you can extend base class that handles state and user interactions. It is accessible via `$.fn.bruteSelect.klass`.
## Licensing
Licensed under permissive [MIT-style license](https://github.com/grassator/jquery-brute-select/blob/master/LICENSE-MIT).