Top subiecte apreciate

Optiuni experimentale
  • Foloseste AJAX in formulare ori de cate ori este posibil

Navigare rapidă

Ultimele subiecte
» Ipb Counter-strike Special FG
Scris de DenisPasca Ieri la 22:52
» Special Theme Extrem Tutorials
Scris de cosminelu21 Vin 2 Dec - 23:48
» Script ninsoare
Scris de JeKa123 Vin 2 Dec - 20:20
» Cerere script
Scris de SSYT Joi 1 Dec - 23:22
» Hello
Scris de admin Mier 30 Noi - 16:10
Cuvinte-cheie

Metin2  menu  navigare  tutorial  legenda  Statistici  Mesaje  ultimele  radio  edit  profil  reclama  meniu  animate  tema  avatar  banner  phpBB2  cautare  punbb  html  chenar  subiecte  drop  subforumuri  Bara  

Cum sa adaugati un TipsyTooltip pe forumul dvs.


Salut, Vizitator

În acest tutorial am vă va arăta cum să adăugaţi pe forum un Tipsy Tooltip - tot ce trebuie sa faceti este sa urmati pas cu pas acest tutorial.

Toate drepturile sunt rezervate catre http://onehackoranother.com/projects/jquery/tipsy/ Dar puteti sa-mi multumiti pentru ca v-am creeat acest tutorial.

Pasul 1 - Pentru a adăuga codul jQuery de care aveţi nevoie veti merge in Panou de administrare > Module > HTML & JAVASCRIPT > Javascript codes management > Create a new javascript.
Titlu * : Tipsy
Placement : In all the pages
Javascript Code * : Aici veti adauga codul jQuery urmator:


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);

Pasul 2 - La acest pas va trebui sa adaugati codul CSS. Mergeti in Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS.
Codul 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;
    }

Pasul 3 - Pentru a adăuga jQuery de care aveţi nevoie mergeti in Panou de administrare > Module > HTML & JAVASCRIPT > Javascript codes management > Create a new javascript.
Titlu * : Tipsy_classes
Placement : In all the pages
Javascript Code * : Aici veti adauga codul jQuery urmator:


Notă: puteţi pune doar numele clasei în cazul în care doriţi să-l positionati, exemplu: gravitatea "n": gravitatea 's': gravitatea "e": "W" sau arunca o privire aici http://onehackoranother.com/projects/jquery/tipsy/

Cod:
    $(document).ready(function(){
    $(function() {
    $('class_name-here').tipsy({gravity: 'n'});
    $('class_name-here').tipsy({gravity: 's'});
    $('class_name-here').tipsy({gravity: 'e'});
    $('class_name-here').tipsy({gravity: 'w'});
    $('class_name-here').tipsy({gravity: 'nw'});
    $('class_name-here').tipsy({gravity: 'ne'});
    $('class_name-here').tipsy({gravity: 'sw'});
    $('class_name-here').tipsy({gravity: 'se'});
    });
    });

Pasul 4 - Este pentru Id & Class, pentru cei care nu înţeleg ce inseamna "id" şi "de class" vă rugăm să aruncaţi o privire aici http://www.w3schools.com/css/css_id_class.asp . Dar voi va trebui sa gasiti clasele principale de pe forumul vostru.

Acesta este un exemplu de link-ul de ID.
Cod:
    <a href="#" id="example-1" original-title="Hello World">Hover over me</a>

Acesta este un exemplu de link-ul de class.
Cod:
    <div class="example-tipsy"><a href="#" original-title="Hello World">Hover over me</a></div>





Tutorial realizat de Matti in limba engleza
Tradus de Kent Wood cu acordul lui Matti


***Important !

Reproducerea si/sau copierea acestui tutorial NU este permisa fara acordul postatorului !
Reproducerea acestui tutorial nu este posibila fara acordul nostru, in conformitate cu articolul L122-1 apartinand ICC.


Comentariile utilizatorilor

Fii primul care comenteaza acest articol