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

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Yêu thích [Javascript] Widget: Thống kê thành viên

Bài gửi by HelpsFMvi on Tue Jun 28, 2016 12:21 am


Demo:

[You must be registered and logged in to see this image.]

Hướng dẫn:

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

- Widget name: Thống kê thành viên
- Use a table type: Yes
- Widget title: Thống kê thành viên
- Widget source:
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://illiweb.com/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>
>> Chấp nhận

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:

- Để trang trí lại widget thì các bạn tìm đoạn css trong js:
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>
Sửa CSS lại theo ý bạn nhé  [You must be registered and logged in to see this image.]
- Để chỉnh sửa cấu trúc của widget thì tìm đoạn code này:
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://illiweb.com/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>

Chỉnh sửa lại theo ý bạn là được  [You must be registered and logged in to see this image.]
Nguồn: FMDesign



Cập nhật chữ ký !!
avatar
HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 96
HelpsPoints : 2494
Likes : 28
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

Tuổi : 19
Location : Ninh Thuận
Google Chrome
Phpbb3

[Click để xem tài sản HelpsFMvi]

Xem lý lịch thành viên http://helps.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Forumotion.com | © phpBB | Free forum support | Liên hệ | Report an abuse | Create a blog
Stylish responsive footer | Script Tutorials