ZoneToony - Playstation 4, Xbox 720, Windows 8, Smartphones, Android, Divulgue seu Servidor, Gam
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

T-LordT-Lord
Admin

[TUTORIAL] Visualizar informações de sub fóruns em modo hover Generale

Visualizando informações de sub fóruns em modo hover

Este
tutorial permite que visualize as informações de tópicos e estatísticas
dos sub fóruns de seu fórum, no qual permite mostrar todas as
informações possíveis aos usuários, de quantas mensagens e tópicos
possui cada sub fórum.



--> Tutoriais, dicas e astúcias <--
Visualizando informações de sub fóruns em modo hover



1º - Aplicação do tutorial:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts



[TUTORIAL] Visualizar informações de sub fóruns em modo hover Painel13
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110111[TUTORIAL] Visualizar informações de sub fóruns em modo hover 398853 Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110210[TUTORIAL] Visualizar informações de sub fóruns em modo hover 398853 Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110310[TUTORIAL] Visualizar informações de sub fóruns em modo hover 398853 Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110410[TUTORIAL] Visualizar informações de sub fóruns em modo hover 398853 Habilitar o gerenciamento dos códigos JavaScript Ao
selecionar a opção sim, estará ativando a função páginas Javascript no
seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

2º - Aplicação dos códigos JavaScript:
É
Importante que crie três páginas JavaScript para cada código, caso
utilize apenas uma unica página JavaScript para os três códigos, os
mesmos iram dar conflitos entre si.
Abaixo temos nossos três códigos JavaScript, que iram criar uma página para cada código:
Código JavaScript 1:

