JSer做的模式悬浮窗体与Jquery做的分页

今天在做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>&nbsp;条 &nbsp; <font color=red><span id="sp2"></span>
     </font>&nbsp;条/页&nbsp; 共 <font color=red><span id="sp3"></span>
     </font> &nbsp;页&nbsp; 当前第 <font color=red><span id="sp4"></span>
     </font> &nbsp;页 &nbsp; <a id="first">首页</a> &nbsp; <a id="prev">上页</a>
      &nbsp; <a id="next">下页</a> &nbsp; <a id="end">尾页</a> </span>
    </DIV>
   </div>