[Tutorial] Widget quem está online personalizado

Informações:
Autor: Ange Tuteur
Funcionalidade: Todas as versões

Painel de Controle ☛ Modulos ☛ Portal & Widgets ☛ Gestão dos widgets do fórum

Código:

<style type="text/css">
#whois_module { color:#666; font-size:11px; }
#whois_online { border:1px solid #DDD; border-radius:3px; margin:3px 0; }
.whois_userow { color:#666; font-weight:normal; text-shadow:none; padding:2px; }
.whois_userow:nth-child(even) { background:#F5F5F5 }
.whois_userow:nth-child(odd) { background:#E5E5E5 }
.whois_label { font-size:10px; padding-left:10px; position:relative; }
.whois_label:before { content:"."; font-size:0px; background:#6A6; border-radius:3px; box-shadow:0 0 3px #6C6; display:inline-block; height:5px; width:5px; position:absolute; top:3px; left:0; }
.whois_row:nth-child(1) .whois_label:before { background:#C9C; box-shadow:0 0 1px #C9C; }
.whois_row:nth-child(2) .whois_label:before { background:#999; box-shadow:0 0 1px #999; }
.whois_row:nth-child(3) .whois_label:before { background:#69C; box-shadow:0 0 1px #69C; }
#whois_online { height:100px; overflow:auto; }
.whois_row, a.whois_link, .whois_error { color:#999 !important; font-weight:bold; text-shadow:1px 1px 0 #FFF; background:#EEE; border:1px solid #CCC; border-radius:3px; margin:3px 0; padding:4px 6px; }
a.whois_link { font-size:11px; text-align:center; text-decoration:none; display:block; }
a.whois_link:hover { color:#666 !important; border-color:#666; }
.whois_error { color:#C66 !important; text-shadow:1px 1px 0 #FDD; background:#FCC; border-color:#F99; }
</style>
 
<div id="whois_module">
  <div class="whois_row"><span class="whois_label">Visitantes :</span> <span id="whois_guests">0</span></div>
  <div class="whois_row"><span class="whois_label">Invisiveis :</span> <span id="whois_hidden">0</span></div>
  <div class="whois_row"><span class="whois_label">Registrados :</span> <span id="whois_registered">0</span></div>
  <div class="whois_row">
    <span class="whois_label">Usuarios Online :</span>
    <div id="whois_online"><noscript><div class="whois_error">Erro: JavaScript deve estar ativado para usar este módulo .</div></noscript></div>
  </div>
</div>
<a href="#update" class="whois_link" id="whois_refresh">Refresh</a>
<a href="/viewonline" class="whois_link">Ver toda a lista</a>
 
<script type="text/javascript">//<![CDATA[
(function() {
  var cache = 4*59*1000, storage = window.localStorage, s = ['','',''], fresh;
  if (getId('wrap')) s = ['h1.page-title + p','h1.page-title','.forumbg tbody tr'];
  else if (getId('ipbwrapper')) s = ['.maintitle .title-options','.maintitle h3','.ipbtable.view-online tbody tr'];
  else if (jQuery('.pun').length) s = ['.main-head p.options','.main-head p.h2','.main-content .table tbody tr'];
  else if (jQuery('.bodylinewidth').length) s = ['table:has(.nav) + .forumline tr:has(.catSides):eq(1)','table:has(.nav) + .forumline tr:has(.catSides):eq(0)','table:has(.nav) + .forumline tr:has(.gen)'];
  else return getId('whois_module').innerHTML = '<div class="whois_error">Seu modelo não é suportado para este módulo. Para obter assistência ou informações, por favor <a href="http://bestweb.forumeiros.com/" target="_blank" style="color:#069;">clique aqui</a>.</div>';
 
  getId('whois_refresh').onclick = function() { if (fresh) return; getOnline(); return false; }
  if (storage.whoisHTML && storage.whoisCache > +new Date - cache) getId('whois_module').innerHTML = storage.whoisHTML;
  else getOnline();
 
  function getOnline() {
    fresh = true;
    getId('whois_refresh').style.opacity = '0.3';
    getId('whois_online').innerHTML = '<div class="whois_userow">Carregando...</div>';
    jQuery.get('/viewonline',function(data){
      getId('whois_online').innerHTML = '';
      getId('whois_guests').innerHTML = jQuery(s[0],data).text().match(/(\d+)/)[1];
      getId('whois_hidden').innerHTML = jQuery(s[1],data).text().match(/^.*? \d+ .*? (\d+) .*/)[1]
      getId('whois_registered').innerHTML = jQuery(s[1],data).text().match(/^.*? (\d+) .*? \d+ .*/)[1];
      for (var i=0,a=jQuery(s[2],data); i<a.length; i++) getId('whois_online').innerHTML += '<div class="whois_userow">' + a[i].firstChild.innerHTML + '</div>';
      storage && (storage.whoisCache = +new Date, storage.whoisHTML = getId('whois_module').innerHTML);
      getId('whois_refresh').style.opacity = '1';
      fresh = false;
    });
  };
  function getId(id) { return document.getElementById(id) };
})();
//]]></script>