jQuery show/hide/toggle syntax in dojo
Ok, so yesterday I spent a good deal of the day trying to figure out how to manage the display of DOM elements. I searched Google, the dojo forums, the tests on archive.dojotoolkit.org with no simple answer. Coming from a heavy jQuery background I just could not believe that you had to bring in additional classes and/or write your own functions.
But dojo is a powerful beast, sometimes referred to as an elephant, so I guess I just have to “use the force…er um…power”
Desired Functions
dojo.query(‘#hide’).hide();
dojo.query(.’show’).show();
dojo.query(‘.toggle’).toggle();
WARNING: The code below is incredibly crude, it does not take into account for inline elements, there are no advanced arguments like fade or animation, and the toggle method is not fully implemented.
1: dojo.extend(dojo.NodeList, {
2: show: function(){
3: console.log(this);
4: this.forEach( item.style.display = 'block' );
5: return this;
6: },
7: hide: function(){
8: this.forEach(function(item){
9: console.log(item);
10: item.style.display = 'none';
11: });
12: return this;
13: },
14: toggle: function(){
15: this.forEach(function(item){
16: if(item.style.display == 'none'){
17: //this.show();
18: item.style.display = 'block';
19: } else {
20: item.style.display = 'none';
21: }
22: });
23: return this;
24: }
25: });
PS: thanks Jayant for giving me the put to use the true power of dojo.
No related posts.
Please can you Post an Example for the above code snippet. Appreciate It. Thanks
@Nitin -
Put the code at the start of your JS file, after your dojo.require statements.
Then you can hide dom elements using:
dojo.query(‘#id’).hide();
To hide a bunch of items…I think…you can use:
dojo.query(‘.ClassName’).hide();
That should hide everything with the class ClassName….
Ironically, I just re-implemented these, with fade/speed args. You might enjoy it:
http://higginsforpresident.net/2008/10/dojoshow-hide-toggle-and-more/
Then I added some more:
http://higginsforpresident.net/2008/11/dojo-the-missing-apis/
all the code is available on google code: plugd
Yeah! I new you would be a great dojo project lead! jk. Thats great, and I love that the plugd project it currently such a small add-on…
btw…whats up with extending nodelist with xhr….I’m not sure what your goals are but it scares and excites me…some crazy (good) stuff could be done with that…
http://code.google.com/p/plugd/source/browse/trunk/ajax.js
Using item.style.display leads to problems (at least, in dojo 1.3). You should use dojo.style() instead. See http://api.dojotoolkit.org/jsdoc/1.3/dojo.style.
Peter, unfortunately, the functions in plugd don’t deal with elements that are set to be hidden via CSS, which is a big flaw.
coming from jQuery with a request to look into Dojo, this type of thing makes me think that jQuery and UI are just eons ahead of the rest in terms of built-in UI-centric interaction. Is that fair to say?