Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

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

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Categorias e Sub-fóruns

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

  • 0

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

Mensagem por BrunoH. 17.12.12 21:59


[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 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110210Seta 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 110310Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Visualizar informações de sub fóruns em modo hover 110410Seta 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



© Fórum dos Fóruns


[TUTORIAL] Visualizar informações de sub fóruns em modo hover Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Visualizando informações de sub fóruns em modo hover
BrunoH.

BrunoH.
Membro Entusiasta

Membro desde : 15/06/2012
Mensagens : 7675
Pontos : 10386

http://premiumdesign3d.blogspot.com.br/ https://www.facebook.com/brunohenrique.com.br

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Forumeiros e você ::   :: Tutoriais, dicas e astúcias :: Categorias e Sub-fóruns

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