Placeholder Example
Release 1.0 - ...
Example usage of the standard placeholders:
| Smartsite SXML |
|
|---|---|
<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 |
|
|---|---|
<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>
|
|