js/jquery.ui.imagemap.js

   1 /*
   2  * jQuery UI ImageMap 1.0.0 beta
   3  *
   4  * Copyright 2011, Călin-Andrei Burloiu
   5  * Dual licensed under the MIT or GPL Version 2 licenses.
   6  * http://jquery.org/license
   7  *
   8  * Depends:
   9  *   jquery.ui.core.js
  10  *   jquery.ui.widget.js
  11  */
  12 (function( $, undefined ) {
  13
  14 $.widget( "ui.imagemap", {
  15         version: "1.0.0 beta",
  16         options: {
  17
  18         },
  19
  20         _create: function() {
  21                 var widget = this;
  22
  23                 $('div.ui-imagemap-image', widget.element)
  24                         .css('position', 'relative')
  25                         .css('width', $('div.ui-imagemap-image > img', widget.element).css('width'))
  26                         .css('height', $('div.ui-imagemap-image > img', widget.element).css('height'))
  27                         ;
  28
  29                 widget.$marker = $('<div></div>')
  30                         .appendTo('div.ui-imagemap-image', widget.element);
  31                 widget.$marker
  32                         .css('position', 'absolute')
  33                         .css('outline', '2px solid red')
  34                         .css('background', 'transparent');
  35
  36                 $('.ui-imagemap-title', widget.element)
  37                         .click(function() {
  38                                 var $title = $(this);
  39
  40                                 if (typeof $title.data('top') == 'undefined')
  41                                         return false;
  42                                 if (typeof $title.data('left') == 'undefined')
  43                                         return false;
  44
  45                                 var top = $title.data('top')
  46                                 var left = $title.data('left');
  47                                 var width, height;
  48
  49                                 if (typeof $title.data('width') == 'undefined')
  50                                         width = '1px';
  51                                 else
  52                                         width = $title.data('width');
  53                                 if (typeof $title.data('height') == 'undefined')
  54                                         height = '1px';
  55                                 else
  56                                         height = $title.data('height');
  57
  58                                 widget.$marker
  59                                         .css('top', top)
  60                                         .css('left', left)
  61                                         .css('width', width)
  62                                         .css('height', height);
  63
  64                         });
  65         },
  66
  67         _destroy: function() {
  68                 this.element.html('');
  69         },
  70
  71         _setOption: function( key, value ) {
  72                 // TODO
  73                 if ( key === "TODO" ) {
  74
  75                 }
  76
  77                 this._super( "_setOption", key, value );
  78         }
  79 });
  80
  81 })( jQuery );