Placeholder Example
Release 1.0 - ...
Example usage of the standard placeholders:
Smartsite SXML | Copy Code |
---|---|
<se:placeholderdata.css>div.phtest { background-color: silver; }</se:placeholderdata.css> <se:placeholderdata.css>div.phtest { border-color: red; }</se:placeholderdata.css> <se:placeholderdata.css> div.phtest { color: white; text-align: center; } </se:placeholderdata.css> {page.htmlhead_css.add("div.phtest { padding: 3em; }")} <se:placeholderdata.javascript> function setBorder() { var elm= document.getElementById("phtest"); if (elm) elm.style.border="10px dashed black"; } </se:placeholderdata.javascript> {page.htmlhead_javascript.add("var currentDate=new Date();")} {page.htmlhead_javascript.add("var siteName='"+site.name()+"'")} {page.htmlhead_javascript.add("function alertMe() { alert('Me!'); }")} {page.htmlhead_javascript.add("function alertYou() { alert('You!'); } ")} {page.htmlhead_javascript.add("var myVar=12345")} <se:placeholderdata.javascript> var anotherVar=12345; </se:placeholderdata.javascript> <se:placeholderdata.cssinclude>{channel.link()}</se:placeholderdata.cssinclude> <se:placeholderdata.cssinclude>{channel.link()}</se:placeholderdata.cssinclude> {page.htmlhead_cssinclude.add(channel.link())} {page.htmlhead_cssinclude.add(channel.link(), 'print')} <se:placeholderdata.jsinclude>{channel.link('/res/scripts/webcontrols.js')}</se:placeholderdata.jsinclude> <se:placeholderdata.jsinclude> {channel.link('/res/scripts/webcontrols.js')} </se:placeholderdata.jsinclude> {page.htmlhead_jsinclude.add(channel.link('/res/scripts/webcontrols.js'))} {page.htmlhead_jsinclude.add(channel.link('/res/scripts/webcontrols.js'), true)} <se:placeholderdata.javascriptonload>setBorder()</se:placeholderdata.javascriptonload> <se:placeholderdata.javascriptonload>setBorder();</se:placeholderdata.javascriptonload> <se:placeholderdata.javascriptonload> setBorder(); setBorder(); </se:placeholderdata.javascriptonload> <div class="phtest" id="phtest">Test Data</div> |
Example output:
HTML | Copy Code |
---|---|
<link rel="stylesheet" type="text/css" href="{html.location('{html.location('{channel.link(12853)}')}')}" /> <link rel="stylesheet" type="text/css" href="{html.location('{html.location('{channel.link(12853)}')}')}" /> <link rel="stylesheet" type="text/css" href="{html.location('{html.location('{channel.link(12853)}')}')}" /> <link rel="stylesheet" type="text/css" href="{html.location('{html.location('{channel.link(12853)}')}')}" media="print" /> <script type="text/javascript" src="/res/scripts/webcontrols.js"></script> <script type="text/javascript" src="/res/scripts/webcontrols.js"></script> <script type="text/javascript" src="/res/scripts/webcontrols.js"></script> <script type="text/javascript" src="/res/scripts/webcontrols.js" defer="true"></script> <style type="text/css"> div.phtest { background-color: silver; } div.phtest { border-color: red; } div.phtest { color: white; text-align: center; } div.phtest { padding: 3em; } </style> <script type="text/javascript"> /*<![CDATA[*/ function setBorder() { var elm= document.getElementById("phtest"); if (elm) elm.style.border="10px dashed black"; } var currentDate=new Date(); var siteName='doc6'; function alertMe() { alert('Me!'); } function alertYou() { alert('You!'); } var myVar=12345; var anotherVar=12345; function onLoad() { setBorder(); setBorder(); setBorder(); setBorder(); } /*]]>*/ </script> |