zoukankan      html  css  js  c++  java
  • 页面抽屉效果

    (function () {
    $.fn.IngeniousDT = function (tableTitle) {
    //判断应合并的行数
    var tdColspan = $(this).find("tr").last().find("td").length;
    
    $(this).before('<table class="db_tab"><thead><tr align="center"><td class="db_tab_l" colspan="' + tdColspan + '" style="text-align: left;"><div style="z-index:1000;vertical-align: middle; cursor: pointer;font-weight:bold;" isshow="true" ><img align="left" src="../../../../../Images/icon_unfold.gif" />  ' + tableTitle + '</div></td></tr></thead></table>');
    
    // 操作的div对象
    var divObjDo = $(this).prev("table[class=db_tab]").find("div");
    
    //收缩拉伸的div对象
    $(this).wrapAll("<div></div>");
    var divObj = $(this).parent();
    //获得收缩拉伸的div对象的高度
    var divHeight = $(this).parent().height();
    
    divObjDo.bind("click", function () {
    if (divObjDo.attr("isshow") == "true") {
    callbackFuncIngenious(divObj, divObjDo, "false", divHeight);
    } else {
    callbackFuncIngenious(divObj, divObjDo, "true", divHeight);
    }
    });
    };
    
    
    var callbackFuncIngenious = function (obj, objDo, isShow, divHeight) {
    var phtName = "";
    var opacityVal = "";
    
    if (isShow == "false") {
    divHeight = '-=' + divHeight + 'px';
    phtName = "";
    opacityVal = "0";
    } else {
    divHeight = '+=' + divHeight + 'px';
    phtName = "un";
    opacityVal = "1";
    }
    
    objDo.find("img").attr("src", "../../../../../Images/icon_" + phtName + "fold.gif");
    
    objDo.attr("isshow", isShow);
    
    obj.animate({ height: divHeight, opacity: opacityVal });
    obj.find("> *").slideToggle();
    };
    })();
    

      

  • 相关阅读:
    用于.NET环境的时间测试(转)
    HTML->CSS->JS->PHP的顺序及相关网址(转)
    经典的CSS代码(转)
    初阶html学习总结(一)(转)
    如何学习javascript?(转)
    如何给网页标题栏上添加图标(favicon.ico)(转)
    网页颜色代码对照(转)
    前端开发代码命名的整理(转)
    前端代码规范总结(转)
    基于重心偏移的视差计算
  • 原文地址:https://www.cnblogs.com/zzq-include/p/4290099.html
Copyright © 2011-2022 走看看