Discuz! 官方站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 10425|回复: 0

用户名片的 js 实现

[复制链接]
发表于 2011-4-19 12:01:12 | 显示全部楼层 |阅读模式
在论坛的主题列表页,鼠标放到用户名上,会弹出用户名片。这个弹出用户名片的过程是 通过 js 来实现的,下面简单说一下实现的过程:

1、当我们在后台 => 界面 => 界面设置 => 全局,开启显示用户名片时,在template\default\common\header_common.htm中,通过 js ,将显示用户名片的设置,赋给 showusercard 变量
2、我们查看一下主题列表页的模板文件template\default\forum\forumdisplay_list.htm,找到
  1. <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 ,翻到最后,有一段在页面加载完后增加监听事件的代码。
  1. _attachEvent(window, 'load', cardInit, document);
复制代码

在页面 onload 后,执行 cardInit 函数(具体见 _attachEvent 函数)
4、在 cardInit 函数中,首先定义了一个 function--cardShow ,然后判断页面中的a标签中有没有 c 属性。
  1. if(a[i].getAttribute('c'))
复制代码

如果有,动态增加 mid 属性
  1. a[i].setAttribute('mid', hash(a[i].href));
复制代码

当鼠标移上去后,执行 cardShow 函数;
  1. a[i].onmouseover = function() {cardShow(this)};
复制代码

鼠标移出时,清除显示。
  1. a[i].onmouseout = function() {clearTimeout(USERCARDST);};
复制代码


在 cardShow 函数中,最重要的是 ajaxmenu 函数。
  1. USERCARDST = setTimeout(function() {ajaxmenu(obj, 500, 1, 2, pos, null, 'p_pop card');}, 250);
复制代码

5、在 ajaxmenu 函数中,动态创建 div ,然后用 ajaxget 方法获取 a 标签的 URL 内容。这样,用户名片就可以显示了。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

腾讯云「工商注册服务」全新上线!全场低至10元起,一站搞定工商服务,让创业起步更轻松

小黑屋|Discuz! 官方站 ( 粤B2-20090059-165 )star

GMT+8, 2020-9-22 23:34

Powered by Discuz! X3.3

Copyright © 2001-2019 Tencent Cloud.

快速回复 返回顶部 返回列表