Here is a pretty basic idea of what I mentioned earlier. I used the MooTools library to make some interesting table of contents effects and updated the look of the output by bypassing the SAS styles completely and using plain old CSS instead. Just save the three sections of code below in the specified files and run the test.sas file. You'll also need to download the MooTools toolkit and save it as mootools-1.11.js.
[pre]
/* ---- test.sas ---- */
proc template;
define style styles.empty;
style ContentItem, PagesItem /
listentryanchor = yes
;
end;
run;
ods html file="foob.html" contents="fooc.html" frame="foo.html"
stylesheet="foo.css"(url="styles.css")
code="foo.js"(url="code.js") style=styles.empty
headtext='
';
proc contents data=sashelp.class;
run;
proc means data=sashelp.class;
run;
ods html close;
/* ---- end test.sas ---- */
[/pre]
[pre]
/* ---- code.js ---- */
window.addEvent('domready', function() {
// Add mouseover effects for table of contents
$$('li a').each(function(element, index) {
var fx = new Fx.Styles(element, {duration:200, wait:false});
element.addEvent('mouseenter', function(){
fx.start({
'margin-left': 5,
'background-color': '#666',
'color': '#ff8'
});
});
element.addEvent('mouseleave', function(){
fx.start({
'margin-left': 0,
'background-color': '#333',
'color': '#888'
});
});
});
// Make tables striped
$$('table.Table tbody tr').each(function(row, index) {
row.getElementsBySelector('td.Data').each(function(cell) {
cell.addClass(['even','odd'][index%2]);
});
});
});
/* ---- end code.js ---- */
[/pre]
[pre]
/* ---- styles.css ---- */
.contents {
font: 13px "Lucida Grande", Arial, Helvetica, sans-serif;
background-color: #333;
color: #888;
}
.contents ol {
padding: 1em;
list-style-type: none;
margin-left: 0;
}
.contents ul {
padding: 1em;
list-style-type: none;
margin-left: 0;
}
.contents li a {
display: block;
padding: 4px;
width: 150px;
background: #333;
color: #888;
text-decoration: none;
}
.contents br {
display: none;
}
.body {
font: 13px "Lucida Grande", Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000;
}
.body table.table {
margin-bottom: 1.5em;
border-spacing: 0;
border-collapse: collapse;
border: 1px solid #7389ae;
}
.body table td, body table th {
padding: 5px 9px 5px 9px;
}
.body table td {
font-size: 11px;
background-color: #f5f5f5;
}
.body table td.even {
background-color: #ececec;
}
.body table th {
font-size: 12px;
font-weight: bold;
color: #fff;
background-color: #7389AE;
}
.body table th.top_stacked_value, .body table th.middle_stacked_value,
.body table th.bottom_stacked_value {
background-color: transparent;
color: #000;
}
.body .proctitle {
background-color: #78BA91;
color: #fff;
padding: 5px;
font-size: 13px;
font-weight: bold;
}
.body .systemtitle {
letter-spacing: 2.5em;
font-size: 9px;
font-weight: bold;
padding: 2em 0 0 0;
margin: 0;
color: #78BA91;
text-transform: uppercase;
}
.body br {
display: none;
}
/* ---- end styles.css ---- */
[/pre]
... View more