SoftDesign


Bun venit Vizitator pe SoftDesign, speram ca-ti place acest forum care iti pune la dispozitie o gama larga de tutoriale si resurse pentru WebDesign si ForumGratuit , si speram ca vei binevoi sa-ti faci cont pe forum pentru a avea aces la toate subiectele forumui.

Cum sa adaugati un TipsyTooltip pe forumul dvs.

In jos

Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de Gyzmo la data de Dum Noi 13, 2011 8:08 am

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 Gyzmo cu acordul lui Matti.
| SoftDesign

***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.



Ultima editare efectuata de catre Gyzmo in Sam Noi 26, 2011 1:20 pm, editata de 1 ori
avatar
Gyzmo
GFXcrew

Sex : masculin
Mesaje : 727
Credite : 28947
Data de inscriere : 05/09/2011
Localizare : Braila

Vezi profilul utilizatorului http://widegfx.forumer.ro/

Sus In jos

Re: Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de PlayOn la data de Dum Noi 13, 2011 8:10 am

Bravo Johnny pentru munca depusa !
avatar
PlayOn
Administrator

Sex : masculin
Mesaje : 254
Credite : 2657
Data de inscriere : 06/09/2011
Localizare : ROMANIA

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de Gyzmo la data de Dum Noi 13, 2011 8:23 am

Eu doar l-am tradus, cua cordul lui Matti.
Cel caruia trebuie sa-i multumiti este Matti.
avatar
Gyzmo
GFXcrew

Sex : masculin
Mesaje : 727
Credite : 28947
Data de inscriere : 05/09/2011
Localizare : Braila

Vezi profilul utilizatorului http://widegfx.forumer.ro/

Sus In jos

Re: Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de gab1Tzu la data de Mier Feb 01, 2012 10:01 am

nu inteleg ce trebuie sa fac la pasul 4 Sad
avatar
gab1Tzu
Gold Member

Sex : masculin
Mesaje : 248
Credite : 2612
Data de inscriere : 24/09/2011
Localizare : Craiova

Vezi profilul utilizatorului http://widegfx.forumer.ro

Sus In jos

Re: Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de Omeeu la data de Dum Sept 14, 2014 10:46 am

asd
avatar
Omeeu
Nou venit

Sex : masculin
Mesaje : 7
Credite : 1264
Data de inscriere : 14/09/2014

Vezi profilul utilizatorului http://www.tech-titans.net/

Sus In jos

Re: Cum sa adaugati un TipsyTooltip pe forumul dvs.

Mesaj Scris de Continut sponsorizat


Continut sponsorizat


Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum