Здравствуйте!,
Есть кнопки:
Код в HTML:
| Код |
<div class="row">
<label>Starry sky</label>
<div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
</div>
|
Код в CSS:
| Код |
.toggle {
border: 1px solid #888888;
-webkit-border-radius: 6px;
background: #FFFFFF url(toggle.png) repeat-x;
font-size: 19px;
font-weight: bold;
line-height: 30px;
}
.toggle[toggled="true"] {
border: 1px solid #143fae;
background: #194fdb url(toggleOn.png) repeat-x;
}
.toggleOn {
display: none;
position: absolute;
width: 60px;
text-align: center;
left: 0;
top: 0;
color: #FFFFFF;
text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
}
.toggleOff {
position: absolute;
width: 60px;
text-align: center;
right: 0;
top: 0;
color: #666666;
}
.toggle[toggled="true"] > .toggleOn {
display: block;
}
.toggle[toggled="true"] > .toggleOff {
display: none;
}
.thumb {
position: absolute;
top: -1px;
left: -1px;
width: 40px;
height: 28px;
border: 1px solid #888888;
-webkit-border-radius: 6px;
background: #ffffff url(thumb.png) repeat-x;
}
.toggle[toggled="true"] > .thumb {
left: auto;
right: -1px;
}
|
Код в JS:
| Код |
addEventListener("click", function(event)
{
var div = findParent(event.target, "div");
if (div && hasClass(div, "toggle"))
{
div.setAttribute("toggled", div.getAttribute("toggled") != "true");
event.preventDefault();
}
}, true);
function findParent(node, localName)
{
while (node && (node.nodeType != 1 || node.localName.toLowerCase() != localName))
node = node.parentNode;
return node;
}
function hasClass(self, name)
{
var re = new RegExp("(^|\\s)"+name+"($|\\s)");
return re.exec(self.getAttribute("class")) != null;
}
|
Вроде все записал, что к ним относится.
Как мне различать нажатие кнопки On и Off. Т.е. например нажимаю On - происходит 1 действие, а при Off - другое?
У меня есть переменные булевы: b1, b2, b3, ... как мне сделать так чтоб кнопки были в положении On или Off в зависимости от переменной, т.е. изначально при загрузке страницы?
Заранее спасибо! |