https://github.com/damiencorpataux/jquery-troggle
Troggle lets you toggle cyclic states to dom elements
https://github.com/damiencorpataux/jquery-troggle
Last synced: 3 months 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 (over 11 years ago)
- Default Branch: master
- Last Pushed: 2013-10-15T23:49:57.000Z (over 11 years ago)
- Last Synced: 2025-02-15T06:28:59.407Z (5 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);
});
});
```