source: branches/version-2_12-multilang/html/js/jquery.tipsy.js @ 20546

Revision 20546, 7.4 KB checked in by pineray, 14 years ago (diff)

refs #1062
お気に入りに登録した際、その旨のTipsをボタンのまわりに表示するように変更。

Line 
1// tipsy, facebook style tooltips for jquery
2// version 1.0.0a
3// (c) 2008-2010 jason frame [[email protected]]
4// released under the MIT license
5
6(function($) {
7   
8    function Tipsy(element, options) {
9        this.$element = $(element);
10        this.options = options;
11        this.enabled = true;
12        this.fixTitle();
13    }
14   
15    Tipsy.prototype = {
16        show: function() {
17            var title = this.getTitle();
18            if (title && this.enabled) {
19                var $tip = this.tip();
20               
21                $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
22                $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
23                $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
24               
25                var pos = $.extend({}, this.$element.offset(), {
26                    width: this.$element[0].offsetWidth,
27                    height: this.$element[0].offsetHeight
28                });
29               
30                var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight;
31                var gravity = (typeof this.options.gravity == 'function')
32                                ? this.options.gravity.call(this.$element[0])
33                                : this.options.gravity;
34               
35                var tp;
36                switch (gravity.charAt(0)) {
37                    case 'n':
38                        tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
39                        break;
40                    case 's':
41                        tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
42                        break;
43                    case 'e':
44                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
45                        break;
46                    case 'w':
47                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
48                        break;
49                }
50               
51                if (gravity.length == 2) {
52                    if (gravity.charAt(1) == 'w') {
53                        tp.left = pos.left + pos.width / 2 - 15;
54                    } else {
55                        tp.left = pos.left + pos.width / 2 - actualWidth + 15;
56                    }
57                }
58               
59                $tip.css(tp).addClass('tipsy-' + gravity);
60               
61                if (this.options.fade) {
62                    $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
63                } else {
64                    $tip.css({visibility: 'visible', opacity: this.options.opacity});
65                }
66            }
67        },
68       
69        hide: function() {
70            if (this.options.fade) {
71                this.tip().stop().fadeOut(function() { $(this).remove(); });
72            } else {
73                this.tip().remove();
74            }
75        },
76       
77        fixTitle: function() {
78            var $e = this.$element;
79            if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
80                $e.attr('original-title', $e.attr('title') || '').removeAttr('title');
81            }
82        },
83       
84        getTitle: function() {
85            var title, $e = this.$element, o = this.options;
86            this.fixTitle();
87            var title, o = this.options;
88            if (typeof o.title == 'string') {
89                title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
90            } else if (typeof o.title == 'function') {
91                title = o.title.call($e[0]);
92            }
93            title = ('' + title).replace(/(^\s*|\s*$)/, "");
94            return title || o.fallback;
95        },
96       
97        tip: function() {
98            if (!this.$tip) {
99                this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
100            }
101            return this.$tip;
102        },
103       
104        validate: function() {
105            if (!this.$element[0].parentNode) {
106                this.hide();
107                this.$element = null;
108                this.options = null;
109            }
110        },
111       
112        enable: function() { this.enabled = true; },
113        disable: function() { this.enabled = false; },
114        toggleEnabled: function() { this.enabled = !this.enabled; }
115    };
116   
117    $.fn.tipsy = function(options) {
118       
119        if (options === true) {
120            return this.data('tipsy');
121        } else if (typeof options == 'string') {
122            var tipsy = this.data('tipsy');
123            if (tipsy) tipsy[options]();
124            return this;
125        }
126       
127        options = $.extend({}, $.fn.tipsy.defaults, options);
128       
129        function get(ele) {
130            var tipsy = $.data(ele, 'tipsy');
131            if (!tipsy) {
132                tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
133                $.data(ele, 'tipsy', tipsy);
134            }
135            return tipsy;
136        }
137       
138        function enter() {
139            var tipsy = get(this);
140            tipsy.hoverState = 'in';
141            if (options.delayIn == 0) {
142                tipsy.show();
143            } else {
144                tipsy.fixTitle();
145                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
146            }
147        };
148       
149        function leave() {
150            var tipsy = get(this);
151            tipsy.hoverState = 'out';
152            if (options.delayOut == 0) {
153                tipsy.hide();
154            } else {
155                setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
156            }
157        };
158       
159        if (!options.live) this.each(function() { get(this); });
160       
161        if (options.trigger != 'manual') {
162            var binder   = options.live ? 'live' : 'bind',
163                eventIn  = options.trigger == 'hover' ? 'mouseenter' : 'focus',
164                eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
165            this[binder](eventIn, enter)[binder](eventOut, leave);
166        }
167       
168        return this;
169       
170    };
171   
172    $.fn.tipsy.defaults = {
173        delayIn: 0,
174        delayOut: 0,
175        fade: false,
176        fallback: '',
177        gravity: 'n',
178        html: false,
179        live: false,
180        offset: 0,
181        opacity: 0.8,
182        title: 'title',
183        trigger: 'hover'
184    };
185   
186    // Overwrite this method to provide options on a per-element basis.
187    // For example, you could store the gravity in a 'tipsy-gravity' attribute:
188    // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
189    // (remember - do not modify 'options' in place!)
190    $.fn.tipsy.elementOptions = function(ele, options) {
191        return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
192    };
193   
194    $.fn.tipsy.autoNS = function() {
195        return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
196    };
197   
198    $.fn.tipsy.autoWE = function() {
199        return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
200    };
201   
202})(jQuery);
Note: See TracBrowser for help on using the repository browser.