「JavaScript 行列を固定したテーブル」の版間の差分
ナビゲーションに移動
検索に移動
| (同じ利用者による、間の1版が非表示) | |||
| 1行目: | 1行目: | ||
| − | ==JavaScript 行列を固定したテーブル== | + | ==[[JavaScript 行列を固定したテーブル]]== |
| − | [[JavaScript]] | + | [[JavaScript]] | |
{{amazon|4873114683}} | {{amazon|4873114683}} | ||
| − | + | [[jQuery]]が出てきてから、すごく楽になった。。。 | |
| − | + | ↓こんなことしなくても、[[jQuery]]プラグイン使えばよい。 | |
===インラインフレーム等を使わずに、行列を固定したテーブルを実現=== | ===インラインフレーム等を使わずに、行列を固定したテーブルを実現=== | ||
| 11行目: | 11行目: | ||
====画面のﾘサイズ対応==== | ====画面のﾘサイズ対応==== | ||
| − | =====HTML===== | + | =====[[HTML]]===== |
<body onresize="resizePanel();" ･･･ | <body onresize="resizePanel();" ･･･ | ||
| − | <div id=" | + | <div id="HEADE[[R]]_PANEL" style="overflow:hidden;"> |
<table styel="table-layout:fixed;" ･･･ | <table styel="table-layout:fixed;" ･･･ | ||
</div> | </div> | ||
| 21行目: | 21行目: | ||
： | ： | ||
| − | ===== | + | =====[[Java]]Sctript===== |
/** | /** | ||
* 画面のサイズ変更から呼び出す | * 画面のサイズ変更から呼び出す | ||
| 29行目: | 29行目: | ||
80 | 80 | ||
, 30 | , 30 | ||
| − | ,document.getElementById(" | + | ,document.getElementById("HEADE[[R]]_PANEL") |
,document.getElementById("ITEM_PANEL") | ,document.getElementById("ITEM_PANEL") | ||
); | ); | ||
| 51行目: | 51行目: | ||
if (containerWidth == undefined) containerWidth = document.body.clientWidth; // コンテナ幅 | if (containerWidth == undefined) containerWidth = document.body.clientWidth; // コンテナ幅 | ||
| − | var | + | var SC[[R]]OLL_BA[[R]]_MA[[R]]GIN = 17; // スクロールバー幅 規定値 |
var isVerticalScrollBar = false; // 垂直スクロールバーが表示されるか | var isVerticalScrollBar = false; // 垂直スクロールバーが表示されるか | ||
var scrollBarMargin = 0; // 垂直スクロールバーマージン | var scrollBarMargin = 0; // 垂直スクロールバーマージン | ||
| 75行目: | 75行目: | ||
// 垂直スクロールバー有無により、ヘッダーの幅を調整 | // 垂直スクロールバー有無により、ヘッダーの幅を調整 | ||
if (isVerticalScrollBar) { | if (isVerticalScrollBar) { | ||
| − | scrollBarMargin = | + | scrollBarMargin = SC[[R]]OLL_BA[[R]]_MA[[R]]GIN; |
} | } | ||
| 114行目: | 114行目: | ||
{{attach}} | {{attach}} | ||
---- | ---- | ||
| − | {{include_html banner_html, "!Javascript"}} | + | {{include_html [[banner_html]], "!Javascript"}} |
2020年2月16日 (日) 04:27時点における最新版
目次
JavaScript 行列を固定したテーブル
jQueryが出てきてから、すごく楽になった。。。 ↓こんなことしなくても、jQueryプラグイン使えばよい。
インラインフレーム等を使わずに、行列を固定したテーブルを実現
テンプレート:Ref scroll table sample.lzh
画面のﾘサイズ対応
HTML
<body onresize="resizePanel();" ･･･ <div id="HEADER_PANEL" style="overflow:hidden;"> <table styel="table-layout:fixed;" ･･･ </div> <div id="ITEM_PANEL" style="overflow:hidden;"> <table style="overflow:auto;" ･･･ </div> ：
JavaSctript
/**
* 画面のサイズ変更から呼び出す
*/
function resizePanel() {
resizeTablePanel(
80
, 30
,document.getElementById("HEADER_PANEL")
,document.getElementById("ITEM_PANEL")
);
}
/**
/* @param Description : 画面のサイズに合わせて、サイズを変更するテーブル
/* @param Arguments :
/* @param verticalMargin : 垂直マージン
/* @param horizontalMargin : 水平マージン
/* @param headerPanel : テーブルヘッダーパネル(DIV)
/* @param itemPanel : テーブルアイテムパネル(DIV)
/* @param containerHeight : 基準となるコンテナの高さ(省略時、BODYタグのクライアント領域高さ)
/* @param containerWidth : 基準となるコンテナの幅(省略時、BODYタグのクライアント領域幅)
*/
function resizeTablePanel( verticalMargin, horizontalMargin, headerPanel, itemPanel
, containerHeight /* document.body.clientHegith */
, containerWidth /* document.body.clientWidth */ ) {
// 規定値の設定
if (containerHeight == undefined) containerHeight = document.body.clientHeight; // コンテナ高さ
if (containerWidth == undefined) containerWidth = document.body.clientWidth; // コンテナ幅
var SCROLL_BAR_MARGIN = 17; // スクロールバー幅 規定値
var isVerticalScrollBar = false; // 垂直スクロールバーが表示されるか
var scrollBarMargin = 0; // 垂直スクロールバーマージン
// テーブル幅が変わらない設定(overflow-y:auto or overflow-y:scroll)
var isFixWidth = itemPanel.style.overflowY == 'scroll'
|| itemPanel.style.overflowY == 'auto';
// コンテナの高さが、指定マージンより大きければ、テーブル明細パネルの高さを変更する
if (containerHeight > verticalMargin) {
itemPanel.style.height = containerHeight - verticalMargin;
}
// 垂直スクロールバーが表示されるかを判定する
var adjust = 16; // 調整(行が半分隠れている場合等正しく判定されないため)
isVerticalScrollBar = (itemPanel.style.overflow == 'scroll') /* 常時表示 */
|| ((totalOffsetHeight(itemPanel)+adjust) >= itemPanel.offsetHeight) /* 子要素のほうが高い */
// コンテナの幅が、指定マージンより大きければ、
// テーブルヘッダーパネルおよびテーブル明細パネルの幅を変更する
if (containerWidth > horizontalMargin) {
itemPanel.style.width = containerWidth - horizontalMargin;
// 垂直スクロールバー有無により、ヘッダーの幅を調整
if (isVerticalScrollBar) {
scrollBarMargin = SCROLL_BAR_MARGIN;
}
// テーブル幅固定の場合、ヘッダーリサイズしない
if (!isFixWidth) {
var headerMargin = (horizontalMargin + scrollBarMargin);
var headerWidth = containerWidth - headerMargin;
if (containerWidth <= headerMargin ) {
headerWidth = 0;
}
headerPanel.style.width = headerWidth
}
}
return;
}
/**
/* @param Description : 指定されたオブジェクトの直接の子どもの高さの合計を取得
/* @param Arguments :
/* @param parent : 対象となる親オブジェクト
*/
function totalOffsetHeight( parent ) {
var children = parent.children;
var h = 0;
if (children == null) {
return h;
}
for (var i=0; i<children.length; i++) {
h += children[i].offsetHeight;
}
return h;
}
テンプレート:Ref scrl tbl.jpg テンプレート:Ref scroll table sample.lzh テンプレート:Attach
{{include_html banner_html, "!Javascript"}}
© 2006 矢木浩人