Código:
        (function(jQuery) {
         
            function fixTitle(jQueryele) {
                if (jQueryele.attr('title') || typeof(jQueryele.attr('original-title')) != 'string') {
                    jQueryele.attr('original-title', jQueryele.attr('title') || '').removeAttr('title');
                }
            }
         
            function Tipsy(element, options) {
                this.jQueryelement = jQuery(element);
                this.options = options;
                this.enabled = true;
                fixTitle(this.jQueryelement);
            }
         
            Tipsy.prototype = {
                show: function() {
                    var title = this.getTitle();
                    if (title && this.enabled) {
                        var jQuerytip = this.tip();
                     
                        jQuerytip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                        jQuerytip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                        jQuerytip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
                     
                        var pos = jQuery.extend({}, this.jQueryelement.offset(), {
                            width: this.jQueryelement[0].offsetWidth,
                            height: this.jQueryelement[0].offsetHeight
                        });
                     
                        var actualWidth = jQuerytip[0].offsetWidth, actualHeight = jQuerytip[0].offsetHeight;
                        var gravity = (typeof this.options.gravity == 'function')
                                        ? this.options.gravity.call(this.jQueryelement[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;
                            }
                        }
                     
                        jQuerytip.css(tp).addClass('tipsy-' + gravity);
                     
                        if (this.options.fade) {
                            jQuerytip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
                        } else {
                            jQuerytip.css({visibility: 'visible', opacity: this.options.opacity});
                        }
                    }
                },
             
                hide: function() {
                    if (this.options.fade) {
                        this.tip().stop().fadeOut(function() { jQuery(this).remove(); });
                    } else {
                        this.tip().remove();
                    }
                },
             
                getTitle: function() {
                    var title, jQuerye = this.jQueryelement, o = this.options;
                    fixTitle(jQuerye);
                    var title, o = this.options;
                    if (typeof o.title == 'string') {
                        title = jQuerye.attr(o.title == 'title' ? 'original-title' : o.title);
                    } else if (typeof o.title == 'function') {
                        title = o.title.call(jQuerye[0]);
                    }
                    title = ('' + title).replace(/(^s*|s*jQuery)/, "");
                    return title || o.fallback;
                },
             
                tip: function() {
                    if (!this.jQuerytip) {
                        this.jQuerytip = jQuery('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
                    }
                    return this.jQuerytip;
                },
             
                validate: function() {
                    if (!this.jQueryelement[0].parentNode) {
                        this.hide();
                        this.jQueryelement = null;
                        this.options = null;
                    }
                },
             
                enable: function() { this.enabled = true; },
                disable: function() { this.enabled = false; },
                toggleEnabled: function() { this.enabled = !this.enabled; }
            };
         
            jQuery.fn.tipsy = function(options) {
             
                if (options === true) {
                    return this.data('tipsy');
                } else if (typeof options == 'string') {
                    return this.data('tipsy')[options]();
                }
             
                options = jQuery.extend({}, jQuery.fn.tipsy.defaults, options);
             
                function get(ele) {
                    var tipsy = jQuery.data(ele, 'tipsy');
                    if (!tipsy) {
                        tipsy = new Tipsy(ele, jQuery.fn.tipsy.elementOptions(ele, options));
                        jQuery.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;
             
            };
         
            jQuery.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 jQuery.extend({}, options, {gravity: jQuery(ele).attr('tipsy-gravity') || 'n' });
            // (remember - do not modify 'options' in place!)
            jQuery.fn.tipsy.elementOptions = function(ele, options) {
                return jQuery.metadata ? jQuery.extend({}, options, jQuery(ele).metadata()) : options;
            };
         
            jQuery.fn.tipsy.autoNS = function() {
                return jQuery(this).offset().top > (jQuery(document).scrollTop() + jQuery(window).height() / 2) ? 's' : 'n';
            };
         
            jQuery.fn.tipsy.autoWE = function() {
                return jQuery(this).offset().left > (jQuery(document).scrollLeft() + jQuery(window).width() / 2) ? 'e' : 'w';
            };
         
        })(jQuery);


Iremos criar um nova página JavaScript novamente, com o mesmo processo utilizando o código abaixo:
Código:
        (function(jQuery){function fixTitle(jQueryele){if(jQueryele.attr('title')||typeof(jQueryele.attr('original-title'))!='string'){jQueryele.attr('original-title',jQueryele.attr('title')||'').removeAttr('title')}}function Tipsy(element,options){this.jQueryelement=jQuery(element);this.options=options;this.enabled=true;fixTitle(this.jQueryelement)}Tipsy.prototype={show:function(){var title=this.getTitle();if(title&&this.enabled){var jQuerytip=this.tip();jQuerytip.find('.tipsy-inner')[this.options.html?'html':'text'](title);jQuerytip[0].className='tipsy';jQuerytip.remove().css({top:0,left:0,visibility:'hidden',display:'block'}).appendTo(document.body);var pos=jQuery.extend({},this.jQueryelement.offset(),{width:this.jQueryelement[0].offsetWidth,height:this.jQueryelement[0].offsetHeight});var actualWidth=jQuerytip[0].offsetWidth,actualHeight=jQuerytip[0].offsetHeight;var gravity=(typeof this.options.gravity=='function')?this.options.gravity.call(this.jQueryelement[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}}jQuerytip.css(tp).addClass('tipsy-' + gravity);if (this.options.fade) {jQuerytip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity})} else {jQuerytip.css({visibility: 'visible', opacity: this.options.opacity})}}},hide: function() {if (this.options.fade) {this.tip().stop().fadeOut(function() { jQuery(this).remove()})} else {this.tip().remove()}},getTitle: function() {var title, jQuerye = this.jQueryelement, o = this.options;fixTitle(jQuerye);var title, o = this.options;if (typeof o.title == 'string') {title = jQuerye.attr(o.title == 'title' ? 'original-title' : o.title)} else if (typeof o.title == 'function') {title = o.title.call(jQuerye[0])}title = ('' + title).replace(/(^\s*|\s*jQuery)/,"");return title||o.fallback},tip:function(){if(!this.jQuerytip){this.jQuerytip=jQuery('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>')}return this.jQuerytip},validate:function(){if(!this.jQueryelement[0].parentNode){this.hide();this.jQueryelement=null;this.options=null}},enable:function(){this.enabled=true},disable:function(){this.enabled=false},toggleEnabled:function(){this.enabled=!this.enabled}};jQuery.fn.tipsy=function(options){if(options===true){return this.data('tipsy')}else if(typeof options=='string'){return this.data('tipsy')[options]()}options=jQuery.extend({},jQuery.fn.tipsy.defaults,options);function get(ele){var tipsy=jQuery.data(ele,'tipsy');if(!tipsy){tipsy=new Tipsy(ele,jQuery.fn.tipsy.elementOptions(ele,options));jQuery.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};jQuery.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'};jQuery.fn.tipsy.elementOptions=function(ele,options){return jQuery.metadata?jQuery.extend({},options,jQuery(ele).metadata()):options};jQuery.fn.tipsy.autoNS=function(){return jQuery(this).offset().top>(jQuery(document).scrollTop()+jQuery(window).height()/2)?'s':'n'};jQuery.fn.tipsy.autoWE=function(){return jQuery(this).offset().left>(jQuery(document).scrollLeft()+jQuery(window).width()/2)?'e':'w'}})(jQuery);jQuery("document").ready(function(){jQuery(".forabg .row").mouseenter(function(){var mensajes=jQuery(this).find(".posts").text();var argumentos=jQuery(this).find(".topics").text();jQuery(this).find(".forumtitle").attr("title",mensajes+" & "+argumentos).tipsy({gravity:"w"})})});

Novamente, iremos criar um nova página JavaScript novamente, com o mesmo processo utilizando o código abaixo:
Código:
        jQuery(document).ready(function(){
          jQuery(function() {
            jQuery('a').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_quote').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_edit').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_delete').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_ip').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_profile').tipsy({fade: true, gravity: 's'});
            jQuery('.i_icon_pm').tipsy({fade: true, gravity: 's'});
            jQuery('.topic-title').tipsy({fade: true, gravity: 's'});
            jQuery('.i_post').tipsy({fade: true, gravity: 's'});
            jQuery('.i_reply').tipsy({fade: true, gravity: 's'});
          });
        });

3º - Código CSS a ser utilizado:
Código:
        .tipsy {
        padding: 5px;
        font-size: 11px;
        position: absolute;
        text-shadow: none;
        z-index: 999;
        }

        .tipsy-inner {
        padding: 8px 8px 8px 8px;
        background-color: black;
        color: white;
        max-width: 200px;
        text-align: center;
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
        background: black url(http://cuul.tk/img/gradient.png) repeat-x 0 -150px;
        }

        .tipsy-inner {
        border-radius: 3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        }

        .tipsy-arrow {
        position: absolute;
        background: url('http://cuul.tk/img/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;
        }

4º - Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS


[TUTORIAL] Visualizar informações de sub fóruns em modo hover 1114


4º - Resultado:

[TUTORIAL] Visualizar informações de sub fóruns em modo hover EOFA1

http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos