zoukankan      html  css  js  c++  java
  • 智能浮动表头

    //实现表头智能浮动,容器如果指定则在容器中浮动,不指定则在window中浮动
    //要求表格要有thead部份
    //调用:
    //$("#table1").smartFloatTableHeader(document.getElementById('table1').parentNode);
    $.fn.smartFloatTableHeader = function (container) {
        if (!container) container = window;
        if (typeof (container) == 'string') {
            container = document.getElementById(container);
        }
        var smartFloat = function (element) {
            var newTable = element.clone();                 //复制一个新的表格出来
            newTable.find('tbody').hide();                  //表体隐藏
            newTable.css({  element.width() });       //设置复制出来的表格与源表格同宽度(某些控件生成的表格未设置宽度)
            $(newTable).insertBefore(element).hide();       //先不显示复制出来的表格
            $(element).parents().scroll(function () {               //监控容器及父元素滚动事件
                var containerTop = container == window ? 0 : $(container).offset().top,  //容器顶部位置
                    elementTop = element.offset().top,          //最少滚动多少才到隐藏位置
                    scrolls = $(this).scrollTop(),              //滚动高度
                    emementHeight = $(element).outerHeight(),   //元素总高度,考虑可能是动态的,每次滚动时判断
                    offset = $(element).offset();               //源控件位置
                //源表头进入隐藏区域并且表尾未进入隐藏区域时显示复制内容
                if (containerTop > elementTop && containerTop < elementTop + emementHeight) {
                    newTable.show();
                    if (window.XMLHttpRequest) {
                        newTable.css({
                            position: "fixed",
                            top: containerTop,
                            left: offset.left
                        });
                    } else {//这段针对老式浏览器,未测试
                        newTable.css({
                            top: scrolls - containerTop,
                            left: $(element).position().left
                        });
                    }
                } else {
                    newTable.hide();
                }
            });
        };
        return $(this).each(function () {
            smartFloat($(this));
        });
    };

  • 相关阅读:
    哈夫曼(Huffman)编码
    面向对象的3个基本要素和5个基本设计原则(整理)
    面向对象设计原则OO
    Java多线程中start()和run()的区别
    HBase入门
    SparkGraphXTest.scala
    IntellijIdea中常用的快捷键
    SparkSQLTest.scala
    SparkStreamingTest.scala
    (转)理解POST和PUT的区别,顺便提下RESTful
  • 原文地址:https://www.cnblogs.com/apollokk/p/6713808.html
Copyright © 2011-2022 走看看