按钮点击图像maphilight

时间:2013-02-28 09:24:44

标签: jquery

美好的一天!

直播: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房间和字段状态房间。使用现有的解决方案,我无法弄清楚如何实现它。

请帮我找到合适的解决方案!

0 个答案:

没有答案