Jquery灯光开关设置启动状态
Jquery light switch setting starting state
我使用这个设置来显示灯是打开还是关闭:
http://www.jquery2dotnet.com/2012/11/jquery-light-switch-on-off-using-css3.html我如何选择哪个开关状态启动?
到目前为止,我在数据库中有一个lightvalue, 1 = on 0 = off。我使用sql来检索这个值并加载相应的灯泡。
但是我该如何使用开关呢?我没有switch1和switch2,所以我可以根据lightvalue加载我想要的那个。
下面是代码:light.js
var lightVal = document.getElementById("light-bulb2");
function getLightValue(r) {
var lightValue;
$.ajax({
url: 'Database/checklight.php',
type: "POST",
data: {room: r},
success: function(data) {
data1 = JSON.parse(data);
$.each(data1, function(key, val) {
lightValue = val.light;
lightVal.style.opacity = lightValue;
});
},
async: false
});
}
function updateLight(val, rom) {
$.ajax({
url: 'Database/updateLight.php',
type: "POST",
data: {light: val, room: room},
success: function(data) {
data2 = JSON.parse(data);
if (data2 < 1) {
alert("Not Updated");
}
},
async: false
});
}
light.php
<div id="temptre">
<div id="light-bulb" class="off ui-draggable" >
<div id="light-bulb2" style="opacity: 0">
<script src="JS/light.js">
</script>
</div></div>
<div class="cube-switch">
<span class="switch">
<span class="switch-state off">Off</span>
<span class="switch-state on">On</span>
</span>
</div>
</div>
<script>
getLightValue(<?php echo $_SESSION['sess_room']; ?>);
$('.cube-switch .switch').click(function() {
if ($('.cube-switch').hasClass('active')) {
$('.cube-switch').removeClass('active');
$('#light-bulb2').css({'opacity': '0'});
updateLight(0, <?php echo $_SESSION['sess_room']; ?>);
} else {
$('.cube-switch').addClass('active');
$('#light-bulb2').css({'opacity': '1'});
updateLight(1, <?php echo $_SESSION['sess_room']; ?>);
}
});
</script>
如果你想让开关工作,那么你需要触发click
事件,这样它就可以被打开和关闭(基于值)
// call(trigger) click event on success
function updateLight(val, rom) {
$.ajax({
url: 'Database/updateLight.php',
type: "POST",
data: {
light: val,
room: room
},
success: function (data) {
data2 = JSON.parse(data);
if (data == 1) {
$('.cube-switch .switch').trigger('click', [{
forceStart: true
}]);
} else {
$('.cube-switch .switch').trigger('click', [{
forceStart: false
}]);
}
},
async: false
});
}
// change your click event to handle the passed argument
$('.cube-switch .switch').click(function (e, data) {
if (typeof data !== 'undefined') {
if (data.forceStart) {
// remove the active class, so that it can add the active class later to match switch on
$('.cube-switch').removeClass('active');
} else {
$('.cube-switch').addClass('active')
}
}
if ($('.cube-switch').hasClass('active')) {
$('.cube-switch').removeClass('active');
$('#light-bulb2').css({
'opacity': '0'
});
updateLight(0, <? php echo $_SESSION['sess_room']; ?> );
} else {
$('.cube-switch').addClass('active');
$('#light-bulb2').css({
'opacity': '1'
});
updateLight(1, <? php echo $_SESSION['sess_room']; ?> );
}
});
JSFIDDLE: http://jsfiddle.net/4rkQZ/152/
我不是很擅长php,但给div.cube-switch一个'active'类,如果它是on的,并删除内联不透明度样式(整理php的一切手段!)
<div href="" class="cube-switch <?php if ($on) { echo ' active'; } ?>">
<span class="switch">
<span class="switch-state off">Off</span>
<span class="switch-state on">On</span>
</span>
</div>
<div id="light-bulb" class="off ui-draggable">
<div id="light-bulb2" <?php if (!$on) { echo 'style="opacity:0"'; } ?>></div>
</div>
相关文章:
- 我的jQuery插件参数没有正确启动,遇到了问题
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 事件和状态
- 从控制器返回后Ajax启动事件激发
- Youtube API - 某些视频卡在未启动 (-1) 状态
- Sencha Touch和Cordova应用程序在设备上运行时卡在启动状态
- 按钮启动为活动状态
- 鼠标在全屏+指针锁定状态下按下任何键时都不会启动
- 检测浏览器窗口是否处于活动状态,并在窗口再次处于活动状态后启动事件[JavaScript]
- React:在设置状态之前启动初始渲染(通过ajax)
- 如何仅在启动选项卡处于活动状态时加载启动选项卡内容
- 嵌套状态(角度ui)的父作用域未启动
- 每当我执行推送状态时,状态更改就会启动
- 当我的angularjs应用程序启动时,有没有办法防止加载初始状态
- 如何用JavaScript停止(悬停子,父悬停状态启动)
- 如何让ui-router总是在给定的状态下启动
- 启动按钮加载状态
- Jquery灯光开关设置启动状态
- 如果子控制器处于相同状态,则angular ui路由器-嵌套控制器-父控制器将启动两次
- Angular Ionic UI-Router - 如何确保在嵌套状态下启动应用程序时加载所有父视图