用到了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¶m=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>