Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
7kgmlcdkv
 
Luiz
 
iScroll
 
Matt Shultz
 
Harleen
 
Ketholy123
 
T1ag0
 
zHugh
 
PlayWillian
 
ranzatti
 

Quem está conectado
260 usuários online :: 4 usuários cadastrados, Nenhum Invisível e 256 Visitantes :: 2 Motores de busca

7kgmlcdkv, Ketholy123, soldado, uvmyyvpew

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

[TUTORIAL] Amigos do membro no widget

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

  • 0

[TUTORIAL] Amigos do membro no widget

Mensagem por ddik em 03/10/10, 09:20 am

Widget "Lista de amigos"
Com esta função, você poderá ver a sua lista de amigos num widget ativo em seu fórum. Uma função bastante inovadora e moderna para os vossos fóruns.

Widget "Lista de amigos"
Tutoriais, dicas e astúcias

Instalação no Widget personalizado

Como este código é apropriado para widget, você poderá acessar em seu Painel de controle as opções de gerenciamento de widget para criar e hospedar o código script. Siga os passos a seguir para completar o processo.
Painel de Controle Seta Branca Módulos Seta Branca Portal e Widgets Seta Branca Gestão dos Widgets do fórum

Criar um widget personalizado

SetaNome do widget: - Será o nome dado ao widget para localização e controle deste pelo Painel de Controle.
Seta Utilizar um table type: - Nesta opção, deverá ser marcado o "Não".
Seta Título do widget: - Nesta opção, não será necessário preenchimento, resultado da marcação do "Não" anteriormente.
Seta Fonte do widget: - Neste campo, Devemos inserir o código trabalhamos no 3º Passo.
Feito isso, basta que o Widget seja arrastado para uma coluna no módulo correspondente para que o efeito seja aplicado.

Configuração do código

