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                         .hide()
  33                         .css('position', 'absolute')
  34                         .css('outline', '2px solid red')
  35                         .css('background', 'transparent');
  36
  37                 $('.ui-imagemap-title', widget.element)
  38                         .click(function() {
  39                                 var $title = $(this);
  40
  41                                 if (typeof $title.data('top') == 'undefined')
  42                                         return false;
  43                                 if (typeof $title.data('left') == 'undefined')
  44                                         return false;
  45
  46                                 var top = $title.data('top');
  47                                 var left = $title.data('left');
  48                                 var width, height;
  49
  50                                 if (typeof $title.data('width') == 'undefined')
  51                                         width = '1px';
  52                                 else
  53                                         width = $title.data('width');
  54                                 if (typeof $title.data('height') == 'undefined')
  55                                         height = '1px';
  56                                 else
  57                                         height = $title.data('height');
  58
  59                                 widget.$marker
  60                                         .show()
  61                                         .css('top', top)
  62                                         .css('left', left)
  63                                         .css('width', width)
  64                                         .css('height', height);
  65
  66                         });
  67         },
  68
  69         _destroy: function() {
  70                 this.element.html('');
  71         },
  72
  73         _setOption: function( key, value ) {
  74                 // TODO
  75                 if ( key === "TODO" ) {
  76
  77                 }
  78
  79                 this._super( "_setOption", key, value );
  80         }
  81 });
  82
  83 })( jQuery );