JavaScript/Ajax鼠标可选对象

我想实现一个基于JavaScript/Ajax的客户端脚本/模块，它允许我执行以下操作：

在html页面上布置一个“平面图”，用彩色矩形表示“房间”

在每个矩形上，我需要显示它的编号、状态（空闲或占用）以及剩余的时间（时间计数将在服务器上完成，因此是Ajax）

---

我需要的是一份教程/手册的建议，说明上述图形部分；这就是如何绘制鼠标可选择的矩形；响应鼠标事件，更新文本字段。

Flash和动作脚本更适合该任务

---

如果只想使用Javascript，我建议将flor plan生成为一组具有特定ID（如房间ID）的div，并在MouseOver（可能是overkill）或onclick上执行AJAX状态请求，因此您需要能够创建可单击的矩形。您可能希望使用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 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;
}

有一些测试实现正在运行

/////////////// 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;
}