DIR : /home/kozerus/public_html/pn/uize/site-source/js/Uize/Dom/Node.todo
/home/kozerus/public_html/pn/uize/site-source/js/Uize/Dom
This is a TO DO document for the proposed =Uize.Dom.Node= module.
Proposed Simplified Interface
The following proposed interface aims to address the desire amongst Web developers for easier and more concise ways to access and manipulate DOM elements.
The Uize.Dom.Node Object
A convenient proxy wrapper for DOM objects that allows methods to be called without always dereferencing the static methods on the =Uize.Dom.*= packages and having to specify the =node blob= in each call.
EXAMPLE
.........................................
var myNode = Uize.Dom.Node ('#myNodeId');
myNode.style ({
border:'1px',
background:'#ccc'
});
myNode.display (false);
myNode.on (
'click',
function () {
// do something
}
);
.........................................
EXAMPLE - WITH CHAINING
...........................
Uize.Dom.Node ('#myNodeId')
.style ({
border:'1px',
background:'#ccc'
})
.display (false)
.on (
'click',
function () {
// do something
}
)
;
...........................
Node Blob Management
The =Uize.Dom.Node= object provides methods for managing the set of nodes that make up the node blob that the object represents.
- =nodeBlobOBJ.addToBlob= - lets you add more nodes to a node blob
- =nodeBlobOBJ.clearBlob= - clears the node blob of all its contents
- =nodeBlobOBJ.removeFromBlob= - removes the specified nodes from the node blob
- =nodeBlobOBJ.setBlob= - lets you set the nodes that make up the node blob
Combo Setter and Getter Methods
.
Method Chaining
To appease developers who are fond of method chaining, all modify type methods that don't need to return a result will return a reference to the `node blob`.
EXAMPLE
................................................
Uize.Dom.Node ('#myNodeId')
.style ({display:'none',position:'absolute'})
.on (
'click',
function () {
// handle click event
}
)
;
................................................
Uize.Dom.Basics.style
Set or get style for a `node blob`.
BEFORE
.........................................................................
Uize.Dom.Basics.style ('#myNodeId','display','none');
Uize.Dom.Basics.style ('#myNodeId',{display:'none',position:'absolute'});
var nodeDisplay = Uize.Dom.Basics.style ('#myNodeId','display');
.........................................................................
AFTER
.........................................................................
Uize.Dom.Node ('#myNodeId').style ('display','none');
Uize.Dom.Node ('#myNodeId').style ({display:'none',position:'absolute'});
var nodeDisplay = Uize.Dom.Node ('#myNodeId').style ('display');
.........................................................................
Uize.Dom.Basics.on
A short form for the =wire= method.
BEFORE
...........................
Uize.Dom.Basics.on (
'#myNodeId',
'click',
function () {
// handle click event
}
);
...........................
AFTER
................................
Uize.Dom.Node ('#myNodeId').on (
'click',
function () {
// handle click event
}
);
................................
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer