كود لتسهيل عمليات وسم الأعضاء في المواضيع و المساهمات ـ

نبدأ بسم الله باستعراض مثال من منتداي التجريبي
عند كل إسم مستخدم نجد هذه العلامة :

نضغط عليها فتعطينا :

تكتب ما تريد توجيهه للعضو و تصل رسالة تخبره أنك وجهت له الحديث

الجزء الثاني من الشرح ــ عمل أيقونة مثل التي في الإقتباس تحت عنوان وسم العضو

الكود:

/* FORUM VERSIONS
 * 0 = PHPBB2
 * 1 = PHPBB3
 * 2 = PUNBB
 * 3 = INVISION
 */
$(function() {
  var version = 0,
      image = 'http://i19.servimg.com/u/f19/18/21/60/73/mentio10.png';
 
  if (/mode=reply/.test(window.location.search) && my_getcookie('fa_mention')) {
    document.post.message.value += '@"' + my_getcookie('fa_mention') + '" ';
    my_setcookie('fa_mention','');
  } if (!/\/t\d+/.test(window.location.pathname)) return;
 
  for (var a = $(['.post-options', '.profile-icons', '.post-options', '.posting-icons'][version]), b, c, d = ['.name strong a', '.author a', '.username a', '.author a'][version], e, i = 0, j = a.length, t = document.getElementById('text_editor_textarea'), l = version == 1 || version == 3; i<j; i++) {
    b = document.createElement('IMG');
    b.src = image;
    b.alt = 'Mentionner';
    b.title = 'Mentionner ' + $(a[i]).closest('.post').find(d + ':not(.fa-mention)').text();
    b.className = 'i_icon_mention';
    b.onclick = function() {
      var n = this.title.replace(/^.*?\s/,'');
    
      if ($.sceditor) t.insertText('@"' + n + '" ');
      else {
        my_setcookie('fa_mention', n);
        window.location.href = '/post?t=' + window.location.pathname.replace(/\/t(\d+)-.*/,'$1') + '&mode=reply';
      }
    };
 
    if (l) {
      c = document.createElement('LI');
      c.appendChild(b);
    }
  
    a[i].insertBefore(l ? c : b, a[i].firstChild);
  }
 
  $(function(){
    if (!$.sceditor) return;
    t=$(t).sceditor('instance');
  });
});

الخطوة الأخيرة و هي وضع نظام الوسوم في صندوق الرد

الكود:

$(function(){
   if (!$.sceditor || /\/privmsg/.test(window.location.pathname)) return;
   var storage = window.localStorage, s = document.createElement('SELECT'), amis;
 
   if (storage && storage.faAmis && storage.faAmisExp > +new Date - 29*59*1000 && storage.faAmisUser == _userdata.username) s.innerHTML = storage.faAmis;
   else {
      $.get('/privmsg?mode=post', function(d) {
         amis = $('select[name="userfriend"]', d)[0] || 0;
  
         if (amis) {
            amis.firstChild.innerHTML = 'Sélectionner un ami';
            s.innerHTML = amis.innerHTML;
         }
  
         if (storage) {
            storage.faAmis = amis ? amis.innerHTML : 0;
            storage.faAmisUser = _userdata.username;
            storage.faAmisExp = +new Date;
         }
      });
   }
 
 
   $.sceditor.command.set('mention', {
      dropDown : function(editor, caller, callback) {
         var a = document.createElement('DIV'), b = document.createElement('INPUT'), c = document.createElement('INPUT');
         b.type = 'button';
         b.value = 'Insert';
         b.className = 'button';
 
         c.type = 'text';
         c.id = 'fa-mention';
 
         a.innerHTML = '<div><label for="fa-mention">Pseudo de l\'utilisateur :</label></div>' + ( s.innerHTML ? '<div><label>Mentionner un ami :</label></div>' : '' ) + '<div></div>';
         a.firstChild.appendChild(c);
         a.lastChild.appendChild(b);
 
         if (s.innerHTML != 0) {
            s.value = '';
            a.getElementsByTagName('DIV')[1].appendChild(s);
            s.onchange = function() {
               c.value = s.value;
            };
         }
 
         b.onclick = function() {
            c.value && callback(c.value);
            editor.closeDropDown(true);
         };
 
         editor.createDropDown(caller, 'insertmention', a);
      },
 
      exec : function(c) { mention(c, this) },
      txtExec : function(c) { mention(c, this) },
 
      tooltip : 'Mentionner un membre'
   });
 
   toolbar = toolbar.replace(/quote,/,'mention,quote,');
 
   function mention(c, e) {
      $.sceditor.command.get('mention').dropDown(e, c, function(pseudo) {
         e.insertText('@"' + pseudo + '" ');
      });
   }
});

الكود:

/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(http://i19.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}

ملاحظات عامة