生活随笔
收集整理的這篇文章主要介紹了
jQuery控制表格垂直滚动条
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
表格table水平自適應(yīng)，可以設(shè)置寬度100%
表格table垂直自適應(yīng)，需要設(shè)置表格的高度，根據(jù)高度，表格的垂直滾動條會自動的顯示和隱藏
垂直滾動條，需要設(shè)置指定的高度，當table的高度超過這個高度時，就會出現(xiàn)垂直滾動條
頁面的元素都是分塊的，tab、search、title、button、table等模塊，頁面和頁面上的元素也是不一樣的，需要jQuery獲取高度
$(
function () {var webHeight = window.innerHeight;
var tabHeight = $(
'.tabStyle').innerHeight();
var searchHeight = $(
'.searchStyle').innerHeight();
var titleHeight = $(
'.toolTitleStyle').innerHeight();
var toolHeight = $(
'.toolStyle').innerHeight();
var pageHeight = $(
'.pagefooterStyle').innerHeight();
if (tabHeight ==
null) {tabHeight =
0;}
if (searchHeight ==
null) {searchHeight =
0;}
if (titleHeight ==
null) {titleHeight =
0;}
if (toolHeight ==
null) {toolHeight =
0;}
if (pageHeight ==
null) {pageHeight =
0;}
var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight -
8;
var table = $(
'.listTableStyle');
if (table !=
null) {$(
'.listTableStyle').css(
"height", height);}
});
$(window).resize(
function () {var webHeight = window.innerHeight;
var tabHeight = $(
'.tabStyle').innerHeight();
var searchHeight = $(
'.searchStyle').innerHeight();
var titleHeight = $(
'.toolTitleStyle').innerHeight();
var toolHeight = $(
'.toolStyle').innerHeight();
var pageHeight = $(
'.pagefooterStyle').innerHeight();
if (tabHeight ==
null) {tabHeight =
0;}
if (searchHeight ==
null) {searchHeight =
0;}
if (titleHeight ==
null) {titleHeight =
0;}
if (toolHeight ==
null) {toolHeight =
0;}
if (pageHeight ==
null) {pageHeight =
0;}
var height = webHeight - tabHeight - searchHeight - titleHeight - toolHeight - pageHeight -
8;
var table = $(
'.listTableStyle');
if (table !=
null) {$(
'.listTableStyle').css(
"height", height);}
});
總結(jié)
以上是生活随笔為你收集整理的jQuery控制表格垂直滚动条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
