Как сохранить подсвеченное состояние карты изображения при перезагрузке страницы? - PullRequest
Новая
       5

Как сохранить подсвеченное состояние карты изображения при перезагрузке страницы?

0 голосов
/ 20 января 2012

В моем приложении у меня есть изображение, разделенное на несколько поли фигур.Каждая фигура имеет соответствующий флажок (находится в форме с кнопкой отправки), и вместе они позволяют пользователю фильтровать показанные результаты в зависимости от того, какая область изображения была выбрана.

Я использую плагин dumbFormState для сохраненияфлажки после отправки формы и перезагрузки страницы, но выбранные фигуры в карте изображений теряют свое выделенное состояние.

Как сделать так, чтобы фигуры сохраняли свое «проверенное» состояние, как флажки при перезагрузке страницы?

Вот мой JavaScript: 

<script>
  jQuery(function(){ // ensure dom is loaded first
    jQuery('#filter_form').dumbFormState();
  });  

  $(function() {
    $('.map').maphilight();  

    $('#north, #east, #south, #west').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() {
    $('area').click(function(){
      var name = $(this).data("areanum");
      var $checkbox = $('#' + name);
      $checkbox.attr('checked', !$checkbox.attr('checked'));
    });       
  });
</script>

index.html.erb 

<div class="map_container">

  <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %>

  <map name="mainmap">
    <area id="north" data-areanum="area-42" shape="poly" 
      coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="east" data-areanum="area-44" shape="poly" 
      coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="south" data-areanum="area-41" shape="poly" 
      coords="182,316,178,321,188,329,200,353,276,274,243,248" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="west" data-areanum="area-48" shape="poly" 
      coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >
  </map>              
</div>

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>

    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
        <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p>
      <% end %>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
  <% end %>
</div>

Что генерируется в браузере 

<div class="map_container">

  <img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" />

  <map name="mainmap">
    <area id="north" data-areanum="area-42" shape="poly" 
      coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="east" data-areanum="area-44" shape="poly" 
      coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >

    <area id="south" data-areanum="area-41" shape="poly" 
      coords="182,316,178,321,188,329,200,353,276,274,243,248" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >


    <area id="west" data-areanum="area-48" shape="poly" 
      coords="286,276,276,275,200,354,218,390,323,341,325,321,321,312" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >        
  </map>              
</div>

<div class="filter_options_container">
  <form accept-charset="UTF-8" action="" id="filter_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>    

    <fieldset class="filter_form_fieldset areas">
        <p class="area_check"><input id="area-41" name="areas[]" type="checkbox" value="41" />
        <label for="area-41"><p1>south</p1></label></p>    
        <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" />
        <label for="area-42"><p1>north</p1></label></p>
        <p class="area_check"><input id="area-44" name="areas[]" type="checkbox" value="44" />
        <label for="area-44"><p1>east</p1></label></p>
        <p class="area_check"><input id="area-48" name="areas[]" type="checkbox" value="48" />
        <label for="area-48"><p1>west</p1></label></p>

    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
</form></div>

Если я не упомянул что-либо из моего вопроса, пожалуйста, прокомментируйте.

Спасибо за любую помощь, она очень ценится!

1 Ответ

0 голосов
/ 20 января 2012

Возможно, вы захотите сериализовать ваши данные и сохранить их в куки или LocalStorage в событии window.onbeforeunload. В document.onload вы должны проверить сохраненные данные, если они есть, вы примените их, затем удалите.

...