The answer is
I don't think using JS for creating a button is good practice. What if the user's browser deactivates JavaScript ?
Plus, you can just use a checkbox and a bit of CSS to do it. And it easy to retrieve the state of your checkbox.
This is just one example, but you can style it how want.
HTML
<fieldset class="toggle">
<input id="data-policy" type="checkbox" checked="checked" />
<label for="data-policy">
<div class="toggle-button">
<div class="toggle-tab"></div>
</div>
Toggle
</label>
</fieldset>?
CSS
.toggle label {
color: #444;
float: left;
line-height: 26px;
}
.toggle .toggle-button {
margin: 0px 10px 0px 0px;
float: left;
width: 70px;
height: 26px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
background-image: linear-gradient(top, #eeeeee, #fafafa);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
width: 30px;
height: 26px;
background-color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
background-image: linear-gradient(top, #fafafa, #eeeeee);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
border: 1px solid #CCC;
margin-left: -1px;
margin-top: -1px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
-moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
background-color: #2d71c2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
background-image: linear-gradient(top, #2d71c2, #4ea1db);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
margin-left: 39px;
-webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
-moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}?
Hope this helps
You can just use toggleClass() to track state. Then you check if button element has the class, like this:
$("button.toggler").click( function() {
$me = $(this);
$me.toggleClass('off');
if($me.is(".off")){
alert('hi');
}else {
alert('bye');
}
});
And I use the button element for buttons for semantic reasons.
<button class="toggler">Toggle me</button>
There's a jquery plugin by Swizec, which can do this among other things: https://github.com/Swizec/styled-button
(The old link was http://swizec.com/code/styledButton/, I didn't fully test the replacement, just found it w/Google.)
Try this bit:
input type="button"
data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />
in viewModel
self.toggleButton = ko.observable(false);
here is an example using pure css:
.cmn-toggle {_x000D_
position: absolute;_x000D_
margin-left: -9999px;_x000D_
visibility: hidden;_x000D_
}_x000D_
.cmn-toggle + label {_x000D_
display: block;_x000D_
position: relative;_x000D_
cursor: pointer;_x000D_
outline: none;_x000D_
user-select: none;_x000D_
}_x000D_
input.cmn-toggle-round + label {_x000D_
padding: 2px;_x000D_
width: 120px;_x000D_
height: 60px;_x000D_
background-color: #dddddd;_x000D_
border-radius: 60px;_x000D_
}_x000D_
input.cmn-toggle-round + label:before,_x000D_
input.cmn-toggle-round + label:after {_x000D_
display: block;_x000D_
position: absolute;_x000D_
top: 1px;_x000D_
left: 1px;_x000D_
bottom: 1px;_x000D_
content: "";_x000D_
}_x000D_
input.cmn-toggle-round + label:before {_x000D_
right: 1px;_x000D_
background-color: #f1f1f1;_x000D_
border-radius: 60px;_x000D_
transition: background 0.4s;_x000D_
}_x000D_
input.cmn-toggle-round + label:after {_x000D_
width: 58px;_x000D_
background-color: #fff;_x000D_
border-radius: 100%;_x000D_
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);_x000D_
transition: margin 0.4s;_x000D_
}_x000D_
input.cmn-toggle-round:checked + label:before {_x000D_
background-color: #8ce196;_x000D_
}_x000D_
input.cmn-toggle-round:checked + label:after {_x000D_
margin-left: 60px;_x000D_
}<div class="switch">_x000D_
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">_x000D_
<label for="cmn-toggle-1"></label>_x000D_
</div>Here is one of the example/variant (more detail described) of ToggleButton using jQuery with <label for="input"> implementation.
1st we will create container for our ToggleButton using classic HTML <input> and <label>
<span>
<input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
<label for="feature_cb" id="label_for_some_feature">
<img alt="Stylish image" src="/images/icons/feature.png">
</label>
</span>
Next we will define function for toggling our button. Our button actually is the usual <label> which we will be styling to represent value toggling.
function toggleButton(button) {
var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).
if (isChecked)
$(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
$(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}
Function is implemented in a reusable way. You can use it for more than one, two or even three ToggleButtons you've created.
... and finally ... to make it work as expected, we should bind toggle function to an event ("change" event) of our improvised <label> button (it will be click event bec. we are not altering the checkbox directly, so no change event can be fired for <label>).
$(document).ready(function(){
$("#some_feature_label").click(function () {
toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
});
$("#some_other_feature_label").click(function () {
toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
});
});
With CSS we can define backgorund-image or some border to represent the change in value whilst <label> will do the job for us in altering the value of a checkbox ;).
Hope this helps someone.
You can use the "active" pseudoclass (it won't work on IE6, though, for elements other than links)
a:active
{
...desired style here...
}
I would be inclined to use a class in your css that alters the border style or border width when the button is depressed, so it gives the appearance of a toggle button.
You can use the "active" pseudoclass (it won't work on IE6, though, for elements other than links)
a:active
{
...desired style here...
}
I would be inclined to use a class in your css that alters the border style or border width when the button is depressed, so it gives the appearance of a toggle button.
In combination with this answer, you can also use this kind of style that is like mobile settings toggler.
HTML
<a href="#" class="toggler"> </a>
<a href="#" class="toggler off"> </a>
<a href="#" class="toggler"> </a>
CSS
a.toggler {
background: green;
cursor: pointer;
border: 2px solid black;
border-right-width: 15px;
padding: 0 5px;
border-radius: 5px;
text-decoration: none;
transition: all .5s ease;
}
a.toggler.off {
background: red;
border-right-width: 2px;
border-left-width: 15px;
}
jQuery
$(document).ready(function(){
$('a.toggler').click(function(){
$(this).toggleClass('off');
});
});
Could be much prettier, but gives the idea.
One advantage is that it can be animated with CSS
Fiddler
There's a jquery plugin by Swizec, which can do this among other things: https://github.com/Swizec/styled-button
(The old link was http://swizec.com/code/styledButton/, I didn't fully test the replacement, just found it w/Google.)
Try this bit:
input type="button"
data-bind="css:{on:toggleButton, off:toggleButton!=true},value:toggleButton,click: function() { $data.toggleButton(!($data.toggleButton()))}" />
in viewModel
self.toggleButton = ko.observable(false);
If you want a proper button then you'll need some javascript. Something like this (needs some work on the styling but you get the gist). Wouldn't bother using jquery for something so trivial to be honest.
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
You could use an anchor element (<a></a>), and use a:active and a:link to change the background image to toggle on or off. Just a thought.
Edit: The above method doesn't work too well for toggle. But you don't need to use jquery. Write a simple onClick javascript function for the element, which changes the background image appropriately to make it look like the button is pressed, and set some flag. Then on next click, image and flag is is reverted. Like so
var flag = 0;
function toggle(){
if(flag==0){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
flag=1;
}
else if(flag==1){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
flag=0;
}
}
And the html like so
<div id="toggleDiv" onclick="toggle()">Some thing</div>
JQuery UI makes light work out of creating toggle buttons. Just put this
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
on your page and then in your body onLoad or your $.ready() (or some object literals init() function if your building an ajax site..) drop some JQuery like so:
$("#myToggleButton").button()
thats it. (don't forget the < label for=...> because JQueryUI uses that for the body of the toggle button..)
From there you just work with it like any other input="checkbox" because that is what the underlying control still is but JQuery UI just skins it to look like a pretty toggle button on screen.
If you want a proper button then you'll need some javascript. Something like this (needs some work on the styling but you get the gist). Wouldn't bother using jquery for something so trivial to be honest.
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
You can use the "active" pseudoclass (it won't work on IE6, though, for elements other than links)
a:active
{
...desired style here...
}
I would be inclined to use a class in your css that alters the border style or border width when the button is depressed, so it gives the appearance of a toggle button.
Here is one of the example/variant (more detail described) of ToggleButton using jQuery with <label for="input"> implementation.
1st we will create container for our ToggleButton using classic HTML <input> and <label>
<span>
<input type="checkbox" value="1" name="some_feature_to_select" id="feature_cb" style="display: none;"> <!-- We can hide checkbox bec. we want <label> to be a ToggleButton, so we don't need to show it. It is used as our value holder -->
<label for="feature_cb" id="label_for_some_feature">
<img alt="Stylish image" src="/images/icons/feature.png">
</label>
</span>
Next we will define function for toggling our button. Our button actually is the usual <label> which we will be styling to represent value toggling.
function toggleButton(button) {
var _for = button.getAttribute('for'); // defining for which element this label is (suppose element is a checkbox (bec. we are making ToggleButton ;) )
var _toggleID = 'input#'+_for; // composing selector ID string to select our toggle element (checkbox)
var _toggle = $( _toggleID ); // selecting checkbox to work on
var isChecked = !_toggle.is(':checked'); // defining the state with negation bec. change value event will have place later, so we negating current state to retrieve inverse (next).
if (isChecked)
$(button).addClass('SelectedButtonClass'); // if it is checked -> adding nice class to our button (<label> in our case) to show that value was toggled
else
$(button).removeClass('SelectedButtonClass'); // if value (or feature) was unselected by clicking the button (<label>) -> removing .SelectedButtonClass (or simply removing all classes from element)
}
Function is implemented in a reusable way. You can use it for more than one, two or even three ToggleButtons you've created.
... and finally ... to make it work as expected, we should bind toggle function to an event ("change" event) of our improvised <label> button (it will be click event bec. we are not altering the checkbox directly, so no change event can be fired for <label>).
$(document).ready(function(){
$("#some_feature_label").click(function () {
toggleButton(this); // call function with transmitting instance of a clicked label and let the script decide what was toggled and what to do with it
});
$("#some_other_feature_label").click(function () {
toggleButton(this); // doing the same for any other feature we want to represent in a way of ToggleButton
});
});
With CSS we can define backgorund-image or some border to represent the change in value whilst <label> will do the job for us in altering the value of a checkbox ;).
Hope this helps someone.
You could use an anchor element (<a></a>), and use a:active and a:link to change the background image to toggle on or off. Just a thought.
Edit: The above method doesn't work too well for toggle. But you don't need to use jquery. Write a simple onClick javascript function for the element, which changes the background image appropriately to make it look like the button is pressed, and set some flag. Then on next click, image and flag is is reverted. Like so
var flag = 0;
function toggle(){
if(flag==0){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
flag=1;
}
else if(flag==1){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
flag=0;
}
}
And the html like so
<div id="toggleDiv" onclick="toggle()">Some thing</div>
JQuery UI makes light work out of creating toggle buttons. Just put this
<label for="myToggleButton">my toggle button caption</label>
<input type="checkbox" id="myToggleButton" />
on your page and then in your body onLoad or your $.ready() (or some object literals init() function if your building an ajax site..) drop some JQuery like so:
$("#myToggleButton").button()
thats it. (don't forget the < label for=...> because JQueryUI uses that for the body of the toggle button..)
From there you just work with it like any other input="checkbox" because that is what the underlying control still is but JQuery UI just skins it to look like a pretty toggle button on screen.
I don't think using JS for creating a button is good practice. What if the user's browser deactivates JavaScript ?
Plus, you can just use a checkbox and a bit of CSS to do it. And it easy to retrieve the state of your checkbox.
This is just one example, but you can style it how want.
HTML
<fieldset class="toggle">
<input id="data-policy" type="checkbox" checked="checked" />
<label for="data-policy">
<div class="toggle-button">
<div class="toggle-tab"></div>
</div>
Toggle
</label>
</fieldset>?
CSS
.toggle label {
color: #444;
float: left;
line-height: 26px;
}
.toggle .toggle-button {
margin: 0px 10px 0px 0px;
float: left;
width: 70px;
height: 26px;
background-color: #eeeeee;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#fafafa));
background-image: -webkit-linear-gradient(top, #eeeeee, #fafafa);
background-image: -moz-linear-gradient(top, #eeeeee, #fafafa);
background-image: -o-linear-gradient(top, #eeeeee, #fafafa);
background-image: -ms-linear-gradient(top, #eeeeee, #fafafa);
background-image: linear-gradient(top, #eeeeee, #fafafa);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#eeeeee', EndColorStr='#fafafa');
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #D1D1D1;
}
.toggle .toggle-button .toggle-tab {
width: 30px;
height: 26px;
background-color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#eeeeee));
background-image: -webkit-linear-gradient(top, #fafafa, #eeeeee);
background-image: -moz-linear-gradient(top, #fafafa, #eeeeee);
background-image: -o-linear-gradient(top, #fafafa, #eeeeee);
background-image: -ms-linear-gradient(top, #fafafa, #eeeeee);
background-image: linear-gradient(top, #fafafa, #eeeeee);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#fafafa', EndColorStr='#eeeeee');
border: 1px solid #CCC;
margin-left: -1px;
margin-top: -1px;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
-moz-box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
box-shadow: 5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}
.toggle input[type=checkbox] {
display: none;
}
.toggle input[type=checkbox]:checked ~ label .toggle-button {
background-color: #2d71c2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#2d71c2), to(#4ea1db));
background-image: -webkit-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -moz-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -o-linear-gradient(top, #2d71c2, #4ea1db);
background-image: -ms-linear-gradient(top, #2d71c2, #4ea1db);
background-image: linear-gradient(top, #2d71c2, #4ea1db);
filter: progid:dximagetransform.microsoft.gradient(GradientType=0, StartColorStr='#2d71c2', EndColorStr='#4ea1db');
}
.toggle input[type=checkbox]:checked ~ label .toggle-button .toggle-tab {
margin-left: 39px;
-webkit-box-shadow: -5px 0px 4px -5px #000000, 0px 0px 0px 0px #000000;
-moz-box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
box-shadow: -5px 0px 4px -5px rgba(0, 0, 0, 0.3), 0px 0px 0px 0px #000000;
}?
Hope this helps
If you want a proper button then you'll need some javascript. Something like this (needs some work on the styling but you get the gist). Wouldn't bother using jquery for something so trivial to be honest.
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
In combination with this answer, you can also use this kind of style that is like mobile settings toggler.
HTML
<a href="#" class="toggler"> </a>
<a href="#" class="toggler off"> </a>
<a href="#" class="toggler"> </a>
CSS
a.toggler {
background: green;
cursor: pointer;
border: 2px solid black;
border-right-width: 15px;
padding: 0 5px;
border-radius: 5px;
text-decoration: none;
transition: all .5s ease;
}
a.toggler.off {
background: red;
border-right-width: 2px;
border-left-width: 15px;
}
jQuery
$(document).ready(function(){
$('a.toggler').click(function(){
$(this).toggleClass('off');
});
});
Could be much prettier, but gives the idea.
One advantage is that it can be animated with CSS
Fiddler
You can use the "active" pseudoclass (it won't work on IE6, though, for elements other than links)
a:active
{
...desired style here...
}
As far as I was searching for answer too, and wanted to acomplish it with CSS. I found solution by CSS NINJA
It is a nice impelmentation of <input type="checkbox"> and some css
Live demo!
Although it is not working in IE 8 you could implement selectivizr! and fix CSS where uses opacity to filter to make it work in IE.
EDIT 2014:
for new toggle buttons I do use solution found on Lea Verou blog visually similar to iOS checkbox
Try;
<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>
And make sure in the
<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
<link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>
Remember when you are coding this, only somename and someid can change in the input tag, otherwise it doesn't work.
You can just use toggleClass() to track state. Then you check if button element has the class, like this:
$("button.toggler").click( function() {
$me = $(this);
$me.toggleClass('off');
if($me.is(".off")){
alert('hi');
}else {
alert('bye');
}
});
And I use the button element for buttons for semantic reasons.
<button class="toggler">Toggle me</button>
here is an example using pure css:
.cmn-toggle {_x000D_
position: absolute;_x000D_
margin-left: -9999px;_x000D_
visibility: hidden;_x000D_
}_x000D_
.cmn-toggle + label {_x000D_
display: block;_x000D_
position: relative;_x000D_
cursor: pointer;_x000D_
outline: none;_x000D_
user-select: none;_x000D_
}_x000D_
input.cmn-toggle-round + label {_x000D_
padding: 2px;_x000D_
width: 120px;_x000D_
height: 60px;_x000D_
background-color: #dddddd;_x000D_
border-radius: 60px;_x000D_
}_x000D_
input.cmn-toggle-round + label:before,_x000D_
input.cmn-toggle-round + label:after {_x000D_
display: block;_x000D_
position: absolute;_x000D_
top: 1px;_x000D_
left: 1px;_x000D_
bottom: 1px;_x000D_
content: "";_x000D_
}_x000D_
input.cmn-toggle-round + label:before {_x000D_
right: 1px;_x000D_
background-color: #f1f1f1;_x000D_
border-radius: 60px;_x000D_
transition: background 0.4s;_x000D_
}_x000D_
input.cmn-toggle-round + label:after {_x000D_
width: 58px;_x000D_
background-color: #fff;_x000D_
border-radius: 100%;_x000D_
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);_x000D_
transition: margin 0.4s;_x000D_
}_x000D_
input.cmn-toggle-round:checked + label:before {_x000D_
background-color: #8ce196;_x000D_
}_x000D_
input.cmn-toggle-round:checked + label:after {_x000D_
margin-left: 60px;_x000D_
}<div class="switch">_x000D_
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round" type="checkbox">_x000D_
<label for="cmn-toggle-1"></label>_x000D_
</div>You could use an anchor element (<a></a>), and use a:active and a:link to change the background image to toggle on or off. Just a thought.
Edit: The above method doesn't work too well for toggle. But you don't need to use jquery. Write a simple onClick javascript function for the element, which changes the background image appropriately to make it look like the button is pressed, and set some flag. Then on next click, image and flag is is reverted. Like so
var flag = 0;
function toggle(){
if(flag==0){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
flag=1;
}
else if(flag==1){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
flag=0;
}
}
And the html like so
<div id="toggleDiv" onclick="toggle()">Some thing</div>
You could use an anchor element (<a></a>), and use a:active and a:link to change the background image to toggle on or off. Just a thought.
Edit: The above method doesn't work too well for toggle. But you don't need to use jquery. Write a simple onClick javascript function for the element, which changes the background image appropriately to make it look like the button is pressed, and set some flag. Then on next click, image and flag is is reverted. Like so
var flag = 0;
function toggle(){
if(flag==0){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img1.gif";
flag=1;
}
else if(flag==1){
document.getElementById("toggleDiv").style.backgroundImage="path/to/img/img2.gif";
flag=0;
}
}
And the html like so
<div id="toggleDiv" onclick="toggle()">Some thing</div>
I would be inclined to use a class in your css that alters the border style or border width when the button is depressed, so it gives the appearance of a toggle button.
If you want a proper button then you'll need some javascript. Something like this (needs some work on the styling but you get the gist). Wouldn't bother using jquery for something so trivial to be honest.
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="button" class="off" onclick="togglestyle(this)" />
</body>
</html>
Try;
<li>Text To go with Toggle Button<span class = 'toggle'><input type = 'checkbox' class = 'toggle' name = 'somename' id = 'someid' /></span></li>
And make sure in the
<head><link rel = 'stylesheet' src = 'theme.css'> (from jqtouch - downloadable online)
<link rel = 'text/javascript' src = 'jquery.js'> (also from jqtouch)
</head>
Remember when you are coding this, only somename and someid can change in the input tag, otherwise it doesn't work.
Source: Stackoverflow.com