JavaScript / Ajax мышь выбираемые объекты

Question

Я хочу реализовать клиентский скрипт / модуль на основе JavaScript / Ajax, который позволил бы мне сделать следующее:

1. На html-странице выложить «план этажа» с цветными прямоугольниками, обозначающими «комнаты»
2. На каждом прямоугольнике мне нужно отобразить его номер, его статус (незанятый или занятый) и оставшееся время, если оно занято (отсчет времени будет производиться на сервере, отсюда и Ajax)

Что мне нужно, так это рекомендация учебника / руководства, объясняющего графическую часть вышеупомянутого; именно так нарисовать мышью выбираемые прямоугольники; отвечать на события мыши, обновлять текстовые поля.

Answer 1

Так что вам нужна возможность создавать кликабельные прямоугольники.Возможно, вы захотите использовать jQuery, поскольку это очень быстрая и гибкая библиотека для манипуляций с dom.Каждый элемент dom способен захватывать событие dom (например, щелчок).План этажа звучит как хороший пример использования правила position : absolute css.Поэтому, возможно, подумайте об этом следующим образом:

/**
 * Room class represents the room.
 */
var url = "/room/rent";
function Room( id, dimensions, position, color ) {
  // keep track of the state inside the closure
  var status = 'vacant',
      id = 0,
      dom = $('#room-template').clone().attr('id', 'room-' + id ),
      remaining = null;

  function start_timer( callback ){

    var room = this;
    // the url would be the end point in your server to get the time to expire
    $.post( url, { id : id }, {
      success : function occupied( end ){
        start = new Date().getTime();
        if( start < end ){
          remaining = end - start;
          room.render();
          setTimeout( occupied, 1, end );
          return;
        }
        callback.call(room);
      },
      error : function(){
        // since we know we don't have anything working 
        // we can just try and fake it with 5 seconds
        end = new Date().getTime() + 5000;
        function occupied( end ){
          start = new Date().getTime();
          if( start < end ){
            remaining = end - start;
            room.render();
            setTimeout( occupied, 1, end );
            return;
          }
          callback.call(room);
        }
      }
    });
  }
  this.render = function(){
    dom.find('status').text(status)
       .find('remaining').text(remaining || '');
  };
  this.enter = function( event ){
    status = 'occupied';
    start_timer( this.exit );
  };
  this.exit = function(){
    remaining = null;
    status = 'vacant';
    this.render();
  };
  dom.css({'background-color': color, 
            height : dimensions.height, 
            width : dimensions.width,
            top : position.top,
            left : position.left})
     .appendTo('#floor-plan')
     .bind('click', this.enter)
     .find('.id').text('id:' + id);
}

var x = new Room (0, {width: 100, height: 100}, {top: 20, left: 30}, 'red');

вышеупомянутый JavaScript поможет вам начать работу (требуется jQuery, хотя его легко заменить).После этого вам нужно получить базовый HTML-шаблон.

//////////////////////HTML TEMPLATE////////////////////////////

<div id="room-template" class="room">
  <span class="id"></span>
  <span class="status"></span>
  <span class="remaining"></span>
</div>

Отлично, теперь, когда все готово, вам нужен базовый стиль для комнаты.

/////////////// CSS FILE ///////////////
.room {
  position : absolute;
}

Итак, теперь у нас естьБазовый скелет о том, как это может работать, мы могли бы реализовать с некоторыми данными, подобными этим:

var floor_plan = [
  {width : 100, height: 100, top : 0, left : 0, color : 'red' },
  {width : 100, height: 100, top : 0, left : 100, color : 'blue' },
  {width : 100, height: 100, top : 0, left : 200, color : 'gray' },
  {width : 100, height: 100, top : 100, left : 0, color : 'pink' },
  {width : 100, height: 100, top : 100, left : 100, color : 'orange' },
  {width : 100, height: 100, top : 100, left : 200, color : 'green' }
];

for( var i = 0, room; room = floor_plan[i]; i++) {
  var x = new Room( i, 
                   {width : room.width, height : room.width}, 
                   {top : room.top, left : room.left}, 
                   room.color);
  floor_plan[i] = x;
}

Существует некоторая тестовая реализация, работающая в http://jsfiddle.net/Wurd5/4/

Answer 2

Flash и Action Script были бы более подходящими для этой задачи ...

Если вы хотите придерживаться только Javascript, я предлагаю сгенерировать план flor в виде набора div с конкретными идентификаторами (например, ID комнаты) и выполнитьAJAX-запрос на статус onmouseover (может быть избыточным) или onclick