Difference between revisions of "MediaWiki:Collapsible.js"
m |
|||
Line 2: | Line 2: | ||
* Code for collapsible tables. | * Code for collapsible tables. | ||
*/ | */ | ||
− | + | function CollapseButton(table, header) { | |
− | + | var collapse = function() { | |
− | + | if (this.firstChild.data == '[hide]') { | |
− | + | for (var i = 1; i < table.rows.length; i++) { | |
− | + | table.rows[i].style.display = 'none'; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | }; | + | this.firstChild.data = '[show]'; |
− | button.onmouseover = function() { | + | } else { |
− | + | for (var i = 1; i < table.rows.length; i++) { | |
− | + | table.rows[i].style.display = table.rows[0].style.display; | |
− | + | } | |
− | + | this.firstChild.data = '[hide]'; | |
− | + | } | |
− | + | }; | |
+ | |||
+ | var spacer = document.createElement('div'); | ||
+ | spacer.style.cssFloat = 'left'; | ||
+ | spacer.style.styleFloat = 'left'; | ||
+ | spacer.style.textAlign = 'left'; | ||
+ | spacer.style.width = '35px'; | ||
+ | spacer.appendChild(document.createTextNode('\u00a0')); | ||
+ | header.insertBefore(spacer, header.childNodes[0]); | ||
+ | |||
+ | var button = document.createElement('div'); | ||
+ | button.style.cssFloat = 'right'; | ||
+ | button.style.styleFloat = 'right'; | ||
+ | button.style.fontSize = '11px'; | ||
+ | button.style.fontWeight = 'normal'; | ||
+ | button.style.textAlign = 'right'; | ||
+ | button.style.width = '35px'; | ||
+ | button.onclick = collapse(); | ||
+ | button.onmouseover = function() { | ||
+ | this.style.cursor = 'pointer'; | ||
+ | }; | ||
+ | button.appendChild(document.createTextNode('[hide]')); | ||
+ | header.insertBefore(button, header.childNodes[0]); | ||
+ | } | ||
function createCollapseButtons() { | function createCollapseButtons() { | ||
Line 48: | Line 48: | ||
var header = headerRow.getElementsByTagName('th')[0]; | var header = headerRow.getElementsByTagName('th')[0]; | ||
if (header) { | if (header) { | ||
− | + | CollapseButton(tables[i], header); | |
} | } | ||
} | } |
Revision as of 08:14, 31 January 2011
/** * Code for collapsible tables. */ function CollapseButton(table, header) { var collapse = function() { if (this.firstChild.data == '[hide]') { for (var i = 1; i < table.rows.length; i++) { table.rows[i].style.display = 'none'; } this.firstChild.data = '[show]'; } else { for (var i = 1; i < table.rows.length; i++) { table.rows[i].style.display = table.rows[0].style.display; } this.firstChild.data = '[hide]'; } }; var spacer = document.createElement('div'); spacer.style.cssFloat = 'left'; spacer.style.styleFloat = 'left'; spacer.style.textAlign = 'left'; spacer.style.width = '35px'; spacer.appendChild(document.createTextNode('\u00a0')); header.insertBefore(spacer, header.childNodes[0]); var button = document.createElement('div'); button.style.cssFloat = 'right'; button.style.styleFloat = 'right'; button.style.fontSize = '11px'; button.style.fontWeight = 'normal'; button.style.textAlign = 'right'; button.style.width = '35px'; button.onclick = collapse(); button.onmouseover = function() { this.style.cursor = 'pointer'; }; button.appendChild(document.createTextNode('[hide]')); header.insertBefore(button, header.childNodes[0]); } function createCollapseButtons() { var tables = getElementsByClassName(document, 'table', 'collapsible'); for (var i = 0; i < tables.length; i++) { var headerRow = tables[i].getElementsByTagName('tr')[0]; if (headerRow) { var header = headerRow.getElementsByTagName('th')[0]; if (header) { CollapseButton(tables[i], header); } } } } addOnloadHook(createCollapseButtons);