Как я могу сделать так, чтобы области графической карты действовали как флажки? - PullRequest
Новая
       19

Как я могу сделать так, чтобы области графической карты действовали как флажки?

1 голос
/ 06 января 2012

Я дурацкий начинающий программист и уже несколько месяцев пытаюсь заставить это работать!

У меня есть приложение, которое показывает разные места в городе.

На главной странице отображается карта (.png города с использованием палитры) и ее разбивка на разные области.

На странице также есть несколько фильтров-флажков для сужения результатов, отображаемых по областям, которые отображаются в виде пинов на карте .png. Поэтому, если я установлю флажок «Север», будут отображаться только места на севере города.

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

Флажки фильтра (с помощью плагина jQuery UI) 

<script>  
  $(function() {
    $(".areas").buttonset();
  }); 
</script>

<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="Filter"/></p2>
    </div>
  <% end %>
</div>

Индексный метод 

def index
  if 
    @places = Place.with_area(params[:areas]).order("case plan when 'premium' then 1 else 0 end desc, average_rating DESC").all
  else
    @places = Place.all
  end
end

Показанные результаты отображаются как частичные: 

<%= render :partial => 'place', :collection => @places %>

Карта изображений (с помощью плагина jquery maphighlight) 

<script> 
 $(function() {
    $('.map').maphilight();
  });
</script>

<div class="map_container">

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

  <map name="mainmap">
    <area id="north" 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" 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'" >
  </map>              
</div>

Итак, у меня есть рабочие флажки фильтра, и карта изображений правильно подсвечивается при каждом наведении области, как я могу связать 2?

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

Ответы [ 2 ]

2 голосов
/ 14 января 2012

Я подготовил простую демонстрацию того, что вы можете сделать:

http://jsfiddle.net/adaz/vUuJL/2/

Код довольно прост!

Я не уверен, что выправда нужны радиокнопки.

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

Хотя я не могу помочь вам с любым из Ruby, который может быть задействован, вы, вероятно, найдете два метода jQuery .trigger () и .on () полезно.

Вы можете добавить обработчик onclick для каждой области карты, который при нажатии вызывает событие click на соответствующем флажке.

onclick="$('#corresponding_checkbox').trigger('click')"

Или, без использования атрибута onclick, 

$('#east').on('click', function() {
    $('#east_checkbox').trigger('click');
});

Вам придется поиграться с селекторами, так как я не прошелРубин, чтобы расшифровать их.

Надеюсь, что вы укажете в правильном направлении.

...