Re: Иконки в главном меню.
Добавлено: Сб мар 18, 2017 9:03 pm
Признаюсь, джаваскриптов никогда не писал, однако попытался что-то "изобразить", решая задачу, указанную в конце предыдущего поста.
На основе кода, приведенного ув. directman66 2 поста назад, попытался его дополнить последним джаваскриптом:
Но чуда не произошло, элемент не синхронизируется со свойством, изменяемым отдельно от выключателя...
Может кто знает, как правильно?
На всякий случай выложу весь код.
На основе кода, приведенного ув. directman66 2 поста назад, попытался его дополнить последним джаваскриптом:
Код: Выделить всё
<script>$('.button-wrap').on("click", function(){
$(this).toggleClass('button-active');
});
//# sourceURL=pen.js
</script>
<script type="text/javascript">
var Status='%Switch1.status%';
if (Status!==0){
function(){
$(this).toggleClass('button-active');
};
}
</script>Может кто знает, как правильно?
На всякий случай выложу весь код.
SPOILERSPOILER_SHOW
Код: Выделить всё
<!DOCTYPE html><html class=''>
<head>
<meta charset='UTF-8'>
<meta name="robots" content="noindex">
<style class="cp-pen-styles">
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Helvetica', sans-serif;
}
/* BUTTON 4 */
.four .button-wrap {
width: 100px;
margin: 40px auto 0;
cursor: pointer;
}
.four .button-bg {
width: 100%;
height: 100%;
background-color: #44453d;
border-radius: 40px;
padding: 3px;
color: #fff;
transition: all 0.2s ease;
}
.four .button-switch {
position: relative;
left: 0px;
width: 44px;
height: 44px;
border: solid 13px;
background-color: #fff;
border-radius: 36px;
transition: all 0.2s ease;
}
.four .button-active .button-switch {
left: 50px;
}
.four .button-in,
.four .button-out {
position: absolute;
transition: all 0.2s ease;
padding-top: 15px;
font-size: 0.8em;
text-transform: uppercase;
font-weight: bold;
}
.four .button-in {
margin-left: 76px;
}
.four .button-out {
margin-left: 18px;
}
.four .button-active .button-bg {
background-color: #c7d923;
</style></head><body>
<table>
<tr> <td>
<div class="four">
<div class="button-wrap" onClick='callMethod("%Switch1.switch");'>
<div class="button-bg">
<div class="button-out"></div>
<div class="button-in"></div>
<div class="button-switch"></div>
</div>
</div>
</div>
</td><td>
<div class="four">
<div class="button-wrap">
<div class="button-bg">
<div class="button-out"></div>
<div class="button-in"></div>
<div class="button-switch"></div>
</div>
</div>
</div>
</td></tr>
</table>
<script>$('.button-wrap').on("click", function(){
$(this).toggleClass('button-active');
});
//# sourceURL=pen.js
</script>
<script type="text/javascript">
var Status='%Switch1.status%';
if (Status!==0){
function(){
$(this).toggleClass('button-active');
};
}
</script>
</body></html>