dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
169 lines (138 loc) • 4.74 kB
HTML
<html>
<head>
<title>dojox.html.styles Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" rel="stylesheet" title="dojoDefault">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<style title="altStyle" type="text/css" rel="alternate stylesheet">
p{
font-size:9px;
color:#9999FF;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, fontSizeWatch: true" ></script>
<script type="text/javascript">
dojo.require("dojox.html.styles");
getSelectedStyleSheet = function(){
if(dojo.byId("ssDefault").checked) return false;
if(dojo.byId("ssExtra").checked) return "ssExtra";
}
enableStyleSheet = function(){
dojox.html.enableStyleSheet(getSelectedStyleSheet());
}
disableStyleSheet = function(){
dojox.html.disableStyleSheet(getSelectedStyleSheet());
}
dojo.ready(function(){
console.log(dojo.version.toString());
var styles = [
"p { font-size:24; margin:20px;}",
"p { font-size:12; color:#ff0000;}",
".woot { color:#ff0000; }",
".woot { color:#00ff00; }",
"p span {font-weight:bold;}",
"span {font-style:italic;}"
]
var col = dojo.byId("btnCol");
dojo.forEach(styles, function(s){
var sel = s.substring(0,s.indexOf("{")-1);
var des = s.substring(s.indexOf("{")+1, s.indexOf("}") );
var div = dojo.doc.createElement("div");
col.appendChild(div);
var d = dojo.doc.createElement("span");
dojo.style(d, "display", "block");
d.innerHTML = s;
div.appendChild(d);
var b = dojo.doc.createElement("button");
div.appendChild(b);
b.innerHTML = "Insert";
dojo.connect(b, "click", function(){
console.log("Add:", s)
dojox.html.insertCssRule(sel, des, getSelectedStyleSheet());
});
var b = dojo.doc.createElement("button");
div.appendChild(b);
b.innerHTML = "Remove";
dojo.connect(b, "click", function(){
console.log("Rem:", s);
dojox.html.removeCssRule(sel, des);
});
});
console.log("Style Sheets tests:");
console.log("dojox.html.getStyleSheet [is false]:", dojox.html.getStyleSheet());
// insert a style, which creates our dynamic style sheet:
var sel = styles[0].substring(0,styles[0].indexOf("{")-1);
var des = styles[0].substring(styles[0].indexOf("{")+1, styles[0].indexOf("}") );
dojox.html.insertCssRule(sel, des, getSelectedStyleSheet());
console.log("dojox.html.getStyleSheet [object is default]:", dojox.html.getStyleSheet());
console.log("dojox.html.activeStyleSheet:", dojox.html.activeStyleSheet().title);
dojo.forEach(dojox.html.getToggledStyleSheets(), function(s){
console.log(" toggled style sheet:", s.title, "enabled:", !s.disabled);
});
var ss = dojox.html.getStyleSheets(); //return object
for(var nm in ss){
//display either title or href
var name = (ss[nm].title)?ss[nm].title:ss[nm].href;
if(!name){ name = "*Persistant*"}
console.log(" style sheet:", name);
}
console.log("dojox.html.getStyleSheet [href:dijitTests.css, object]:", dojox.html.getStyleSheet("dijitTests.css"));
console.log("dojox.html.getStyleSheet [title:BadStyleName]:", dojox.html.getStyleSheet("BadStyleName"));
});
</script>
<style>
#btnCol{
width:220px;
}
#btnCol div{
margin-bottom:10px;
}
body table td{
vertical-align:top;
}
button{
width:70px;
text-align:left;
}
.label{
color:#666666;
}
</style>
</head>
<body>
<h1>dojox.html.styles Test</h1>
<p>With the buttons on the left, insert and remove rules with a dynamically created stylesheet. Use the radio buttons
to create a second style sheet. Toggle them on and off. See the log for more style sheet tests.</p>
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td id="btnCol">
<span class="label">Dynamic Stylesheets</span>
<div>
<span style="display:block;">Use Style Sheet:</span>
<label for="ssDefault">Default</label>
<input type="radio" name="ss" id="ssDefault" checked="true"/>
<label for="ssExtra">Extra</label>
<input type="radio" name="ss" id="ssExtra" />
<br>
<button onClick="enableStyleSheet();">Enable</button>
<button onClick="disableStyleSheet();">Disable</button>
</div>
</td>
<td>
<p>paragraph text</p>
<p class="foo">paragraph class=foo text
<span class="woot">span class=woot</span>
with a span inside it
</p>
<p class="bar">paragraph class=bar text
<span class="zoot">span class=zoot</span>
with a span inside it
</p>
<span class="xoot">external span class=xoot</span>
</td>
</tr>
</table>
</body>
</html>