Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/damiencorpataux/jquery-troggle
Troggle lets you toggle cyclic states to dom elements
https://github.com/damiencorpataux/jquery-troggle
Last synced: 20 days ago
JSON representation
Troggle lets you toggle cyclic states to dom elements
- Host: GitHub
- URL: https://github.com/damiencorpataux/jquery-troggle
- Owner: damiencorpataux
- License: mit
- Created: 2013-10-15T22:52:26.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2013-10-15T23:49:57.000Z (about 11 years ago)
- Last Synced: 2024-11-05T16:36:45.416Z (2 months ago)
- Size: 105 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
jquery-troggle.js
=================
Troggle lets you toggle cyclic states on dom elements, they then becom controls.
You define set of states that you assign to one or more dom elements.
When the user clicks one dom element, the state cycles through the defined states.
```html
*[data-troggle-state="off"] {
background-color: #00BFFF;
}
*[data-troggle-state="on"] {
background-color: #FF0000;
}
$(document).ready(function() {
// Initializes troggles
$('*[data-type=troggle]').troggle({
states:['on', 'off', 'unknown']
});
// Retrieves control state on user click
$('*[data-type=troggle]').on('click', function() {
// Retrives troggles states
console.log($(this).troggle('state'));
});
```
Easily cycle icons using css:
```html
*[data-troggle-state="off"] {
background-image: url(icon1);
}
*[data-troggle-state="on"] {
background-color: url(icon2);
}
*[data-troggle-state="unknown"] {
background-color: url(icon3);
}
```
Easily create groups of controls by using common attributes:
```html
*[data-troggle-state="off"] {
background-color: #00BFFF;
}
*[data-troggle-state="on"] {
background-color: #FF0000;
}
Price
Weight
$(document).ready(function() {
// Initializes troggles
$('*[data-type=troggle][title=Order]').troggle({
states:['off', 'ASC', 'DESC']
});
$('*[data-type=troggle][title=Group][data-troggle-id~=price]').troggle({
states:['EUR', 'USD']
});
$('*[data-type=troggle][title=Group][data-troggle-id~=weight]').troggle({
states:['kg', 'lbs']
});
// Retrieves control state on user click
$('*[data-type=troggle]').on('click', function() {
// Retrives troggles states for Price controls and Weight controls
var states = {
price: $('*[data-type=troggle][title=Price]').troggle('state'),
weight: $('*[data-type=troggle][title=Weight]').troggle('state')
}
console.log(states);
});
});
```