Difference between revisions of "Expandable.php"
m |
(make our own JS for expandable tables) |
||
| Line 1: | Line 1: | ||
<? | <? | ||
| − | if ($GLOBALS['action'] == 'view') $article = preg_replace( | + | if ($GLOBALS['action'] == 'view') { |
| − | + | ||
| − | + | # Insert a JS function into the page to be called when show/hide links are clicked | |
| − | + | $article = preg_replace( | |
| − | + | '/(<\\/head\\s*>)/', | |
| − | + | '<script type="text/javascript"> | |
| − | + | ||
| − | + | function toggleExpandable(id) { | |
| − | + | var heading = document.getElementById("expandable-"+id); | |
| − | + | var content = heading.getElementById("expandable-content"); | |
| + | if (content.style.display == "none") { | ||
| + | content.style.display = "block"; | ||
| + | } | ||
| + | else { | ||
| + | content.style.display = "none"; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </script>$1', | ||
| + | |||
| + | $article | ||
| + | ); | ||
| + | |||
| + | # Replace all the expandable tables with html containing CSS classes and the show/hide links | ||
| + | $article = preg_replace( | ||
| + | '/<table class=["\']?expandable["\']? title=["\']?(.+?)["\']?\\s*>(.+?<\\/table\\s*?>)/se', | ||
| + | |||
| + | '<table class=expandable-heading id=expandable-'.$i.'><tr><td>$1</td><td align=right> | ||
| + | [<a href="javascript:toggleExpandable('.($i++).')"> | ||
| + | <span id="showlink">show</span> | ||
| + | <span id="hidelink" style="display:none;">hide</span> | ||
| + | </a>] | ||
| + | </td></tr> | ||
| + | <tr id="expandable-content"><td colspan=2> | ||
| + | <table class=expandable-content>$2 | ||
| + | </td></tr></table>', | ||
| + | |||
| + | $article | ||
| + | ); | ||
| + | |||
?> | ?> | ||
Revision as of 00:45, 2 October 2006
<? if ($GLOBALS['action'] == 'view') {
# Insert a JS function into the page to be called when show/hide links are clicked $article = preg_replace( '/(<\\/head\\s*>)/', '<script type="text/javascript">
function toggleExpandable(id) { var heading = document.getElementById("expandable-"+id); var content = heading.getElementById("expandable-content"); if (content.style.display == "none") { content.style.display = "block"; } else { content.style.display = "none"; } }
</script>$1',
$article );
# Replace all the expandable tables with html containing CSS classes and the show/hide links $article = preg_replace(
'/
(.+?<\\/table\\s*?>)/se', '| $1 |
[<a href="javascript:toggleExpandable('.($i++).')"> show </a>] |
|
$2
$article ); ?> | |
