Peste 500 tutoriale in limba romana.

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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link] 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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link]

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 [Trebuie sa fiti inscris si conectat pentru a vedea acest link] . 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.