Updated
This commit is contained in:
Éric Lemoine
168
master/examples/test_styles.html
Normal file
168
master/examples/test_styles.html
Normal file
@@ -0,0 +1,168 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user