[英]How to persist an imagemap's hilighted state on page reload?
在我的應用程序中,我將圖像映射圖拆分為多個多邊形。 每個形狀都有一個對應的復選框(位於帶有提交按鈕的表單中),它們一起使用戶可以根據已選擇的圖像圖區域過濾顯示的結果。
我使用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="✓" /></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>
如果我沒有任何問題,請發表評論。
非常感謝您的幫助!
您可能需要序列化數據,然后將其保存到window.onbeforeunload
事件中的cookie或LocalStorage中。 在document.onload
,應檢查存儲的數據,如果有,請應用然后將其刪除。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.