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

最新推荐文章于 2015-08-26 10:51:41 发布

有钱斯基

最新推荐文章于 2015-08-26 10:51:41 发布

阅读量1.5k

点赞数

分类专栏： javascript 文章标签：新浪微博 function callback class javascript stylesheet

本文链接：https://blog.csdn.net/zuoming99/article/details/6630034

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用到了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 me
		if(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;
			else
				params = 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]);
			//render
			me.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 content
				if (me.content){
					b.append(me.content);
				}
				//dynamic content
				else if (me.uri){
					ZM.lazy(me.uri, me.params, function(Component){
						b.append(new Component().dom);
					});
				}else
					throw '"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 it
			getNameCard(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 namecard
	function getNameCard(link, callback) {
		var u = $(link), ly = u.data('namecard');

		//if the card is exists then return it
		if(ly){
			callback(ly);
			return;
		}

		//use zm.Layer namespace
		ZM.ns('zm.Layer', function(Layer) {

			//if the card is not exists then create it
			ly = 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 layer
			u.data('namecard', ly);
			
			//return
			callback(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="http://weibo.com/yaochen" target="_blank"><img src="http://tp2.sinaimg.cn/1266321801/50/5601436643/0" class="picborder_r" imgtype="head" title="<%=user.get("name")%>" uid="<%=user.get("id")%>"></a></dt>\
    <dd class="name_card_con0"><a href="http://weibo.com/yaochen" title="<%=user.get("name")%>" uid="1266321801" target="_blank"><%=user.get("name")%><img class="small_icon vip" src="http://img.t.sinajs.cn/t35/style/images/common/transparent.gif" title="" alt=""></a><span>(<a href="#">设置备注</a>)</span>\
    <p class="address"><%=user.get("addr")%><img src="http://img.t.sinajs.cn/miniblog2style/images/common/transparent.gif" class="small_icon sicon_female" title="女"></p>\
    <p class="name_card_con4"><span><a href="http://weibo.com/1266321801/follow" title="668" target="_blank">关注</a>668</span><i>|</i><span><a href="http://weibo.com/1266321801/fans" title="9884708" target="_blank">粉丝</a>988万</span><i>|</i><span><a href="http://weibo.com/yaochen" 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="http://badge.weibo.com/1266321801?mid=101&source=5"><img alt="舌战群儒" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey4g0zyng.gif"></a>\
		<a title="微博控" href="http://badge.weibo.com/1266321801?mid=297&source=5"><img alt="微博控" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diey1cexyvg.gif"></a>\
		<a title="语惊四座" href="http://badge.weibo.com/1266321801?mid=98&source=5"><img alt="语惊四座" src="http://ww2.sinaimg.cn/thumbnail/62015b43tw1diey5cvhkbg.gif"></a>\
		<a title="谈笑风生" href="http://badge.weibo.com/1266321801?mid=8&source=5"><img alt="谈笑风生" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1diexyf3yx1g.gif"></a>\
		<a title="如来神掌" href="http://badge.weibo.com/1266321801?mid=178&source=5"><img alt="如来神掌" src="http://ww3.sinaimg.cn/thumbnail/62015b43tw1diexy5d6wog.gif"></a>\
		<a title="呼风唤雨" href="http://badge.weibo.com/1266321801?mid=2&source=5"><img alt="呼风唤雨" src="http://ww1.sinaimg.cn/thumbnail/62015b43tw1dieykse1ung.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="http://img.t.sinajs.cn/t35/style/css/common/index.css?version=20110722204414" type="text/css" rel="stylesheet">
    	<link href="http://img.t.sinajs.cn/t35/style/css/common/layer.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="http://weibo.com/yaochen" 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="http://tp2.sinaimg.cn/1266321801/50/5601436643/0"></a></li>
    	</ol>
    	
    </body>
</html>

有钱斯基

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
山寨新浪微博的用户名片（简易实现）

用到了namespace、lazyLoad等技巧，废话不多说，直接上代码丢到tomcat/webapps/ROOT目录下就可以访问了有疑问或者不满请在下方拍砖或QQ联系zuoming@wendui.com
复制链接

扫一扫

专栏目录