MediaWiki:Common.js
出自【暗黑百科】DiabloWiki_凯恩之角
(修订版本间的差异)
第143行: | 第143行: | ||
addOnloadHook( createCollapseButtons ); | addOnloadHook( createCollapseButtons ); | ||
//</source> | //</source> | ||
+ | /* | ||
+ | |||
+ | == 增加摺疊功能 == | ||
+ | */ | ||
+ | /** 摺疊 div table ***************************** | ||
+ | * Description: 实现div.NavFrame和table.collapsible的可折叠性。 | ||
+ | * JSConfig的collapseText、expandText、autoCollapse属性定义默认文字和默认最少自动折叠块 | ||
+ | * Maintainers: User:fdcn | ||
+ | */ | ||
+ | |||
+ | function cancelBubble(e) { | ||
+ | e = e || window.event; | ||
+ | if (e.stopPropagation) { | ||
+ | e.stopPropagation(); | ||
+ | } else { | ||
+ | e.cancelBubble = true; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function createToggleButton(head) { | ||
+ | var parent = head; | ||
+ | if (head.tagName.toLowerCase() == 'tr') { //对表格特别处理 | ||
+ | if (head.getElementsByTagName("th").length) { | ||
+ | parent = head.cells[parent.cells.length - 1]; | ||
+ | } else { | ||
+ | return; | ||
+ | } | ||
+ | } | ||
+ | var textS, textH, button = getElementsByClassName(head, "span", "NavToggle")[0]; | ||
+ | if (button) { | ||
+ | parent = button.parentNode; | ||
+ | } else { | ||
+ | textS = createElement("span", [JSConfig.expandText], { | ||
+ | 'class': 'toggleShow' | ||
+ | }); | ||
+ | textH = createElement("span", [JSConfig.collapseText], { | ||
+ | 'class': 'toggleHide' | ||
+ | }); | ||
+ | button = createElement("span", [textS, textH], { | ||
+ | 'class': 'NavToggle', | ||
+ | styles: { | ||
+ | 'width': "6em" | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | button.style.display = "inline"; | ||
+ | head.className += " uncollapse toggleHotspot"; | ||
+ | parent.insertBefore(button, parent.childNodes[0]); | ||
+ | } | ||
+ | window.wgCollapse = function (head, container, defaultCollapse) { | ||
+ | if (head) { | ||
+ | createToggleButton(head); | ||
+ | } | ||
+ | var self = this; | ||
+ | this.state = 0; | ||
+ | this.container = container; | ||
+ | applyEach(function (h) { | ||
+ | if (h.nodeType == 1 && !hasClass(h, "uncollapse") && !hasClass(h, "toggleShow") && !hasClass(h, "toggleHide")) { | ||
+ | h.className += " toggleHide"; | ||
+ | } | ||
+ | }, defaultCollapse); //预设的隐藏元素 | ||
+ | |||
+ | |||
+ | function getArray(clsname) { | ||
+ | var r = [], | ||
+ | i = 0, | ||
+ | e, ea = getElementsByClassName(container, "*", clsname); | ||
+ | while (e = ea[i++]) { | ||
+ | var parent = e.parentNode; | ||
+ | while (!hasClass(parent, 'NavFrame') && !hasClass(parent, 'collapsible')) { | ||
+ | parent = parent.parentNode; | ||
+ | } | ||
+ | if (parent == container) { | ||
+ | r.push(e); | ||
+ | } | ||
+ | } | ||
+ | return r; | ||
+ | } | ||
+ | var toggleA = getArray("toggleShow"); | ||
+ | var toggleB = getArray("toggleHide"); | ||
+ | var hotspots = getArray("toggleHotspot"); | ||
+ | |||
+ | function _toggle(list, state) { | ||
+ | var i = 0, | ||
+ | e; | ||
+ | while (e = list[i++]) { | ||
+ | e.style.display = state ? e.showStyle || '' : 'none'; | ||
+ | } | ||
+ | } | ||
+ | this.toggle = function (state) { | ||
+ | self.state = (typeof state == 'undefined') ? 1 - self.state : state; | ||
+ | _toggle(toggleA, self.state); | ||
+ | _toggle(toggleB, 1 - self.state); | ||
+ | } | ||
+ | var i = 0, | ||
+ | h; | ||
+ | while (h = hotspots[i++]) { | ||
+ | applyEach(function (link) { | ||
+ | addClickHandler(link, cancelBubble); | ||
+ | }, h.getElementsByTagName("A")); | ||
+ | h.style.cursor = "pointer"; | ||
+ | $(h).attr('tabindex', '0').keydown(function (event) { | ||
+ | if (event.which == 13) { // Enter | ||
+ | self.toggle(); | ||
+ | } | ||
+ | }); | ||
+ | addClickHandler(h, function () { | ||
+ | self.toggle(); | ||
+ | }); | ||
+ | } | ||
+ | }; | ||
+ | |||
+ | $(function () { | ||
+ | if (!window.disableCollapse) { | ||
+ | //init | ||
+ | var items = []; | ||
+ | applyEach(function (NavFrame) { | ||
+ | var i = 0, | ||
+ | child = NavFrame.childNodes, | ||
+ | head; | ||
+ | while (head = child[i++]) { | ||
+ | if (head.className && hasClass(head, "NavHead")) { | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | items.push(new wgCollapse(head, NavFrame, NavFrame.childNodes)); | ||
+ | }, getElementsByClassName(document, "div", "NavFrame")); | ||
+ | applyEach(function (table) { | ||
+ | var rows = table.rows; | ||
+ | items.push(new wgCollapse(rows[0], table, rows)); | ||
+ | }, getElementsByClassName(document, "table", "collapsible")); | ||
+ | var item, i = 0, | ||
+ | count = items.length; | ||
+ | while (item = items[i++]) { | ||
+ | item.toggle( | ||
+ | hasClass(item.container, "collapsed") || (count >= JSConfig.autoCollapse && hasClass(item.container, "autocollapse"))); | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | //修正摺疊後定位變化 | ||
+ | hookEvent("load", function () { | ||
+ | if (location.hash) { | ||
+ | location.href = location.hash; | ||
+ | } | ||
+ | }); |
在2011年5月16日 (一) 20:59所做的修订版本
//<source lang="javascript"> /* Any JavaScript here will be loaded for all users on every page load. */ /* Test if an element has a certain class ************************************** * * Description: Uses regular expressions and caching for better performance. * Maintainers: [[User:Mike Dillon]], [[User:R. Koot]], [[User:SG]] */ var hasClass = (function () { var reCache = {}; return function (element, className) { return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className); }; })(); /** Collapsible tables ********************************************************* * * Description: Allows tables to be collapsed, showing only the header. See * [[Wikipedia:NavFrame]]. * Maintainers: [[User:R. Koot]] */ var autoCollapse = 2; var collapseCaption = "隐藏▲"; var expandCaption = "显示▼"; function collapseTable( tableIndex ) { var Button = document.getElementById( "collapseButton" + tableIndex ); var Table = document.getElementById( "collapsibleTable" + tableIndex ); if ( !Table || !Button ) { return false; } var Rows = Table.rows; if ( Button.firstChild.data == collapseCaption ) { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].oldDisplayValue = Rows[i].style.display; Rows[i].style.display = "none"; } Button.firstChild.data = expandCaption; } else { for ( var i = 1; i < Rows.length; i++ ) { Rows[i].style.display = Rows[i].oldDisplayValue; } Button.firstChild.data = collapseCaption; } } function createCollapseButtons() { var tableIndex = 0; var NavigationBoxes = new Object(); var Tables = document.getElementsByTagName( "table" ); for ( var i = 0; i < Tables.length; i++ ) { var parent = Tables[i].parentNode.parentNode.parentNode.parentNode; if ( hasClass( Tables[i], "collapsible" ) || (hasClass(parent, "navbox") && hasClass(Tables[i], "navbox")) ) { /* only add button and increment count if there is a header row to work with */ var HeaderRow = Tables[i].getElementsByTagName( "tr" )[0]; if (!HeaderRow) continue; var Header = HeaderRow.getElementsByTagName( "th" )[0]; if (!Header) continue; NavigationBoxes[ tableIndex ] = Tables[i]; Tables[i].setAttribute( "id", "collapsibleTable" + tableIndex ); var Button = document.createElement( "span" ); var ButtonLink = document.createElement( "a" ); var ButtonText = document.createTextNode( collapseCaption ); Button.className = "collapseButton"; //Styles are declared in Common.css ButtonLink.style.color = Header.style.color; ButtonLink.setAttribute( "id", "collapseButton" + tableIndex ); ButtonLink.setAttribute( "href", "javascript:collapseTable(" + tableIndex + ");" ); ButtonLink.appendChild( ButtonText ); Button.appendChild( document.createTextNode( "[" ) ); Button.appendChild( ButtonLink ); Button.appendChild( document.createTextNode( "]" ) ); Header.insertBefore( Button, Header.childNodes[0] ); tableIndex++; } } for ( var i = 0; i < tableIndex; i++ ) { if ( hasClass( NavigationBoxes[i], "collapsed" ) || ( tableIndex >= autoCollapse && hasClass( NavigationBoxes[i], "autocollapse" ) ) ) { collapseTable( i ); } else if ( hasClass( NavigationBoxes[i], "innercollapse" ) ) { var element = NavigationBoxes[i]; while (element = element.parentNode) { if ( hasClass( element, "outercollapse" ) ) { collapseTable ( i ); break; } } } } } addOnloadHook( createCollapseButtons ); //</source> /* == 增加摺疊功能 == */ /** 摺疊 div table ***************************** * Description: 实现div.NavFrame和table.collapsible的可折叠性。 * JSConfig的collapseText、expandText、autoCollapse属性定义默认文字和默认最少自动折叠块 * Maintainers: User:fdcn */ function cancelBubble(e) { e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } } function createToggleButton(head) { var parent = head; if (head.tagName.toLowerCase() == 'tr') { //对表格特别处理 if (head.getElementsByTagName("th").length) { parent = head.cells[parent.cells.length - 1]; } else { return; } } var textS, textH, button = getElementsByClassName(head, "span", "NavToggle")[0]; if (button) { parent = button.parentNode; } else { textS = createElement("span", [JSConfig.expandText], { 'class': 'toggleShow' }); textH = createElement("span", [JSConfig.collapseText], { 'class': 'toggleHide' }); button = createElement("span", [textS, textH], { 'class': 'NavToggle', styles: { 'width': "6em" } }); } button.style.display = "inline"; head.className += " uncollapse toggleHotspot"; parent.insertBefore(button, parent.childNodes[0]); } window.wgCollapse = function (head, container, defaultCollapse) { if (head) { createToggleButton(head); } var self = this; this.state = 0; this.container = container; applyEach(function (h) { if (h.nodeType == 1 && !hasClass(h, "uncollapse") && !hasClass(h, "toggleShow") && !hasClass(h, "toggleHide")) { h.className += " toggleHide"; } }, defaultCollapse); //预设的隐藏元素 function getArray(clsname) { var r = [], i = 0, e, ea = getElementsByClassName(container, "*", clsname); while (e = ea[i++]) { var parent = e.parentNode; while (!hasClass(parent, 'NavFrame') && !hasClass(parent, 'collapsible')) { parent = parent.parentNode; } if (parent == container) { r.push(e); } } return r; } var toggleA = getArray("toggleShow"); var toggleB = getArray("toggleHide"); var hotspots = getArray("toggleHotspot"); function _toggle(list, state) { var i = 0, e; while (e = list[i++]) { e.style.display = state ? e.showStyle || '' : 'none'; } } this.toggle = function (state) { self.state = (typeof state == 'undefined') ? 1 - self.state : state; _toggle(toggleA, self.state); _toggle(toggleB, 1 - self.state); } var i = 0, h; while (h = hotspots[i++]) { applyEach(function (link) { addClickHandler(link, cancelBubble); }, h.getElementsByTagName("A")); h.style.cursor = "pointer"; $(h).attr('tabindex', '0').keydown(function (event) { if (event.which == 13) { // Enter self.toggle(); } }); addClickHandler(h, function () { self.toggle(); }); } }; $(function () { if (!window.disableCollapse) { //init var items = []; applyEach(function (NavFrame) { var i = 0, child = NavFrame.childNodes, head; while (head = child[i++]) { if (head.className && hasClass(head, "NavHead")) { break; } } items.push(new wgCollapse(head, NavFrame, NavFrame.childNodes)); }, getElementsByClassName(document, "div", "NavFrame")); applyEach(function (table) { var rows = table.rows; items.push(new wgCollapse(rows[0], table, rows)); }, getElementsByClassName(document, "table", "collapsible")); var item, i = 0, count = items.length; while (item = items[i++]) { item.toggle( hasClass(item.container, "collapsed") || (count >= JSConfig.autoCollapse && hasClass(item.container, "autocollapse"))); } } }); //修正摺疊後定位變化 hookEvent("load", function () { if (location.hash) { location.href = location.hash; } });