今天在做web开发,上网搜索资料时,无意间发现了JSer,现简单介绍一下JSer。
JSer是一款类似于jQuery的开源脚本框架,使用JSer,将极大的简化您的javascript开发,使程序代码更加简洁和高效! 使用JSer,您几乎无需再考虑各浏览器的兼容问题,目前JSer兼容的浏览器核心: IE, Firefox, Opera, Chrome, safari。 通过JSer,您可以便捷的使用DOM操作、CSS样式访问、属性读写、事件绑定、行为切换、动态载入、数据缓存、URL与AJAX等众多功能。更多资料可以去其官网了解:http://jdiy.net/
利用JSer很方便实现了自己期待的功能,点击一个连接,弹出一个可以拖动的半透明的小窗体,用来显示相关的信息,体验感觉好不错,之后又用JQuery记录进行了分页处理,效果还真不错,用JSer肯定也能非常方便实现分页的,在这里为了练习而使用了JQuery。其实这些实现方式有很多种,不管使用哪种,只要自己真正掌握到了知识并加以适当地应用了就行,现和大家分享一下,附上效果图如下:
主要代码如下:
需要导入JSer.js和JSer.modalDialog.js,可以去官网下载。
<input type="button" id="btnModal" value="点击按钮弹出" />
触发事件
<SCRIPT type=text/javascript>
JSer.exec(function(){
JSer("#btnModal").click(function(){
JSer("#modal").modalDialog({//显示modalDialog.
dragClass:"#jcmTitle", //选择可拖动区域(可以是任意的JSer选择符)
closeClass:"#jcmClose" //选择可关闭区域(可以是任意的JSer选择符)
});
});
});
</SCRIPT>
先简单地对页面进行了下布局
<div id="modal"
style="display: none; width: 415px; height: 330px; background-color: white; border: 1px gray solid;">
<div id="jcmTitle"
style="float: left; width: 415px; line-height: 25px; background-color: #eee;">
<span id="jcmClose" style="float: right; background-color: #ddd">关闭</span>
<strong>最新社员留言信息</strong>
</div>
<div style="clear: both; padding: 8px;">
<DIV align=center>
<IMG
style="BORDER-RIGHT-WIDTH: 0px; WIDTH: 300px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 95px; BORDER-LEFT-WIDTH: 0px"
alt=最新社员留言 src="images/main/msg.jpg">
</DIV>
<div id="t1">
<s:iterator value="%{#request.msgNotSubList}" id="s">
<div>
<span id="t">
<table width=400px>
<tr>
<td rowspan=2>
<img src="<s:property value='#s.value2' />" width="50px" />
</td>
<td>
<font size=1.8><s:property value='#s.value1' />
</font>
</td>
</tr>
<tr>
<td colspan=2>
<font size=1.8><s:property value='#s.value3' />
</font>
</td>
</tr>
</table> </span>
<hr width=400px />
</div>
</s:iterator>
</div>
<div align=center id="sidebar">
<span> 总计 <font color=red><span id="sp1"></span>
</font> 条 <font color=red><span id="sp2"></span>
</font> 条/页 共 <font color=red><span id="sp3"></span>
</font> 页 当前第 <font color=red><span id="sp4"></span>
</font> 页 <a id="first">首页</a> <a id="prev">上页</a>
<a id="next">下页</a> <a id="end">尾页</a> </span>
</DIV>
</div>