2

再会！

直播：http: //jsfiddle.net/dRz9U/162/

关键是：有一个图像（在房屋的平面图上），每个房间都有两种状态（占用/空闲）。图片按地图区域切割成区域，每个区域都有自己的按钮（取/放）。使用区域应设置为红灯（忙碌）或绿灯（空闲）。找到了一个 jQuery 插件 maphilight，它可以高亮图像的区域，但效果不是很好。用 javascript 以前并不熟悉。

$(function() {
$(".areas").buttonset();
});

$(function() {
$('.map').maphilight();
$('#1room, #2room, #3room, #4room, #5room, #6room, #7room').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var data = $this.mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $this.data('maphilight', data).trigger('alwaysOn.maphilight');
});
});

$(function() {
var $area = $('area');
$area.click(function(){
    var $checkbox = $('#' + $(this).data("areanum"));
    $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
});
$('label').click(function () {
    $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
    return false;
}); 
});

请帮我纠正以下问题：

1) 只有当您按下相应的按钮时，灯光区域才会起作用。单击区域本身时如何消除背光？

2）当您移动到该区域时，应仅由其边界照亮

还有一个想法，将值区域（占用/空闲）保留到数据库中。即当您单击按钮更改数据库中的值并重新加载页面占用的房间最初以红色突出显示，而免费 - 绿色。我了解它需要为每个区域指定属性 kakoynibud 空闲/忙碌，然后创建标签和字段 id 房间和字段状态房间。我无法弄清楚如何使用已经存在的解决方案来实现它。

请帮我找到正确的解决方案！

4

0 回答 0