選択した要素に枠を付けるサンプル

jquery-marking.js

// TODO ラベルの位置
// TODO Windowリサイズ

;(function($) {

  function mark($target, options) {
    var defaults = {
      'border_width': '2px',
      'border_color': '#f00',
      'class_prefix': 'jqmark',
      'label': '',
      'label_color': '#fff',
      'label_bgcolor': '#333',
      'root': 'body',
    };
    options = options || {};
    var opt = {};
    for(var key in defaults) {
      opt[key] = options[key] || defaults[key];
    }

    var size = {
      top: $target.offset().top,
      left: $target.offset().left,
      height: $target.height(),
      width: $target.width(),
    };
   
    var prefix = opt['class_prefix'];
    var borderClass = prefix + '-border';
    var bt = $('<div class="' + borderClass + ' ' + prefix + '-top">');
    var bb = $('<div class="' + borderClass + ' ' + prefix + '-bottom">');
    var bl = $('<div class="' + borderClass + ' ' + prefix + '-left">');
    var br = $('<div class="' + borderClass + ' ' + prefix + '-right">');

    $(opt['root']).append(bt).append(bb).append(bl).append(br);
    $('.' + borderClass).css({
      'position': "absolute",
      'background': opt['border_color'],
    });
   
    var borderWidth = opt['border_width'];
    bt.css({
      "top": size.top,
      "left": size.left,
      "height": borderWidth,
      "width": size.width,
    });
    bb.css({
      "top": size.top + size.height,
      "left": size.left,
      "height": borderWidth,
      "width": size.width,
    });
    bl.css({
      "top": size.top,
      "left": size.left,
      "height": size.height,
      "width": borderWidth,
    });
    br.css({
      "top": size.top,
      "left": size.left + size.width,
      "height": size.height,
      "width": borderWidth,
    });

    if(!opt['label']) {
      return;
    }

    var labelClass = prefix + '-label';
    var lb = $('<div class="' + labelClass + '">');
    lb.text(opt['label']);

    $(opt['root']).append(lb);
    lb.css({
      'position': 'absolute',
      'top': size.top + size.height - lb.height(),
      'left': size.left + size.width - lb.width(),
      'color': opt['label_color'],
      'background': opt['label_bgcolor'],
    });
  }

  $.fn.extend({
    marking: function(opt) {
      mark(this, opt);
      return this;
    },
  });

}(jQuery));

mark.js

// USAGE: mark('nav ul')

function mark(selector) {
  var $target = $(selector);
  var size = {
    top: $target.offset().top,
    left: $target.offset().left,
    height: $target.height(),
    width: $target.width(),
  };

  var bt = $('<div class="ext-border top">');
  var bb = $('<div class="ext-border bottom">');
  var bl = $('<div class="ext-border left">');
  var br = $('<div class="ext-border right">');
  $('body').append(bt).append(bb).append(bl).append(br);
  $('.border').css({
    'position': "absolute",
    'background': "red",
  });

  bt.css({
    "top": size.top,
    "left": size.left,
    "height": "2px",
    "width": size.width,
  });
  bb.css({
    "top": size.top + size.height,
    "left": size.left,
    "height": "2px",
    "width": size.width,
  });
  bl.css({
    "top": size.top,
    "left": size.left,
    "height": size.height,
    "width": "2px",
  });
  br.css({
    "top": size.top,
    "left": size.left + size.width,
    "height": size.height,
    "width": "2px",
  });
}