I've started using the HTML5 data- attributes in my application, but when this is applied to an element that is a dijit widget, it disappears.
<button dojoType="dijit.form.Button" data-id="5">Number 5</button>
Is dojo actually parsing this and keeping it somewhere? Or is it just removed completely because dojo isn't HTML5 compliant?
By applying the answer to this question, I was also able to keep the custom data- attributes on the surrounding element.
Related
I have Domino 9.0.1 and dojo 1.9.4
Can i use HorizontalRangeSlider?
When i trying require this control, load empty javasript file.
Example:
<xp:this.resources>
<xp:dojoModule name="dojox/form/HorizontalRangeSlider"></xp:dojoModule>
</xp:this.resources>
<div id="hrSlider" dojoType="dojox.form.HorizontalRangeSlider"></div>
Yes, but just declaring a div with the dojoType isn't sufficient.
See the Dojo documentation if you want to do it manually. You'll either need declarative code to set the properties according to what you want, or programmatic code.
Alternatively, use the Dojo Horizontal Slider control, as documented in XPages Extension Library book. The book also highlights why the control was added - to allow a single component on the page which comprised all the properties required by the slider's various HTML elements.
I'm building a google-style text box that auto-completes typed text.
Using typeahead with typeahead.js-bootstrap.css:
$(document).ready(function() {
$('#op1').typeahead({
remote: '/search/%QUERY',
});
});
<input type="text" id="op1">
it worked but there are two problems:
I could not customize it. Whenever I make any significant style changes, or use bootstrap's form-control class for input element: the text box gets completely messed up.
The auto-completed ("hint") text was written above the typed text so I whatever color I set for the hint was the color of the entire text! I tried giving the hint a negative z-order but then it was not displayed at all.
I've tried Typeahead AND Select2 auto-completion libraries with my Bootstrap 3 template, and so far the only thing I was able to work out-of-the-box without completely ruining the layout was the above code
If anyone can solve these problems, or otherwise recommend a full CSS + JS typeahead solution for Bootstrap3, I'd be grateful :)
It gives you completely easy way to customise the look with formatresults. You can even write full html view for your results. and to customise the look of input box apply a class to the wrapper for your search box and override select2 rendered css(load the page and check from browser that from where that style is coming).
http://ivaynberg.github.io/select2/
I made a full featured customised search with this.
There is now a fork available for select2 that supports Bootstrap 3.
http://fk.github.io/select2-bootstrap-css/
https://github.com/fk/select2-bootstrap-css#readme
I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.
I am new to dojo . I see this term like dijit . What is the difference between it and dojo?
I am sure it would help you if you read Dojo Documentation part on Dijit. The first sentence says:
Dijit is a widget system layered on top of dojo.
Dijit is a system built on top of Dojo that allows you to easily reuse/use reprogrammed widgets. Below is some example code that provides you a view of the relationship within the code:
<script type="text/javascript">
dojo.require("dijit.Dialog");
</script>
<div data-dojo-type="dijit.Dialog" title="Hello Dijit!" id="someId"></div>
So here Dojo is loading Dijit's Dialog box and will apply the Dialog box to the element of "someId".
How can I avoid the dojo parser showing a hidden element after it's parsed?
<input type="checkbox" dojoType="dijit.form.CheckBox" style="display:none">
When the dojo parser is done, the dijit checkbox will be shown, but the input "inside" it, will still be hidden. I want the dojo parser to create the dijit checkbox, but keep it hidden.
I think that's a limitation of how Dijit works... it's the construction of the widget that's doing this, not the parser per se. The style element gets mapped to the INPUT element, so there is no way to do this short of instantiating the widget directly and hiding it before placing it in the DOM. Updating the style after the parser does its thing would probably result in some unwanted redraws.
I use dijit.layout.BorderContainer with style="height:100%;width:100%;visibility:hidden" and it's working fine for me.