VPF::Настройки плагина maphilight - Форум программистов

newacc2010

Дата 28.2.2013, 09:37 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 28.2.2013

Репутация: нет
Всего: нет

Добрый день!

вживую: http://jsfiddle.net/dRz9U/162/

Суть такова: есть изображение (план помещений на этаже), каждое помещение имеет два состояния (занято/свободно). Изображение порезано на области с помощью map area, для каждой области есть своя кнопка, (занять/освободить). С помощью кнопок областям должна задаваться красная подсветка (занято) или зеленая (свободно). Нашел jQuery плагин maphilight, который позволяет подсвечивать области изображения, но он работает не совсем корректно. С javascript раньше не был знаком.

Код


<img class="map" src="http://i54.fastpic.ru/big/2013/0228/11/73d7f26fd495e7631003cf6251af2d11.png" alt="" usemap="#mainmap" />
  <map name="mainmap">
      
    <area id="1room" data-areanum="room1" shape="poly"
coords="116, 93, 164, 94, 164, 131, 157, 131, 157, 157, 116, 157" title="1 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="2room" data-areanum="room2" shape="rect"
coords="197, 93, 264, 153" title="2 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="3room" data-areanum="room3" shape="rect" coords="270, 94, 365, 152" title="3 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="4room" data-areanum="room4" shape="rect" coords="370, 93, 470, 153" title="4 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
          
    <area id="5room" data-areanum="room5" shape="rect" coords="474, 93, 537, 153" title="5 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
             
    <area id="6room" data-areanum="room6" shape="poly" coords="587, 154, 587, 126, 568, 126, 568, 94, 540, 94, 540, 142, 572, 142, 572, 154" title="6 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>

    <area id="7room" data-areanum="room7" onclick="ahah_change_index(title)" shape="poly" coords="629, 155, 629, 107, 623, 107, 623, 94, 572, 94, 572, 124, 591, 125, 591, 155" 
title="7 комната" data-maphilight='{"stroke":true,"strokeColor":"ff0000","strokeOpacity":0.6,"fillColor":"ff0000","fillOpacity":0.1}'>
             
  </map>        

    
<form id="filter_form" action="" method="get" accept-charset="UTF-8">
<div><input type="hidden" name="utf8" /></div>
    <fieldset class="filter_form_fieldset areas">    
        <p class="area_check"><input id="room1" name="areas[]" type="checkbox" />
            <label for="room1"><p1>1 комната</p1></label></p>
        
        <p class="area_check"><input id="room2" name="areas[]" type="checkbox" />
            <label for="room2"><p1>2 комната</p1></label></p>
        
        <p class="area_check"><input id="room3" name="areas[]" type="checkbox" />
            <label for="room3"><p1>3 комната</p1></label></p>
        
        <p class="area_check"><input id="room4" name="areas[]" type="checkbox" />
            <label for="room4"><p1>4 комната</p1></label></p>

        <p class="area_check"><input id="room5" name="areas[]" type="checkbox" />
            <label for="room5"><p1>5 комната</p1></label></p>

        <p class="area_check"><input id="room6" name="areas[]" type="checkbox" />
            <label for="room6"><p1>6 комната</p1></label></p>

        <p class="area_check"><input id="room7" name="areas[]" type="checkbox" />
            <label for="room7"><p1>7 комната</p1></label></p>        
    </fieldset>
</form>

Код


$(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) при наведении на область должна подсвечиваться только её граница

Также есть задумка хранить значения областей (занято/свободно) в бд. Т.е. при клике на кнопку меняется значение в базе данных и при повторной загрузке страницы занятые комнаты изначально подсвечиваются красным, а свободные - зеленым. Я понимаю, что для этого нужно для каждой области указать какойнибудь атрибут free/busy, затем создать табличку и полями id комнаты и полем состояние комнаты. Не могу сообразить как конкретно это реализовать, используя уже существующие наработки.

Помогите, пожалуйста, подобрать подходящее решение!

Это сообщение отредактировал(а) newacc2010 - 28.2.2013, 10:29

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »