I am a beginner in dojo, I want to make a new widget like the photo, I want to create a text editing rule like the word office, but I do not know where to start, does someone guide me to do it?
I made one, thank you for your wonderful project:
source code
html :
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="dojox/form/resources/RangeSlider.css">
<script>dojoConfig = {async: true, parseOnLoad: true}</script>
<script src="dojo/dojo.js"></script>
<script src="demo/SliderWidget.js"></script>
</head>
<body >
<div class="tundra">
<div id="rangeSlider"></div>
<div id="slider"></div>
</div>
<script>
require(["dojo/parser", "dojo/dom", "demo/SliderWidget", "dojo/domReady!"],
function(parser, dom, SliderWidget ){
parser.parse();
var rangeSlider = dom.byId("rangeSlider");
var slider = dom.byId("slider");
var widget = new SliderWidget();
widget.placeAt(rangeSlider);
widget.placeAt(slider);
});
</script>
</body>
</html>
javascript :
define(["dojo/dom-construct","dojo/_base/declare","dijit/_WidgetBase",
"dojo/dom","dijit/form/HorizontalSlider","dijit/form/HorizontalRule","dojox/form/HorizontalRangeSlider"],
function(domConstruct, declare, _WidgetBase, dom, HorizontalSlider,HorizontalRule, HorizontalRangeSlider){
return declare([_WidgetBase], {
postCreate: function() {
this._createRuler();
},
_createRuler: function() {
var rangeSlider = new HorizontalRangeSlider({
name: "rangeSlider",
value: [0,100],
minimum: 0,
maximum: 100,
intermediateChanges: true,
style: "width:300px;",
onChange: function () {
}
}, "rangeSlider");
var sliderNode = dom.byId("rangeSlider");
var rulesNode = domConstruct.create("div", null, sliderNode);
var hRuler = new HorizontalRule({
container: "bottomDecoration",
count: 25,
style: "width:100%;height:1em;font-size:20%;color:gray;"
}, rulesNode);
var slider = new HorizontalSlider({
name: "slider",
value: 0,
minimum: 0,
maximum: 100,
discreteValues:100,
intermediateChanges: true,
style: "width:300px;",
}, "slider");
slider.sliderHandle.classList.replace("dijitSliderImageHandleH","dijitSliderImageHandleV");
rangeSlider.addChild(hRuler);
rangeSlider.startup();
slider.startup();
},
});
});
result: