CAPH.WUI.WIDGET.DOM
DomContainer Represents a rectangle container that could only append dom element in it. Using this container is a good way to make dom element shown on the screen. The dom element would be appended one by one, and the class of element would be applied.
Contents
Methods
triggerKeyEvent | ||
| Description | ||
| Execute Key event handler and behaviors attached to the matched elements for the given event type. | ||
| Parameters | ■eventType - String - such as 'keydown', 'keypressr', 'keyup' and so on. ■data (Optional) - Object - Additional data for the key event ■element (Optional) - Object - The element to be applied attached handler | |
| Return | ■Object - the dom element | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| var el = document.getElementById("test"); var flag = false; el.addEventListener('keydown', function(e){ if(e&& e.keyCode === caph.platform.Key.ENTER){ flag = true; } }, false); caph.wui.widget.Dom.triggerKeyEvent('keydown', caph.platform.Key.ENTER, el); | ||
triggerMouseEvent | ||
| Description | ||
| Execute event handler and behaviors attached to the matched elements for the given event type. | ||
| Parameters | ■eventType - String - such as 'click', 'mouseover', 'mousedown' and so on. ■data (Optional) - Object - Additional data for the mouse event ■element (Optional) - Object - The element to be applied attached handler | |
| Return | ■Object - the dom element | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| var el = document.getElementById("testdiv"); var flag = false; el.addEventListener('mouseup', function(e){ flag = true; }, false); caph.wui.widget.Dom.triggerMouseEvent('mouseup', { clientX: 10, clientY: 10 }, el); | ||
getStyle | ||
| Description | ||
| Returns a value of specified style property in element | ||
| Parameters | ■element - Object - The element to get style ■prop - String - The property of style | |
| Return | ■String - the value of style property | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el and prop are given function foo(el, prop) { if(caph.wui.widget.Dom.getStyle(el, 'position') === 'fixed') { //Let's say doSomething() is given doSomething(el); } } | ||
getBoundingOffset | ||
| Description | ||
| Returns an offset of an element | ||
| Parameters | ■el - Object - The parent element to be bounded ■mode - String - The mode to be applied | |
| Return | ■Object - the offset of an element | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el is given function foo(el) { parentOffset = caph.wui.widget.Dom.getBoundingOffset(el); // Let's say doSomething() is given doSomething(parentOffset); } | ||
getOffsetParent | ||
| Description | ||
| Returns first element which property value of position is not static among ancestor. | ||
| Parameters | ■el - Object - The parent to get offset | |
| Return | ■Object - the first element | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el is given function foo(el) { offsetParent = caph.wui.widget.Dom.getOffsetParent(el); //Let's say doSomething() is given doSomething(offsetParent); } | ||
getPosition | ||
| Description | ||
| Returns a result that subtract parent offsets and element margins on offset of an element | ||
| Parameters | ■el - Object - The element of get position | |
| Return | ■Object - the result of getPosition | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el is given function foo(el) { if(!caph.wui.widget.Dom.getPosition(el).top < 0) { // Let's say doSomething() is given doSomething(el); } } | ||
getVisible | ||
| Description | ||
| Checks whether element is visible. | ||
| Parameters | ■el - Object - The element to be checked its visibility | |
| Return | ■Boolean - true : visible - false : not visible | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el is given function foo(el) { if(caph.wui.widget.Dom.getVisible(el)) { // Let's say doSomething() is given doSomething(el); } } | ||
getBoundingRect | ||
| Description | ||
| Returns offset, size and margin(optional) property value of an element | ||
| Parameters | ■el - Object - The element to be bounded ■mode (Optional) - String - The mode to be applied | |
| Return | ■Object - Object * left : left * top : top * width : width * height : height * right : left+width * bottom : top+height - margin * left : marginLeft * right : marginRight * top : marginTop * bottom : marginBottom | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| //Let's say el is given var bound = caph.wui.widget.Dom.getBoundingRect(el); l = bound.left; t = bound.top; w = bound.width; h = bound.height; //Let's say doSomething() is given doSomething(l, t, w, h); | ||
hasClass | ||
| Description | ||
| Checks whether an element contains a specified class | ||
| Parameters | ■element - Object - The element to be checked ■classnm - String - The name of class to be removed | |
| Return | ■Boolean - true : if it has one - false : otherwise. | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| function foo(a) { // Let's say el and cl are given if(!caph.wui.widget.Dom.hasClass(el, cl)) { //Let's say doSomething() is given doSomething(el, cl); } } | ||
addClass | ||
| Description | ||
| Adds a specified class to an element | ||
| Parameters | ■element - Object - The element to be checked ■classnm - String - The name of class to be removed | |
| Return | ■Boolean - true : if it succeed - false : otherwise. | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| function foo(a) { //let's say el and cl are given if(!caph.wui.widget.Dom.hasClass(el, cl)) { caph.wui.widget.Dom.addClass(el, cl) } } | ||
removeClass | ||
| Description | ||
| Removes a specified class from an element | ||
| Parameters | ■element - Object - The element to be checked ■classnm - String - The name of class to be removed | |
| Return | ■Boolean - true : if it succeed - false : otherwise. | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| function foo(a) { //Let's say el and cl are given if(caph.wui.widget.Dom.hasClass(el, cl)) { caph.wui.widget.Dom.removeClass(el, cl) } } | ||
triggerEvent | ||
| Description | ||
| Execute handler and behaviors attached to the matched elements for the given event type. | ||
| Parameters | ■eventType - String - such as 'focuschange', 'keydown', 'mouseover' and so on. ■data (Optional) - Object - Additional data for the event ■element (Optional) - Object - The element to be applied attached handler. | |
| Return | ■Void | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| var el = document.getElementById("test"); var flag = false; el.addEventListener('keydown', function(e){ if(e&& e.keyCode === caph.platform.Key.ENTER){ flag = true; } }, false); caph.wui.widget.Dom.triggerEvent('keydown', caph.platform.Key.ENTER, el); | ||
setStyle | ||
| Description | ||
| Sets the CSS property value of element directly. | ||
| Parameters | ■element - HTML Document Element - The element to be applied CSS properties ■style - String - CSS properties to be added to the element | |
| Return | ■Void | |
| Emulator Support | Y | |
| SDK Constraint | none | |
| Example | ||
| var el = document.getElementById('test'); caph.wui.widget.Dom.setStyle(el, 'width:500px'); caph.wui.widget.Dom.setStyle(el, 'margin:20px'); | ||