GriMMjOw
Rank: Administrator Mesaje : 239 Likes : 1
| Subiect: Tispy tooltip Mier Dec 25, 2013 6:16 am | |
| In acest tutorial veti putea creea un tooltip. Pentru a vedea efectul, puneti cursorul pe link-ul: "Semnaleaza un abuz" din partea de jos a forumului. 1. Codurile Javascript Partea I Mergeți în: Panou de Administrare => Module => Gestiunea codurilor javascript => Creati un nou cod JaveScript La amplasare, bifati: Toate paginile Dupa adaugati urmatorul cod: - Cod:
-
// tipsy, facebook style tooltips for jquery // version 1.0.0a // (c) 2008-2010 jason frame [jason@onehackoranother.com] // releated under the MIT license (function($) {
function fixTitle($ele) { if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') { $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title'); } }
function Tipsy(element, options) { this.$element = $(element); this.options = options; this.enabled = true; fixTitle(this.$element); }
Tipsy.prototype = { show: function() { var title = this.getTitle(); if (title && this.enabled) { var $tip = this.tip();
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
var pos = $.extend({}, this.$element.offset(), { width: this.$element[0].offsetWidth, height: this.$element[0].offsetHeight });
var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight; var gravity = (typeof this.options.gravity == 'function') ? this.options.gravity.call(this.$element[0]) : this.options.gravity;
var tp; switch (gravity.charAt(0)) { case 'n': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 's': tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 'e': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; break; case 'w': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; break; }
if (gravity.length == 2) { if (gravity.charAt(1) == 'w') { tp.left = pos.left + pos.width / 2 - 15; } else { tp.left = pos.left + pos.width / 2 - actualWidth + 15; } }
$tip.css(tp).addClass('tipsy-' + gravity);
if (this.options.fade) { $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); } else { $tip.css({visibility: 'visible', opacity: this.options.opacity}); } } },
hide: function() { if (this.options.fade) { this.tip().stop().fadeOut(function() { $(this).remove(); }); } else { this.tip().remove(); } },
getTitle: function() { var title, $e = this.$element, o = this.options; fixTitle($e); var title, o = this.options; if (typeof o.title == 'string') { title = $e.attr(o.title == 'title' ? 'original-title' : o.title); } else if (typeof o.title == 'function') { title = o.title.call($e[0]); } title = ('' + title).replace(/(^\s*|\s*$)/, ""); return title || o.fallback; },
tip: function() { if (!this.$tip) { this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>'); } return this.$tip; },
validate: function() { if (!this.$element[0].parentNode) { this.hide(); this.$element = null; this.options = null; } },
enable: function() { this.enabled = true; }, disable: function() { this.enabled = false; }, toggleEnabled: function() { this.enabled = !this.enabled; } };
$.fn.tipsy = function(options) {
if (options === true) { return this.data('tipsy'); } else if (typeof options == 'string') { return this.data('tipsy')[options](); }
options = $.extend({}, $.fn.tipsy.defaults, options);
function get(ele) { var tipsy = $.data(ele, 'tipsy'); if (!tipsy) { tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options)); $.data(ele, 'tipsy', tipsy); } return tipsy; }
function enter() { var tipsy = get(this); tipsy.hoverState = 'in'; if (options.delayIn == 0) { tipsy.show(); } else { setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn); } };
function leave() { var tipsy = get(this); tipsy.hoverState = 'out'; if (options.delayOut == 0) { tipsy.hide(); } else { setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut); } };
if (!options.live) this.each(function() { get(this); });
if (options.trigger != 'manual') { var binder = options.live ? 'live' : 'bind', eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'; this[binder](eventIn, enter)[binder](eventOut, leave); }
return this;
};
$.fn.tipsy.defaults = { delayIn: 0, delayOut: 0, fade: false, fallback: '', gravity: 'n', html: false, live: false, offset: 0, opacity: 0.8, title: 'title', trigger: 'hover' };
// Overwrite this method to provide options on a per-element basis. // For example, you could store the gravity in a 'tipsy-gravity' attribute: // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); // (remember - do not modify 'options' in place!) $.fn.tipsy.elementOptions = function(ele, options) { return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; };
$.fn.tipsy.autoNS = function() { return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; };
$.fn.tipsy.autoWE = function() { return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; };
})(jQuery); Partea a II-a Mergeți în: Panou de Administrare => Module => Gestiunea codurilor javascript => Creati un nou cod JaveScript La amplasare, bifati: Toate paginile Dupa adaugati urmatorul cod: - Cod:
-
$(document).ready(function(){ $('[title]').tipsy({gravity: 'sw'}); $('[title]').tipsy({gravity: 'se'}); $('CLASA/ID').tipsy({gravity: 'n'}); $('CLASA/ID').tipsy({gravity: 's'}); $('CLASA/ID').tipsy({gravity: 'e'}); $('CLASA/ID').tipsy({gravity: 'w'}); $('CLASA/ID').tipsy({gravity: 'nw'}); $('CLASA/ID').tipsy({gravity: 'ne'}); $('CLASA/ID').tipsy({gravity: 'sw'}); $('CLASA/ID').tipsy({gravity: 'se'}); }); Acele n, s, e, etc. sunt pozitiile in care se afla "bula" cu continutul dvs. N - Nord S - Sud E - Est W - Vest NW - Nord-vest NE - Nord-est SW - Sud-vest SE - Sud-est 2. Tooltip anumitor link-uri Pentru a creea un tooltip unui anumit link, adaugati acestuia: title="text" sau original-title="text" . Exemplu: - Cod:
-
<a href="#" id="example-1" title="Salut! Acesta este un tootip">Pune cursorul pe mine!</a> sau - Cod:
-
<a href="#" class="example-class" title="Salut! Acesta este un tootip">Pune cursorul pe mine!</a> iar in jQuery la: - Cod:
-
$('CLASA/ID').tipsy({gravity: 'n'}); veti inlocui CLASA/ID cu #example-1 sau .example-class. Rezultatul va fi: - Cod:
-
$(document).ready(function(){ $('[title]').tipsy({gravity: 'sw'}); $('#example-1').tipsy({gravity: 'nw'}); $('.example-class').tipsy({gravity: 'ne'}); }); 3. Personalizarea cu ajutorul foii de stil CSS Mergeți în: Panou de Administrare => Afisare => Culori => Foaie de stil CSS - Cod:
-
.tipsy { padding: 5px; font-size: 10px; position: absolute; z-index: 999; }
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; }
.tipsy-inner { border-radius: 3px; -moz-border-radius:3px; -webkit-border-radius:3px; }
.tipsy-arrow { position: absolute; background: url('http://onehackoranother.com/projects/jquery/tipsy/stylesheets/../images/tipsy.gif') no-repeat top left; width: 9px; height: 5px; }
.tipsy-n .tipsy-arrow { top: 0; left: 50%; margin-left: -4px; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; }
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; }
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -4px; background-position: bottom left; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; background-position: bottom left; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; background-position: bottom left; }
.tipsy-e .tipsy-arrow { top: 50%; margin-top: -4px; right: 0; width: 5px; height: 9px; background-position: top right; }
.tipsy-w .tipsy-arrow { top: 50%; margin-top: -4px; left: 0; width: 5px; height: 9px; } Pentru a personaliza casuta, editati in CSS: background-color: black; - black reprezinta culoarea de fundal a casutei. color: white; - white reprezinta culoarea textului. - Cod:
-
.tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center;} ai multe culori puteti gasi aici: http://www.colorschemer.com/schemes/Pentru a schimba culoarea de fundal a sagetii, trebuie sa editati aceasta imagine cu ajutorul unui program ( Photoshop, Gimp, Paint(dot)Net, etc. ) sau puteti face o cerere in sectiunea de cereri grafice. 4. Cum sa adaugati Tipsy tooltip la un link ce nu contine titlu Exclamation Doar pentru persoane experimentate! Pentru a putea adauga un tooltip unui link ce nu contine tag-ul title, va folositi de jQuery. Mergeți în: Panou de Administrare => Module => Gestiunea codurilor javascript => Creati un nou cod JaveScript La amplasare, bifati: Toate paginile Dupa adaugati urmatorul cod: - Cod:
-
$(document).ready(function(){ $('CLASA/ID').attr('title','Titlul aici'); $('CLASA/ID').tipsy({gravity:'N',html:true}); }); Unde: - Cod:
-
$('CLASA/ID').attr('title','Titlul aici'); Reprezinta partea codului care selecteaza un anumit element si ii atribuie un anumit titlu. "CLASA/ID" va fi inlocuit cu clasa/id-ul identificat de voi, ce urmeaza a fi "decorat". La "Titlul aici" inlocuiti cu textul pe are vreti sa il vedeti afisat in bula de text. Exemplu: $('#page-footer .linklist .rightside a:contains(Semnaleaza un abuz)').attr('title','Salutare!'); $('#page-footer .linklist .rightside a:contains(Semnaleaza un abuz)').tipsy({gravity:'se',html:true}); Iar la: - Cod:
-
$('CLASA/ID').tipsy({gravity:'N',html:true}); ..unde "N" poate fi modificat cu orice alta directie ( n, s, e, w, se, sw, ne, nw ) si reprezinta locul in care va fi pozitionat chenarul la trecerea cursorului peste zona dorita. |
|