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

来源：互联网发布：python视频教程推荐编辑：程序博客网时间：2024/05/20 05:06

插件来源：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" onmouseover='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);
            }
        }

效果：