Placeholder Example

Release 1.0 - ...

Example usage of the standard placeholders:

Smartsite SXML CopyCode image 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 CopyCode image 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>