[Code] Widget: Nhóm

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 widget >>

- Widget Name: Nhóm
- Use a table type: Yes
- Widget Title: Nhóm
- Widget Source:

Code:

<!--  
DEVELOPED BY ANGE TUTEUR
NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR
ORIGIN : http://fmdesign.forumotion.com/t525-widget-groups#7436
  --><style type="text/css">#fa_group_panel { font-size:12px; font-family:arial, sans-serif; }
#fa_group_panel > div { margin:10px 3px; }
#fa_group_panel select { width:100%; }
#fa_group_memberships a { display:block; }
#fa_group_join dl { text-align:center; }
#fa_group_join dt { display:none; }
#fa_group_join dd { margin:0; }
.fa_group_title { font-weight:bold; color:#369; border-bottom:1px solid #369; padding-bottom:3px; margin:3px 0; }
.fa_group_button { color:#69C; background:transparent; border:1px solid #69C; border-radius:3px; padding:3px 6px; width:100%; }
.fa_group_button:hover { color:#FFF; background:#69C; }</style>
<div id="fa_group_panel">
    
 <div id="fa_group_status">
     <noscript><span style="color:#F00">Error : Please enable JavaScript to use this widget.</span></noscript>  
 </div>
    
 <div id="fa_group_memberships">
 
 </div>
    
 <div id="fa_group_join">
 
 </div>
</div>
  <script type="text/javascript">
(function() {
  var cache_time = 1*60*60*1000,
 
      lang = {
              join : 'Tham gia nhóm',
        memberships : 'Nhóm Diễn Đàn',
            loading : 'Đang nạp dữ liệu...',
              error : 'Không có nhóm để tham gia hoặc xem'
      },
 
      panel = document.getElementById('fa_group_panel'),
      status = document.getElementById('fa_group_status'),
      storage = window.localStorage;
 
  /* check if group data is already storage */
  if (storage && storage['faGroupData_u' + _userdata.user_id] && storage['faGroupData_exp_u' + _userdata.user_id] > +new Date - cache_time) {
    panel.innerHTML = storage['faGroupData_u' + _userdata.user_id];
  } else {
    status.innerHTML = lang.loading;
 
    /* get group data via AJAX */
    jQuery.get('/groups?change_version=prosilver', function(d) {
      var node = [
            document.getElementById('fa_group_memberships'),
            document.getElementById('fa_group_join')
          ];
 
          frag = document.createDocumentFragment(),
 
          join = jQuery('form:has(select[name="g"])', d)[0],
          membership = jQuery('.noList a[href^="/g"]', d),
          i = 0,
          j = membership.length;
 
      status.innerHTML = '';
 
      /* if the member has group memberships */
      if (j) {
        node[0].innerHTML = '<div class="fa_group_title">' + lang.memberships + '</div>';
 
        for (; i < j; i++) {
          membership[i].href = membership[i].href.replace(/\?change_version=prosilver/, '');
          frag.appendChild(membership[i]);
        }
 
        node[0].appendChild(frag);
      }
 
      /* if the member has groups left to join */
      if (join) {
        join.action = '/groups';
        jQuery('input[name="tt"]', join).remove();
        jQuery('input[type="submit"]', join).attr('class', 'fa_group_button');
        node[1].innerHTML = '<div class="fa_group_title">' + lang.join + '</div>';
        node[1].appendChild(join);
      }
 
      if (!j && !join) {
        status.innerHTML = lang.error;
      }
 
      if (storage) {
        storage['faGroupData_u' + _userdata.user_id] = panel.innerHTML;
        storage['faGroupData_exp_u' + _userdata.user_id] = +new Date;
      }
    });
  }
}());
</script>

Tùy biến:

Để trang trí lại widget các bạn tìm đoạn css trong code trên:

Code:

<style type="text/css">#fa_group_panel { font-size:12px; font-family:arial, sans-serif; }
#fa_group_panel > div { margin:10px 3px; }
#fa_group_panel select { width:100%; }
#fa_group_memberships a { display:block; }
#fa_group_join dl { text-align:center; }
#fa_group_join dt { display:none; }
#fa_group_join dd { margin:0; }
.fa_group_title { font-weight:bold; color:#369; border-bottom:1px solid #369; padding-bottom:3px; margin:3px 0; }
.fa_group_button { color:#69C; background:transparent; border:1px solid #69C; border-radius:3px; padding:3px 6px; width:100%; }
.fa_group_button:hover { color:#FFF; background:#69C; }</style>