You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.6 KiB
168 lines
4.6 KiB
<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>
|
|
|