zoukankan      html  css  js  c++  java
  • jQuery powerFloat万能浮动层下拉层插件

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

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



    test.aspx页面:


    <script type="text/javascript">
            $(function () {         
                $(".markSelectBox").powerFloat({
                    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);             
                }           
            }

    效果:


  • 相关阅读:
    【LeetCode-动态规划】编辑距离
    【LeetCode-栈】计算器
    【LeetCode-栈】字符串解码
    【LeetCode-数组】缺失的第一个正数
    【LeetCode-查找】寻找重复数
    【LeetCode-堆】丑数
    【LeetCode-堆】数据流中的第K大元素
    【LeetCode-排序】根据身高重建队列
    立项与启动
    JS中match方法探究
  • 原文地址:https://www.cnblogs.com/gdjlc/p/2086877.html
Copyright © 2011-2022 走看看