威尼斯www.9778.com-威尼斯正版官方网站

css中的那些布局

日期:2019-12-30编辑作者:服务器&运维

1、实现源码 复制代码 代码如下:

因为近期灵机一动,就总括了瞬间css中的三种成千上万的多列构造。

jQuery完成冻结表格行和列,jquery实现冻结表格

客商供给落到实处对表格数据的头几行依旧头几列举行冻结,即滚动时保持这几行/列不动,通过互连网搜索代码,参谋已有个别代码的思绪,完结了可以任意对行、列进行冷冻。

兑现原理:

创办两个div,div之间通过css完结层叠,每一种div放置当前表格的克隆。比方:必要行冻结时,创立存放冻结行表格的div,通过安装z-index属性和position属性,让冻结行表格在数额表格的上层。同理,供给列冻结时,创造贮存冻结列表格的div,并放置在数据表格的上层。倘诺须要行列都结霜时,则除了这么些之外创设冻结行、冻结列表格的div,还亟需创制左上角的一定行列表格的div,并放置在富有div的最上层。
管理表格的滚动事件,在表格横向恐怕纵向滚动时,同有时候让相应的冻结行和冻结列也一块儿滚动。
管理html的resize事件,同步改善表格的滚动区域上升的幅度和惊人

代码如下:

/*
 * 锁定表头和列
 * 
 * 参数定义
 *   table - 要锁定的表格元素或者表格ID
 *   freezeRowNum - 要锁定的前几行行数,如果行不锁定,则设置为0
 *   freezeColumnNum - 要锁定的前几列列数,如果列不锁定,则设置为0
 *   width - 表格的滚动区域宽度
 *   height - 表格的滚动区域高度
 */
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
  if (typeof(freezeRowNum) == 'string')
    freezeRowNum = parseInt(freezeRowNum)

  if (typeof(freezeColumnNum) == 'string')
    freezeColumnNum = parseInt(freezeColumnNum)

  var tableId;
  if (typeof(table) == 'string') {
    tableId = table;
    table = $('#' + tableId);
  } else
    tableId = table.attr('id');

  var divTableLayout = $("#" + tableId + "_tableLayout");

  if (divTableLayout.length != 0) {
    divTableLayout.before(table);
    divTableLayout.empty();
  } else {
    table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");

    divTableLayout = $("#" + tableId + "_tableLayout");
  }

  var html = '';
  if (freezeRowNum > 0 && freezeColumnNum > 0)
    html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';

  if (freezeRowNum > 0)
    html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';

  if (freezeColumnNum > 0)
    html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';

  html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';


  $(html).appendTo("#" + tableId + "_tableLayout");

  var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
  var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
  var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
  var divTableData = $("#" + tableId + "_tableData");

  divTableData.append(table);

  if (divTableFix != null) {
    var tableFixClone = table.clone(true);
    tableFixClone.attr("id", tableId + "_tableFixClone");
    divTableFix.append(tableFixClone);
  }

  if (divTableHead != null) {
    var tableHeadClone = table.clone(true);
    tableHeadClone.attr("id", tableId + "_tableHeadClone");
    divTableHead.append(tableHeadClone);
  }

  if (divTableColumn != null) {
    var tableColumnClone = table.clone(true);
    tableColumnClone.attr("id", tableId + "_tableColumnClone");
    divTableColumn.append(tableColumnClone);
  }

  $("#" + tableId + "_tableLayout table").css("margin", "0");

  if (freezeRowNum > 0) {
    var HeadHeight = 0;
    var ignoreRowNum = 0;
    $("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
      if (ignoreRowNum > 0)
        ignoreRowNum--;
      else {
        var td = $(this).find('td:first, th:first');
        HeadHeight += td.outerHeight(true);

        ignoreRowNum = td.attr('rowSpan');
        if (typeof(ignoreRowNum) == 'undefined')
          ignoreRowNum = 0;
        else
          ignoreRowNum = parseInt(ignoreRowNum) - 1;
      }
    });
    HeadHeight += 2;

    divTableHead.css("height", HeadHeight);
    divTableFix != null && divTableFix.css("height", HeadHeight);
  }

  if (freezeColumnNum > 0) {
    var ColumnsWidth = 0;
    var ColumnsNumber = 0;
    $("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "), th:lt(" + freezeColumnNum + ")").each(function () {
      if (ColumnsNumber >= freezeColumnNum)
        return;

      ColumnsWidth += $(this).outerWidth(true);

      ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
    });
    ColumnsWidth += 2;

    divTableColumn.css("width", ColumnsWidth);
    divTableFix != null && divTableFix.css("width", ColumnsWidth);
  }

  divTableData.scroll(function () {
    divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());

    divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());
  });

  divTableFix != null && divTableFix.css({ "overflow": "hidden", "position": "absolute", "z-index": "50" });
  divTableHead != null && divTableHead.css({ "overflow": "hidden", "width": width - 17, "position": "absolute", "z-index": "45" });
  divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "z-index": "40" });
  divTableData.css({ "overflow": "scroll", "width": width, "height": height, "position": "absolute" });

  divTableFix != null && divTableFix.offset(divTableLayout.offset());
  divTableHead != null && divTableHead.offset(divTableLayout.offset());
  divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
  divTableData.offset(divTableLayout.offset());
}

/*
 * 调整锁定表的宽度和高度,这个函数在resize事件中调用
 * 
 * 参数定义
 *   table - 要锁定的表格元素或者表格ID
 *   width - 表格的滚动区域宽度
 *   height - 表格的滚动区域高度
 */
