Template:Infobox/doc: Difference between revisions

From Ultronomicon
Jump to navigation Jump to search
← Older editNewer edit →
Svip (talk | contribs)
105 edits
+JavaScript
Svip (talk | contribs)
105 edits
Line 16: Line 16:
}}</pre>
}}</pre>


=== JavaScript ===
=== CSS ===


For the alternating rows, the following JavaScript is needed for [[MediaWiki:Common.js]]:
Minor CSS update:


<pre>function alternate_init() {
<pre>.infobox th,
    var tables = getElementsByClassName(document, "table", "alternateable");
.infobox td {
    for(var ti = 0; ti < tables.length; ti++) {
vertical-align: top;  
        ts_alternate(tables[ti]);
    }
}
addOnloadHook(alternate_init);
function ts_alternate(table) {
    // Take object table and get all it's tbodies.
    var tableBodies = table.getElementsByTagName("tbody");
    // Loop through these tbodies
    for (var i = 0; i < tableBodies.length; i++) {
        // Take the tbody, and get all it's rows
        var tableRows = tableBodies[i].getElementsByTagName("tr");
        // Loop through these rows
        // Start at 1 because we want to leave the heading row untouched
        var curRow = 0
        var sections = new Array();
        var s = 0;
        sections[s] = new Array();
        for (var j = 0; j < tableRows.length; j++) {
            if(tableRows[j].parentNode != tableBodies[i])
                continue;
            if(tableRows[j].tagName != 'TR')
                continue;
            var ignore = false;
            var oldClasses = tableRows[j].className.split(" ");
            var newClassName = "";
            for (var k = 0; k < oldClasses.length; k++) {
                if (oldClasses[k] == "alternate-ignore")
                    ignore = true;
                if (oldClasses[k] == "alternate-reset") {
                    curRow = 0;
                    ignore = true;
                }                   
                if (oldClasses[k] != "" && oldClasses[k] != "even" && oldClasses[k] != "odd")
                    newClassName += oldClasses[k] + " ";
            }
            if(curRow==0 && j>0) {
                s++;
                sections[s] = new Array();
            }
            if(ignore) {
                continue;
            }
            sections[s].push(tableRows[j]);
            curRow++;
        }
        for(var s = 0; s < sections.length; s++) {
            var l = sections[s].length;
            if (l<=1)
                continue;
            for(var r = 0; r < l; r++) {
                var row = sections[s][r];
                var oldClasses = row.className.split(" ");
                var newClassName = "";
                for (var k = 0; k < oldClasses.length; k++) {       
                    if (oldClasses[k] != "" && oldClasses[k] != "even" && oldClasses[k] != "odd")
                        newClassName += oldClasses[k] + " ";
                }
                row.className = newClassName + ((l-r) % 2 == 0 ? "odd" : "even");
            }
        }
    }
}</pre>
}</pre>

Revision as of 15:53, 28 August 2012

Use

For creating standardised infoboxes, easy and whatever.

Usage

{{infobox
|above     = Outside table (optional)
|top       = Top of infobox (but within) (optional)
|title     = Name or title of infobox
|image     = The image (optional)
|caption   = Caption (optional)
|labelN    = Label for dataN (optional)
|dataN     = Data (can be used with or without a label)
|headerN   = A section header
}}

CSS

Minor CSS update: 

.infobox th,
.infobox td {
	vertical-align: top; 
}
Retrieved from "https://wiki.uqm.stack.nl/index.php?title=Template:Infobox/doc&oldid=26560"