169 lines
4.8 KiB
HTML
169 lines
4.8 KiB
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>
|