Discuz用户名片的 js 实现

Discuz用户名片的 js 实现

在论坛的主题列表页，鼠标放到用户名上，会弹出用户名片。这个弹出用户名片的过程是 通过 js 来实现的，下面简单说一下实现的过程：

1、当我们在后台 => 界面 => 界面设置 => 全局，开启显示用户名片时，在template\default\common\header_common.htm中，通过 js ，将显示用户名片的设置，赋给 showusercard 变量
2、我们查看一下主题列表页的模板文件template\default\forum\forumdisplay_list.htm，找到

• <a href="home.php?mod=space&uid=$thread[authorid]" c="1">$thread[author]</a>
  

，这是显示主题的作者。当鼠标放到界面的主题作者上，弹出层才会出现。我们注意到，在这个地方并没有执行 js 代码，它的实现是通过设立了 c="1" 这个标识来显示用户名片。
3、对模板中的 c 属性进行监测，是通过 static\js\common.js 来实现的，打开 common.js ，翻到最后，有一段在页面加载完后增加监听事件的代码。

• _attachEvent(window, 'load', cardInit, document);
  

在页面 onload 后，执行 cardInit 函数（具体见 _attachEvent 函数）
4、在 cardInit 函数中，首先定义了一个 function--cardShow ，然后判断页面中的a标签中有没有 c 属性。

• if(a.getAttribute('c'))
  

如果有，动态增加 mid 属性

• a.setAttribute('mid', hash(a.href));
  

当鼠标移上去后，执行 cardShow 函数；

• a.onmouseover = function() {cardShow(this)};
  

鼠标移出时，清除显示。

• a.onmouseout = function() {clearTimeout(USERCARDST);};
  

在 cardShow 函数中，最重要的是 ajaxmenu 函数。

• USERCARDST = setTimeout(function() {ajaxmenu(obj, 500, 1, 2, pos, null, 'p_pop card');}, 250);
  

5、在 ajaxmenu 函数中，动态创建 div ，然后用 ajaxget 方法获取 a 标签的 URL 内容。这样，用户名片就可以显示了。