Forum Communauté Jeedom

Code : Tout sélectionner

  

  
<div class="cmd" style="mini-height: 80px;width: 80px;"data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" >
<div style="margin-bottom:20px;font-size : 15px;#hideCmdName#">#valueName#</div>

  <center>
<input class="iconCmd#uid#" type="checkbox" />
        </center>
          <style>
    /**            
                        input[type='checkbox'] {
**/
input[class=iconCmd#uid#]{
	cursor: pointer;
	text-indent: -9999px;
	width: 50px;
	height: 30px;
background:#cmdColor#;

	border-radius: 50px;
	position: relative;

  -webkit-appearance: button;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.2);
  transition: background-color 1s;
}
/**
       input[type='checkbox']:after{     
**/
input[class=iconCmd#uid#]:after{  
  content: "";
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
	width: 20px;
	height: 20px;
  background-color: #fdfdfd;
  margin: 4%;
  border-radius: 40px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  
  background: rgb(255,255,255);
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 );
	transition: 0.3s;
// transition: .5s all;
}
/**
            input[type='checkbox']:checked{
            **/
input[class=iconCmd#uid#]:checked{  
  background-color: #79d122;
} 
/** 
            input[type='checkbox']:checked:after {
            **/
input[class=iconCmd#uid#]:checked:after{  
  left: 45%;
}
            </style>
    <script>

 $('.iconCmd#id#').empty();
if ('#state#' == '0' || '#state#' == 0 || '#state#' == '') {
                 $('.iconCmd#uid#').prop('checked', false);
        }else {
               $('.iconCmd#uid#').prop('checked', true);
          }
             
      $('.iconCmd#uid#').on('click', function() {
             if ( $('.iconCmd#uid#').is( ":checked" ) ){
                jeedom.cmd.execute({id: '#id#', value: ('1')});
            } else {
                jeedom.cmd.execute({id: '#id#', value: ('0')});
          }
        });
      
    </script>
</div>