jQuery powerFloat万能浮动层下拉层插件

插件来源：http://www.zhangxinxu.com/wordpress/?p=1328

 

浮动层功能很强大，用它加ajax实现了鼠标移进数据列表中的数据项时显示每项的详细内容。

 

 

test.aspx页面：


<script type="text/javascript">
        $(function () {         
            $(".markSelectBox").powerFloat({
                width: 400,
                offsets: { x: -150, y: 0 },
                eventType: "hover",
                target: "#qmpanel_shadow"
            });    
        });
        function GetDetail(id) {         
            jQuery.post("/ajax/GetMsgDetail.ashx", { id: id },
                   function (data, textStatus) {
                       $("#qmpanel_shadow").html(data);
                   });
        }
</script>



<a href="javascript:void(0)" class="markSelectBox" οnmοuseοver='javascript:GetDetail(<%# Eval("Id")%>)' style="cursor: pointer;">
    <%# Eval("MSubject") %>
</a>



<div style="position: absolute;background: #fff;border: 1px solid #aaa; display: none" id="qmpanel_shadow">
      加载中。。。
</div>



GetMsgDetail.ashx 页面：


 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            if (!string.IsNullOrEmpty(context.Request.Params["id"]))
            {
                int id = Convert.ToInt32(context.Request.Params["id"]);
                Message m = IOC.R<IMessage>().Get(id);
                   context.Response.Write(m.MContent);             
            }           
        }

 

 

 

效果：