[Javascript] Widget: Thống kê thành viên

Demo:

Hướng dẫn:

1. ACP >> Modules >> Portal & Widgets >> Forum widgets management >> Creat a new widget >> 

Code:

<!--
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t594-widget-member-statistics#10109
-->
 
<style type="text/css">.fa_ms_row { font-size:12px; font-family:arial, sans-serif; text-align:center; padding:10px 0; border-bottom:1px solid #CCC; }
.fa_ms_row:last-child { text-align:left; border:none; }
.fa_ms_row > span { display:inline-block; width:50%; }
.fa_ms_label { text-align:left; font-weight:bold; }
.fa_ms_value { font-size:18px; vertical-align:middle; }
#fa_ms_avatar { background:#FFF; border:1px solid #CCC; float:left; padding:2px; margin-right:6px; }
#fa_ms_avatar, #fa_ms_avatar img { width:40px; height:40px; border-radius:100%; overflow:hidden; }
#fa_ms_new_member_info { margin-top:10px; }</style>
 
<div id="fa_member_stats">
  <div class="fa_ms_row"><span class="fa_ms_label">Members</span><span class="fa_ms_value">{FORUMCOUNTUSER}</span></div>
  <div class="fa_ms_row"><span class="fa_ms_label">Most Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>
  <div class="fa_ms_row">
    <div id="fa_ms_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /></div>
    <div id="fa_ms_new_member_info"><div class="fa_ms_nmi_row">Newest Member</div><div class="fa_ms_nmi_row">{FORUMLASTUSERLINK}</div></div>
    <div class="clear"></div>
  </div>
</div>
 <script type="text/javascript">//<![CDATA[
// this script gets the latest member's avatar and caches it for 1 hour
(function() {
  var id = +'{FORUMLASTUSERLINK}'.replace(/.*?u=(\d+).*/, function(M, S1) { return S1 }),
      img = document.getElementById('fa_ms_avatar'),
      storage = window.localStorage,
      avatar;
 
  if (img) {
    img = img.getElementsByTagName('IMG')[0];
 
    if (storage && storage['fa_new_avatar_u' + id] && storage['fa_new_avatar_u' + id + '_exp'] > +new Date - 1*60*60*1000) {
      img.src = storage['fa_new_avatar_u' + id];
    } else {
      jQuery.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
        avatar = jQuery('.tooltip-content > img', d)[0];
 
        if (avatar) {
          img.src = avatar.src;
 
          if (storage) {
            storage['fa_new_avatar_u' + id] = img.src;
            storage['fa_new_avatar_u' + id + '_exp'] = +new Date;
          }
        }
      });
    }
 
  }
}());
'par ange tuteur';
//]]></script>

2. Chọn tab "Personal widgets" >> Kéo "Thống kê thành viên" lên vị trí muốn đặt nó >> Chấp nhận

Tùy biến:

Code:

<style type="text/css">.fa_ms_row { font-size:12px; font-family:arial, sans-serif; text-align:center; padding:10px 0; border-bottom:1px solid #CCC; }
.fa_ms_row:last-child { text-align:left; border:none; }
.fa_ms_row > span { display:inline-block; width:50%; }
.fa_ms_label { text-align:left; font-weight:bold; }
.fa_ms_value { font-size:18px; vertical-align:middle; }
#fa_ms_avatar { background:#FFF; border:1px solid #CCC; float:left; padding:2px; margin-right:6px; }
#fa_ms_avatar, #fa_ms_avatar img { width:40px; height:40px; border-radius:100%; overflow:hidden; }
#fa_ms_new_member_info { margin-top:10px; }</style>

Code:

<div id="fa_member_stats">
  <div class="fa_ms_row"><span class="fa_ms_label">Members</span><span class="fa_ms_value">{FORUMCOUNTUSER}</span></div>
  <div class="fa_ms_row"><span class="fa_ms_label">Most Online</span><span class="fa_ms_value">{FORUMONLINEUSER}</span></div>
  <div class="fa_ms_row">
    <div id="fa_ms_avatar"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /></div>
    <div id="fa_ms_new_member_info"><div class="fa_ms_nmi_row">Newest Member</div><div class="fa_ms_nmi_row">{FORUMLASTUSERLINK}</div></div>
    <div class="clear"></div>
  </div>
</div>