[TUTORIAL] Visualizar informações de sub fóruns em modo hover
Página 1 de 1 • Compartilhe
[TUTORIAL] Visualizar informações de sub fóruns em modo hover
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
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
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
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. |
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
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);
- 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"})})});
- 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
4º - Resultado:
© Fórum dos Fóruns
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 |
Tópicos semelhantes
» Sobre o tutorial visualizar em modo hover
» [TUTORIAL] Visualizar tópico em modo hover
» [TUTORIAL] Visualizar o perfil em modo hover
» [TUTORIAL] Sub-fóruns em modo hover
» Visualizar tópico em modo hover
» [TUTORIAL] Visualizar tópico em modo hover
» [TUTORIAL] Visualizar o perfil em modo hover
» [TUTORIAL] Sub-fóruns em modo hover
» Visualizar tópico em modo hover
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos