山寨新浪微博的用户名片（简易实现）

admin 管理员组

文章数量: 1087649

山寨新浪微博的用户名片（简易实现）

用到了namespace、lazyLoad等技巧

丢到tomcat/webapps/ROOT目录下就可以访问了

有疑问或者不满请在下方拍砖或QQ联系zuoming@wendui.com

附件下载

目录结构如下

app

|--js

   |--commen.js

   |--event.js

   |--jquery-1.3.1.min.js    

|--jsp

   |--components

      |--user

         |--panel.jsp

|--WEB-INF

   |--web.xml

|--default.html

common.js

var ZM;
if(!ZM)ZM = {};
/*** namespace support*/
ZM.ns = (function() {var fn = function(ns, callback) {if(!ns)throw 'namespace cannot be null';//use exsist meif(useNs(ns, callback)) {return;}ns = ns.split('.');var inc = fn._includes;do {var s = ns.shift();if(!inc[s]) {inc[s] = {};}inc = inc[s];} while(ns.length);callback.call(inc, inc);}fn._includes = {};var useNs = function(ns, callback) {try {var inc = eval('fn._includes.' + ns);if(inc) {callback.call(inc, inc);return true;}} catch(_) {}};return fn;
})();/*** require javascript file*/
ZM.require = (function() {function require(src, callback) {var script = document.createElement("script");if(script.addEventListener)script.addEventListener("load", callback, false);else if(script.attachEvent)script.attachEvent("onreadystatechange", function() {callbackIE(callback);});script.src = src;document.getElementsByTagName("head")[0].appendChild(script);}//damn it IE!var callbackIE = function(callback) {var target = window.event.srcElement;if(target.readyState == "loaded")callback.call(target);};return require;
})();/*** lazy load javascript and eval* @param url* @param params (optional) an Object or a params getter function* @param success callback*/
ZM.lazy = (function($) {var lz = function(uri, params, success) {if(typeof params == 'function'){if(!success)success = params;elseparams = params();}$.ajax({url : ZM.PATH+uri,dataType : "script",data: params,success : function(txt){var fn = eval(txt);success(fn);},error: function(){throw 'the uri "'+uri+'" was not found';}});};lz._files = {};return lz;
})(jQuery);//
//												//
//					components					//
//												//
//ZM.ns('zm', function(){/*** absolute layer*/this.Layer = (function(){var ly = function(){var me = this;//replace default config$.extend(me, arguments[0]);//renderme.dom = me.renderer();me.dom.appendTo(me.renderTo);if(me.autoShow)me.show();me.ready();};ly.prototype = {uri: null,params: null,content: null,autoShow: false,renderTo: 'body',renderer: function(){
var s = '\
<div class="-ly mBlogLayer" style="position:absolute; display:none;">\<div class="layerBox">\<a style="position:absolute; top:5px; right:5px;" class="-ly-x" href="javascript:void(0);">x</a>\<div class="-ly-b"></div>\</div>\
</div>';var me = this, dom = $(s), b = dom.find('div.-ly-b');//static contentif (me.content){b.append(me.content);}//dynamic contentelse if (me.uri){ZM.lazy(me.uri, me.params, function(Component){b.append(new Component().dom);});}elsethrow '"content" or "uri" must specify one';return dom;},ready: function(){var me = this;me.dom.find('a.-ly-x:first').click(function(){me.destroy();});},destroy: function(){this.dom.remove();}};return ly;})();});

events.js

(function() {var tmr;/*** when mouse over a "a[namecard]" then show the user card*/$('a[namecard]').live('mouseover', function(){clearTimeout(tmr);var u = $(this);tmr = setTimeout(function(){//get or create the namecard and display itgetNameCard(u, function(ly){ly.dom.show();});}, 400);})/*** when mouse out a "a[namecard]" then destroy the user card*/.live('mouseout', function() {clearTimeout(tmr);var u = $(this);tmr = setTimeout(function() {destroyNameCard(u);}, 400);});//get or create the namecardfunction getNameCard(link, callback) {var u = $(link), ly = u.data('namecard');//if the card is exists then return itif(ly){callback(ly);return;}//use zm.Layer namespaceZM.ns('zm.Layer', function(Layer) {//if the card is not exists then create itly = new Layer({uri : '/jsp/components/user/panel.jsp',params : {id : u.attr('uid')}});ly.dom//when mouse over then clear the Hide timeout.mouseover(function(){clearTimeout(tmr);})//when mouse out then hide the Layer.mouseout(function() {tmr = setTimeout(function(){destroyNameCard(u);}, 400);});//bind data with the layeru.data('namecard', ly);//returncallback(ly);});}function destroyNameCard(link) {var u = $(link), ly = u.data('namecard');u.removeData('namecard');ly.destroy();}})();

panel.jsp

/* User Panel */
/*
<%@page contentType="text/html; charset=UTF-8"%>
<%
java.util.HashMap user = new java.util.HashMap();
user.put("name", request.getParameter("id"));
user.put("name", "姚晨");
user.put("addr", "北京，朝阳区");
%>
*/;(function(){var Panel = function(){this.dom = this.renderer();};Panel.prototype = {//此处HTML原封不动的引用了新浪微博的HTML代码renderer: function(){
var s = '\
<div class="name_card"><div class="layerArrow"></div><div>\
<dl class="name clearFix">\<dt><a href="" target="_blank"><img src="" class="picborder_r" imgtype="head" title="<%=user.get("name")%>" uid="<%=user.get("id")%>"></a></dt>\<dd class="name_card_con0"><a href="" title="<%=user.get("name")%>" uid="1266321801" target="_blank"><%=user.get("name")%><img class="small_icon vip" src=".gif" title="" alt=""></a><span>(<a href="#">设置备注</a>)</span>\<p class="address"><%=user.get("addr")%><img src=".gif" class="small_icon sicon_female" title="女"></p>\<p class="name_card_con4"><span><a href="" title="668" target="_blank">关注</a>668</span><i>|</i><span><a href="" title="9884708" target="_blank">粉丝</a>988万</span><i>|</i><span><a href="" title="4061" target="_blank">微博</a>4061</span></p>\</dd>\
</dl>\
<dl class="info clearFix">\
<dt>简介：</dt>\
<dd><p class="gray6" title="演员，代表作电视剧《武林外传》《潜伏》电影《爱出色》等">演员，代表作电视剧《武林外传》《潜伏》电影《爱出色》等</p></dd>\
</dl>\<dl class="info medal clearFix">\<dt>勋章：</dt>\<dd class="xz_listZ">\<a title="舌战群儒" href="=101&source=5"><img alt="舌战群儒" src=".gif"></a>\<a title="微博控" href="=297&source=5"><img alt="微博控" src=".gif"></a>\<a title="语惊四座" href="=98&source=5"><img alt="语惊四座" src=".gif"></a>\<a title="谈笑风生" href="=8&source=5"><img alt="谈笑风生" src=".gif"></a>\<a title="如来神掌" href="=178&source=5"><img alt="如来神掌" src=".gif"></a>\<a title="呼风唤雨" href="=2&source=5"><img alt="呼风唤雨" src=".gif"></a>\</dd>\</dl>\<div class="links">\<div class="MIB_btn2 rt">已关注<span class="MIB_line_sp">|</span><a class="MIB_linkbl" href="javascript:void(0)"><em>取消</em></a></div>\<span class="name_card_con3" style="display:none"><i class="com_mess"> </i><a href="javascript:void(0)">设置分组</a></span>\</div>\</div>\
</div>';return $(s);}};return Panel;
})();

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href=".css?version=20110722204414" type="text/css" rel="stylesheet"><link href=".css?version=20110722204414" type="text/css" rel="stylesheet"><script src="js/jquery-1.3.1.min.js" type='text/javascript'></script><script src="js/common.js" type='text/javascript'></script><script>ZM.PATH = '';	//example ZM.require('/js/events.js');</script></head><body><ol><li><a namecard="true" uid="1266321801" href="" action-type="namecard" action-data="uid=1266321801&name=&reason=&type=&direction=auto&urltype=usercard&pageid=myprofile&param=type###uid###name###reason###pageid"><img title="姚晨" uid="1266321801" imgtype="head" src=""></a></li></ol></body>
</html>

本文标签： 山寨新浪微博的用户名片（简易实现）