A seguir, será possível visualizar o código a ser usado. Você pode modificá-lo como desejar, atentando-se aos detahes apresentados dentro do código.
Código:
<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t394-widget-friends-list#3129
-->
<style type="text/css">
#fa_friends_widget { font-size:12px; font-family:Arial, Helvetica, Verdana, Sans-serif; }
#fa_friends_stats { text-align:center; }
#fa_friends_list { max-height:200px; overflow-y:auto; }
.fa_friend_row { margin:10px 0; }
.fa_friend_info { float:left; overflow: hidden; text-overflow:ellipsis; white-space:nowrap; width:90px; }
.fa_friend_online, a.fa_friend_username { color:#999 !important; text-decoration:none; }
.fa_friend_avatar { background:#FFF; border:2px solid #999; height:30px; width:30px; vertical-align:top; margin-right:6px; display:block; float:left; }
.fa_friend_avatar img { height:30px; width:30px; }
.fa_friend_row:hover .fa_friend_online, .fa_friend_row:hover a.fa_friend_username { color:#777 !important; }
.now_online .fa_friend_avatar { border-color:#69C; }
.now_online .fa_friend_online, .now_online a.fa_friend_username { color:#69C !important; }
.fa_friend_row.now_online:hover .fa_friend_online, .fa_friend_row.now_online:hover a.fa_friend_username { color:#47A !important; }
#fa_friends_actions { color:#666; background:#FFF; border:1px solid #CCC; position:absolute; padding:3px 0; z-index:99999; }
#fa_friends_actions a { color:#333; text-decoration:none; padding:4px 12px; display:block; }
#fa_friends_actions a:hover { color:#FFF; background:#38F; }
#fa_friends_actions a.danger:hover { background:#F33; }
#fa_friends_actions .danger { border-top:1px solid #CCC; margin-top:3px; }
</style>
 
<div id="fa_friends_widget">
  <div id="fa_friends_stats"></div>
  <div id="fa_friends_list">
    <div id="fa_friends_online"></div>
  </div>
</div>
 
<script type="text/javascript">//<![CDATA[
document.body.insertAdjacentHTML('beforeend', '<div id="fa_friends_actions" style="display:none"></div>');
 
(function() {
  window.fafl = {
    cache : 5*60*1000,
 
    lang : {
      online : 'Online',
      offline : 'Offline',
      loading : 'Carregando lista de amigos',
      stats : '%{ONLINE} de %{TOTAL} amigos online',
      send_message : 'Enviar MP',
      view_profile : 'Ver perfil',
      view_topics : 'Ver tópicos',
      view_posts : 'Ver mensagens',
      remove : 'Remover amigo',
      delete_friend : 'Tens a certeza que queres remover %{NAME} da tua lista de amigos?',
      no_friends : 'Sem amigos.'
    },
 
    node : {
      widget : document.getElementById('fa_friends_widget'),
      list : document.getElementById('fa_friends_list'),
      stats : document.getElementById('fa_friends_stats'),
      online : document.getElementById('fa_friends_online'),
      actions : document.getElementById('fa_friends_actions')
    },
 
    lastNode : null,
    toggleActions : function(node) {
      if (fafl.lastNode == node && !/none/.test(fafl.node.actions.style.display)) {
        fafl.node.actions.style.display = 'none';
        fafl.lastNode = null;
      } else {
        var offset = jQuery(node).offset(),
            id = node.href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 }),
            name = jQuery(node).text();
     
        fafl.lastNode = node;
        fafl.node.actions.innerHTML = '<a href="/u' + id + '">' + fafl.lang.view_profile + '</a><a href="/st/' + name + '">' + fafl.lang.view_topics + '</a><a href="/spa/' + name + '">' + fafl.lang.view_posts + '</a><a href="/privmsg?mode=post&u=' + id + '">' + fafl.lang.send_message + '</a><a class="danger" href="/profile?mode=editprofile&page_profil=friendsfoes&remove=' + id + '" onclick="fafl.remove(this, \'' + name + '\');return false;">' + fafl.lang.remove + '</a>';
        fafl.node.actions.style.left = offset.left + 'px';
        fafl.node.actions.style.top = offset.top + 20 + 'px';
        fafl.node.actions.style.display = 'block';
      }
    },
 
    bindActionEvents : function() {
      jQuery(document).on('click', function(e) {
        if (/fa_friend_username/.test(e.target.className)) {
          e.preventDefault();
          fafl.toggleActions(e.target);
        } else if (/block/.test(fafl.node.actions.style.display)) {
          fafl.node.actions.style.display = 'none';
        }
      });
 
      jQuery(fafl.node.actions).mouseleave(function() {
        this.style.display = 'none';
      });
    },
 
    remove : function(node, name) {
      var del = confirm(fafl.lang.delete_friend.replace(/%\{NAME\}/, name));
   
      if (del) {
        if (storage) {
          storage.removeItem('faFriendsWidgetExp');
        }
        window.location.href = node.href;
      }
    },
 
    processed : 0,
    quota : 0
  };
 
  var storage = window.localStorage;
 
  if (storage && storage.faFriendsWidget && storage.faFriendsIdent == _userdata.user_id && storage.faFriendsWidgetExp > +new Date - fafl.cache) {
    fafl.node.widget.innerHTML = storage.faFriendsWidget;
    fafl.node.actions = document.getElementById('fa_friends_actions');
    fafl.bindActionEvents();
  }
 
  else {
    fafl.node.stats.innerHTML = fafl.lang.loading;
 
    jQuery.get('/profile?mode=editprofile&page_profil=friendsfoes', function(d) {
      for (var a = jQuery('div:has(> a[href*="page_profil=friendsfoes&remove"]) a:first-child', d), i = 0, j = a.length, container = document.createElement('DIV'), temp, row; i < j; i++) {
        temp = document.createElement('DIV');
        temp.id = 'fa_friend_u' + a[i].href.replace(/.*?\/u(\d+).*/, function(M, S1) { return S1 });
        temp.className = 'fa_friend_row';
        temp.innerHTML = '<a href="' + a[i].href + '" class="fa_friend_avatar"><img src="http://illiweb.com/fa/invision/pp-blank-thumb.png"/></a><div class="fa_friend_info"><a href="' + a[i].href + '" class="fa_friend_username">' + jQuery(a[i]).text() + '</a><br/><span class="fa_friend_online">' + fafl.lang.offline + '</span></div><div class="clear"></div>';
        container.appendChild(temp);
      }
   
      if (!j) {
        fafl.node.stats.innerHTML = fafl.lang.no_friends;
        return false;
      }
   
      container.id = 'fa_friends_offline';
      fafl.node.offline = container;
      fafl.node.list.appendChild(container);
      fafl.bindActionEvents();
   
      row = jQuery('.fa_friend_row', container);
      fafl.quota = row.length;
   
      row.each(function() {
        var t = this;
     
        jQuery.get('/' + t.id.slice(10), function(d) {
          var ava = jQuery('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
          jQuery('.fa_friend_avatar img', t).attr('src', ava ? ava.src : 'http://illiweb.com/fa/invision/pp-blank-thumb.png');
           
          if (jQuery('#profile-advanced-right em, .module-title em', d)[0]) {
            t.className += ' now_online';
            jQuery('.fa_friend_online', t).text(fafl.lang.online);
            fafl.node.online.appendChild(t);
          }
       
          if (++fafl.processed == fafl.quota) {
            var online = jQuery('.fa_friend_row', fafl.node.online).length;
            fafl.node.stats.innerHTML = fafl.lang.stats.replace(/%\{ONLINE\}/g, online).replace(/%\{TOTAL\}/g, online + jQuery('.fa_friend_row', fafl.node.offline).length);
           
            if (storage) {
              storage.faFriendsIdent = _userdata.user_id;
              storage.faFriendsWidget = fafl.node.widget.innerHTML;
              storage.faFriendsWidgetExp = +new Date;
            }
          }
        });
      });
    });
  }
}());
// Por ange tuteur
//]]></script>
Você pode configurar a forma que o script exibe o texto (em Português do Brasil) e alterá-lo de acordo com suas necessidades. Basta, localizar no script:
Código:
    lang : {
      online : 'Online',
      offline : 'Offline',
      loading : 'Carregando lista de amigos',
      stats : '%{ONLINE} de %{TOTAL} amigos online',
      send_message : 'Enviar MP',
      view_profile : 'Ver perfil',
      view_topics : 'Ver tópicos',
      view_posts : 'Ver mensagens',
      remove : 'Remover amigo',
      delete_friend : 'Tens a certeza que queres remover %{NAME} da tua lista de amigos?',
      no_friends : 'Sem amigos.'
    },
As variáveis "%{ONLINE}" e "%{TOTAL}" não devem ser alteradas.


Widget "Lista de amigos"
Tutoriais, dicas e astúcias

Dúvidas gerais

  • Resultado;


avatar

ddik
Membro do Fórum

Masculino
Inscrito dia : 01/08/2009
Mensagens : 1787
Pontos Ativos : 2560

Ver perfil do usuário http://vilasims.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum