Bonjour,
Je cherche à faire un widget qui ressemble à ca :
Pour le faire, je me suis largement inspirer du code de Salvialf
Mon code actuel :
<div class="cmd #history# tooltips cmd-widget" data-type="action" data-subtype="other" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#valueName#</div>
</div>
<center>
<span class="iconCmd" style= "font-size: 3.3em;"></span>
</center>
<!--<div id="iconCmdAction" class="cursor tooltips"></div>-->
<div><label class="switch#uid#">
<input class="toggle#uid#" type="checkbox">
<span class="slider#uid#"></span>
</label></div>
<span class="timeCmd label label-default" data-type="info" data-cmd_id="#value_id#"></span>
<style>
.switch#uid# {
position: relative;
display: inline-block;
width: 35px; /* 60px */
height: 17px; /* 34px */
}
.switch#uid# input {
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
}
.slider#uid# {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
border-radius: 14px; /* 25px */
}
.slider#uid#:before {
position: absolute;
content: "";
height: 14px; /* 26px */
width: 14px; /* 26px */
left: 3px; /* 4px */
bottom: 2px; /* 4px */
background-color: white;
-webkit-transition: .4s;
transition: .4s;
border-radius: 16px; /* 25px */
}
input:checked + .slider#uid# {
background-color: green;
border-radius: 14px; /* 25px */
}
input:focus + .slider#uid# {
box-shadow: 0 0 1px green;
border-radius: 14px; /* 25px */
}
input:checked + .slider#uid#:before {
-webkit-transform: translateX(15px); /* 26px */
-ms-transform: translateX(15px); /* 26px */
transform: translateX(15px); /* 26px */
border-radius: 14px; /* 25px */
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
var valueH = is_numeric('#hauteur#') ? parseFloat('#hauteur#'):75;
var valueL = is_numeric('#largeur#') ? parseFloat('#largeur#'):75;
var paramTaille = 'height='+valueH+'px width='+valueL+'px';
var valueType = ('#type#' !='#'+'type#') ? "#type#":"defaut";
var valueFile = ('#extension#' !='#'+'extension#') ? "#extension#":"png";
var cmd = $('.cmd[data-cmd_id=#id#]');
if (_options.display_value == '1' || _options.display_value >= 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
cmd.attr('data-state','on')
if (jeedom.cmd.normalizeName('#name#') == 'on') {
$('.cmd[data-cmd_id=#id#]').hide();
$('.toggle#uid#').prop('checked', false);
}else{
$('.cmd[data-cmd_id=#id#]').show();
$('.toggle#uid#').prop('checked', true); }
} else {
cmd.attr('data-state','off');
if (jeedom.cmd.normalizeName('#name#') == 'off') {
$('.cmd[data-cmd_id=#id#]').hide();
$('.toggle#uid#').prop('checked', true);
}else{
$('.cmd[data-cmd_id=#id#]').show();
$('.toggle#uid#').prop('checked', false); }
}
jeedom.cmd.displayDuration(_options.valueDate,cmd.find('.timeCmd'));
cmd.attr('title', '#name_display#')
}
jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
$('.cmd[data-cmd_uid=#uid#] #iconCmdAction').off().on('click', function () {
jeedom.cmd.execute({id: '#id#'});
});
</script>
</div>
Mes deux problémes :
1/ il y a un tooltip avec un icone et je souhaiterais l’enlever
2/ Je souhaiterais afficher directement ce même icone mais je ne sais pas faire …
Merci d’avance pour votre aide