95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<!--
|
|
Demo application showing The CssClassStore.
|
|
-->
|
|
<html>
|
|
<head>
|
|
<title>Demo: dojox.data.CssClassStore</title>
|
|
<style type="text/css">
|
|
@import "../../../dijit/themes/tundra/tundra.css";
|
|
@import "../../../dojo/resources/dojo.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
@import "../../grid/resources/tundraGrid.css";
|
|
</style>
|
|
|
|
<!--
|
|
The following script tag instantiates the dojo library and sets some basic properties. In this case, the application
|
|
is told that debug mode is off, and to parse all dojoType widgets when it has fully loaded.
|
|
-->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script>
|
|
<script>
|
|
dojo.require("dijit.Tree");
|
|
dojo.require("dijit.tree.ForestStoreModel");
|
|
dojo.require("dijit.form.ComboBox");
|
|
dojo.require("dojox.data.CssRuleStore");
|
|
dojo.require("dojox.data.CssClassStore");
|
|
dojo.require("dojox.grid.DataGrid");
|
|
|
|
var layoutCss = [
|
|
[
|
|
{ field: "selector", name: "Selector", width: 20 },
|
|
{ field: "parentStyleSheetHref", name: "StyleSheet", width: 20 },
|
|
{ field: "cssText", name: "CSS", width: 'auto' }
|
|
]
|
|
];
|
|
|
|
function init() {
|
|
var combo = dijit.byId("classCombo");
|
|
var grid = dijit.byId("cssGrid");
|
|
|
|
function requery() {
|
|
var val = combo.getValue();
|
|
val = "." + val;
|
|
var query = {
|
|
selector: "*" + val + "*"
|
|
}
|
|
grid.filter(query,true);
|
|
}
|
|
dojo.connect(combo, "onChange", requery);
|
|
}
|
|
dojo.addOnLoad(init);
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body class="tundra">
|
|
<h1>
|
|
Demo: Demo of using the Css Stores to browse the loaded CSS classes and associated rules.
|
|
</h1>
|
|
<p>This demo demonstrates hooking up the Css*Stores to the various digit widgets to browse the Css loaded for the page.</p>
|
|
<hr>
|
|
|
|
<div dojoType="dojox.data.CssRuleStore" jsId="ruleStore"></div>
|
|
<div dojoType="dojox.data.CssClassStore" jsId="classStore"></div>
|
|
|
|
|
|
<div dojoType="dijit.tree.ForestStoreModel"
|
|
jsId="classModel"
|
|
store="classStore"
|
|
query="{}"
|
|
rootId="Loaded Classes"
|
|
rootLabel="Loaded Classes"
|
|
childrenAttrs="children">
|
|
</div>
|
|
|
|
<h2>dojox.data.CssClassStore connected to ComboBox and querying on classSans:</h2>
|
|
<div id="classCombo" dojoType="dijit.form.ComboBox" store="classStore" searchAttr="classSans"></div>
|
|
|
|
<h2>dojox.data.CssRuleStore:</h2>
|
|
<i>Displays the list of CSS rules filtered by the class selected in the ComboBox.</i>
|
|
<div id="cssGrid"
|
|
jsId="cssGrid"
|
|
dojoType="dojox.grid.DataGrid"
|
|
query="{}"
|
|
rowsPerPage="20"
|
|
store="ruleStore"
|
|
structure="layoutCss"
|
|
style="width: 100%; height: 400px;">
|
|
</div>
|
|
|
|
<h2>dojox.data.CssClassStore connected to Tree:</h2>
|
|
<span id="tree" dojoType="dijit.Tree" model="classModel"> </span>
|
|
<hr>
|
|
</body>
|
|
</html>
|