function adjustTableSize(table, width, height) {
  var tableId;
  if (typeof(table) == 'string')
    tableId = table;
  else
    tableId = table.attr('id');

  $("#" + tableId + "_tableLayout").width(width).height(height);
  $("#" + tableId + "_tableHead").width(width - 17);
  $("#" + tableId + "_tableColumn").height(height - 17);
  $("#" + tableId + "_tableData").width(width).height(height);
}

function pageHeight() {
  if ($.browser.msie) {
    return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
  } else {
    return self.innerHeight;
  }
};

//返回当前页面宽度
function pageWidth() {
  if ($.browser.msie) {
    return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
  } else {
    return self.innerWidth;
  }
};

$(document).ready(function() {
  var table = $("table");
  var tableId = table.attr('id');
  var freezeRowNum = table.attr('freezeRowNum');
  var freezeColumnNum = table.attr('freezeColumnNum');

  if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {
    freezeTable(table, freezeRowNum || 0, freezeColumnNum || 0, pageWidth(), pageHeight());

    var flag = false;
    $(window).resize(function() {
      if (flag) 
        return ;

      setTimeout(function() { 
        adjustTableSize(tableId, pageWidth(), pageHeight()); 
        flag = false; 
      }, 100);

      flag = true;
    });
  }
});

动用时,只要在table元素设置freezeRowNum和freezeColumnNum属性值,就可以兑现冻结效果

复制代码 代码如下:<table id="reportTable" width="1901" freezeRowNum="2" freezeColumnNum="2" class="report" align="center">
...
</table>

上述所述就是本文的全体内容了,希望咱们能够中意。

客户须求完结对表格数据的头几行还是头几列举办冷冻,即滚动时保持这几行/列不动,通过...

JavaScript兑现获取table中某一列的值

两列自适应布局

学号 姓名 性别 年龄
1 李斯 22
2 王倩 20
3 于谦 18
4 柳浪 19
5 诸葛亮 20
6 东方云 21
7 公孙策 22
8 宝清 23
9 智育 20
10 柳丝丝 21

两列自适应结构算是css布局里面最底蕴的生龙活虎种构造了,不菲网址在使用。
这种布局平常是左边固定,左侧自适应,当然也可以有反过来的,道理相符,这里有有个别种艺术。

2、设计结果 单击第二列时

图片 1

(张鑫旭老师的博客是左边流式布局,右边固定宽度)
  • 左浮动+margin

 因为浮动会导致元素脱离文档流,所以下面的元素会占据浮动元素原来的位置。
 这个时候只要对右边元素设置margin-left:左边div宽度 就可以实现自适应布局。

代码:左浮动达成两列布局

  • 纯属定位完毕两列构造

 这个原理类似浮动,因为绝对定位会脱离文档流,只需要设置右div的margin-left就能实现布局。

代码:纯属定位达成两列结构

  • flex达成两列布局

 flex布局一直挺好用,无奈兼容性捉急,ie10+才支持。  

 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。  

 flex布局默认项目是主轴为水平方向,最主要的是flex属性。flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。  


 大概就是给左边的div一个固定值,然后给右边设置flex:auto;来实现两列布局。  


 这里不多对flex布局介绍,有兴趣的可以看一下

阮后生可畏峰先生的那篇博客:flex布局

这里是代码链接:flex结构达成两列布局

  • calc完毕两列布局

  这是css3里面的新属性,兼容性还可以,在ie9+、FF4.0+、Chrome19+、Safari6+都得到了支持。  

 通过calc可以使用百分比、em、px和rem单位值计算出其宽度或者高度,这样就不用考虑div值到底是多少。所以可以对右边div设置width:calc(100%-100px);来实现自适应布局。  

代码链接:calc达成两列结构

  • 浮动+margin负值来落成

 这是之前写ife任务的时候在一篇博客上看到的。

 实现方法是给右边的div外面再套上一个父div,然后让父div的宽度设为100%。
 对父div和左边的div都设置左浮动,再让左div的margin-left:-100%,右div设置margin-left:左div的宽度。
 这样就实现了自适应布局,当然左右div的前后顺序要反过来。

现实看代码:margin负值完结自适应

三列自适应结构

除了普及的两列构造,大家也时常能够看出三列布局,左右恒定,中间自适应。

图片 2

 (这里只是拿这张图举个例子,w3school官网是三列固定布局)
  • 变迁落成三列布局

  这个类似两列布局的浮动,对左右div分别设置左右浮动,中间div设置margin-left和margin-right来实现,当然在html中的顺序应该是左右中。  

代码链接:变化达成三列布局

  • margin负值达成三列布局

  原理同margin负值实现两列布局,不多说了。

直接上代码:margin负值完结三列构造

  • flex实现三列构造

 和flex两列布局一个原理,对两边设置flex:0 0 100px,中间设置flex:auto。

代码代码:flex实现三列布局

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:css中的那些布局

关键词:

jQuery is函数用法3例_jquery_脚本之家

jQuery提供了is(卡塔尔方法能够很有益于的论断成分是或不是可知,是或不是隐伏,是或不是选中。 生龙活虎、推断元...

详细>>

jQuery判断元素是否存在的可靠方法_jquery_脚本之家【威尼斯www.

使用传统javascript方法,如下:复制代码代码如下:if(document.getElementById { // 找到到对应元素 } else { //没有找到找到到对...

详细>>

javascript设计模式之单体模式

单人体模型式 单体是在剧本加载时创建的,能将风流罗曼蒂克层层有关系的变量和措施组织为一个逻辑单元,逻辑单...

详细>>

javascript中的变量是传值还是传址的?_javascript技巧_脚本之家

这个标题念起来有点拗口,但却是理解数据结构的关键。标题中的4个术语,对应的英文分别是:shallowcopy、deep copy、...

详细>>