CAPH.WUI.WIDGET.SIDEBAR
SideBar Represents a container consists of two boxes. One is called main page. Its size is the same as the screen size. It is always visible. Another one is called side page. Its size is defined by user. It is initialized on the top or left or right or bottom of the main page(defined by the user), and not visible in the initial state. The side page could appear with some animations on main page in different ways defined by the user.
Contents
- Constructor
- Methods
- addMain
- addEventHandlerOnMainPage
- show
- hide
- clone
- equals
- addSide
- setOptions
- render
- addCls
- removeCls
- click
- destroy
- disable
- isEnable
- disableHighLight
- enableHighLight
- focus
- blur
- isVisible
- setAbsolutePosition
- getCenterPosition
- setCenterPosition
- setOpacity
- getCType
- getDomEl
- getOpacity
- getPosition
- setPosition
- setRotation
- getRotation
- setScale
- getScale
- getChildNodes
- addEventListener
- removeEventListener
- getParentNode
- Sidebar
Constructor
Sidebar | ||
Description | ||
The constructor of sideBar widget in order to create sideBar object. | ||
Parameters | ||
options | Object | some of the options are the same with arguments of parent class box, other differences as below: |
location | String | define the initial placement of the side page(relative to the main page), the side page may on top of main page, o |
Emulator Support | Y | |
SDK Constraint | None | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' }, 'center-position':{ 'x':window.innerWidth / 2, 'y':window.innerHeight / 2, 'z':0 } }); |
Methods
addMain | ||
Description | ||
Adds a new widget to the main page of the container. The widget would be painted to the main page. | ||
Parameters | ■node - Object - An existing widget to be added to the main page. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var DomContainer = caph.wui.widget.DomContainer; var UIContext = caph.wui.widget.UIContext; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var container = new DomContainer(); side.addMain(container); |
addEventHandlerOnMainPage | ||
Description | ||
Adds a user-defined listener to monitor click event or keydown event on the main page, occurs when side page is showing and main page clicked or some key pressed by user. | ||
Parameters | ■event - string - The type of event that user hopes to be captured by the monitor, 'click' or 'keydown' are valid. ■listener (Optional) - function - Occurs when the user-defined event triggered. If the event was defined as 'keydown', the listener would return a parameter called 'e' to user, which is the object of the keydown event that user has triggered, user could use the object to do some things. e.g. e.keyCode, indicates the code of the key user pressed. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var UIContext = caph.wui.widget.UIContext; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.addEventHandlerOnMainPage('click', function() { side.hide(3); }); |
show | ||
Description | ||
Makes the side page visible using different animations. The side page would display on the main page after invoking the function. | ||
Parameters | ■type - String - The animation type of side page showing. The types pre-defined using numbers like 0, 1, 2... The significance of the numbers are below: * SLIDEINONTOP, REVEAL, PUSH, SLIDEALONG, REVERSSLIDEOUT, SCALEDOWNPUSHER, SCALEUP, and FALLDOWN ■duration (Optional) - Number - Indicates how long would the showing animation last, the unit is millisecond(ms), e.g. 5000, means 5000 milliseconds or 5 seconds. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var UIContext = caph.wui.widget.UIContext; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.show(3); |
hide | ||
Description | ||
Makes the side page invisible using different animations. The side page would leave the main page to the side after invoking the function. | ||
Parameters | ■type - String - The animation type of side page showing. The types pre-defined using numbers like 0, 1, 2... The significance of the numbers are below: * SLIDEINONTOP, REVEAL, PUSH, SLIDEALONG, REVERSSLIDEOUT, SCALEDOWNPUSHER, SCALEUP, and FALLDOWN ■duration (Optional) - Number - Indicates how long would the showing animation last, the unit is millisecond(ms), e.g. 5000, means 5000 milliseconds or 5 seconds. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var UIContext = caph.wui.widget.UIContext; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.show(3); side.hide(3); |
clone | ||
Description | ||
Creates and returns clone object from current object, the cloned object will have the same properties and same methods with the current object. | ||
Parameters | ■Void | |
Return | ■Object - The cloned object. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = window.caph.wui.widget.Sidebar; var side = new Sidebar(); var obj = side.clone(); |
equals | ||
Description | ||
Compares the contents of two objects using strict equality, objects are considered equal if they both have the same set of properties and the values of those properties are equal. | ||
Parameters | ■Object - Object - The object which wants to compare with current object. | |
Return | ■Boolean - Indicates whether the two objects are equal, - true : if they are equal, return true. - false : if they aren't equal, return false. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = window.caph.wui.widget.Sidebar; var side = new Sidebar(); var obj = side.clone(); var isequal = obj.equals(side); |
addSide | ||
Description | ||
Adds a new widget to the side page of the container. The widget would be painted to the side page. | ||
Parameters | ■node - Object - An existing widget to be added to the side page. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Label = caph.wui.widget.Label; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var label = new Label(); side.addSide(label); |
setOptions | ||
Description | ||
Sets some properties of the widget that are in the constructor method. The widget will be changed when these properties are set. For example, if width property is set, the width of widget will changed. | ||
Parameters | ■options (Optional) - Object * id : (Number) The id of widget. * name : (String) The name of widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar(); var opt = { 'side': { 'width': '18%', 'location': 'left' } }; side.setOptions(opt); var uicontext = new UIContext(); side.render(uicontext); |
render | ||
Description | ||
Rewrites the method 'render' of View. Initialize the main page and side page of the container. The container would be painted to screen after invoking the function. | ||
Parameters | ■obj - object - An existing component to be rendered. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); |
addCls | ||
Description | ||
Add specified css class for the label in the tag, which is convert from the input text, when css is added successfully, new style will apply on the | ||
Parameters | ■cls - String - The class name for the current widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.addCls('abc'); |
removeCls | ||
Description | ||
Removes specific css class from current widget, when css is removed successfully, the specified css style will be removed from the widget. | ||
Parameters | ■cls - String - The class name for the current widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.addCls('abc'); side.removeCls('abc'); |
click | ||
Description | ||
Clicks the view object, to make the view object selected. And if the widget has registered click listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.click(); |
destroy | ||
Description | ||
Destroys the widget itself, the widget will disappear. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.destroy(); |
disable | ||
Description | ||
Disables widget, to make widget not be able to be operated by user. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.disable(); |
isEnable | ||
Description | ||
Returns the current status of widget, return true when the widget is activated. | ||
Parameters | ■Void | |
Return | ■Boolean - true : if enabled - false : otherwise | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.disable(); var isEnable = side.isEnable(); |
disableHighLight | ||
Description | ||
Removes the highlight effect on a widget, but still remain the focus effect. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.disableHighLight(); |
enableHighLight | ||
Description | ||
Recovers the highlight effect on a widget. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.disableHighLight(); side.enableHighLight(); |
enable | ||
Description | ||
Enables widget, to make widget be able to be operated by user. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.enable(); |
focus | ||
Description | ||
Focuses the view object, to make the view object receive focus. And if the widget has registered focus listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.focus(); |
blur | ||
Description | ||
Blurs the view object, to make the view object lose focus. And if the widget has registered blur listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.focus(); side.blur(); |
isVisible | ||
Description | ||
Indicates whether the widget is visible or not. | ||
Parameters | ■Void | |
Return | ■Boolean - true : if visible - false : otherwise | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.hide(); var isVisible = side.isVisible(); |
setAbsolutePosition | ||
Description | ||
Sets absolute position of widget in the screen, x,y value of the top and left of the screen is (0,19). | ||
Parameters | ■x -Number - The x coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel. ■y - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel ■z - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setAbsolutePosition(window.innerWidth/2, window.innerHeight/2, 1); |
getCenterPosition | ||
Description | ||
Returns center position of the widget in the parent widget, include x,y,z coordinate. x,y value of the top and left of the parent widget is (0,19). | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * x : (Number) The x coordinate of 3D object, the unit is pixels. * y : (Number) The y coordinate of 3D object, the unit is pixels. * z : (Number) The z coordinate defines the order of overlap widgets, if z is too big, the widget will display above. e.g. 0, 1, 2 and etc. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setCenterPosition(100, 100, 0); var pos = side.getCenterPosition(); |
setCenterPosition | ||
Description | ||
Sets center position of the widget in the parent widget, include x,y,z coordinate. x,y value of the top and left of the parent widget is (0,13). | ||
Parameters | ■x - Number - The x coordinate of 3D object, the unit is pixels. ■y - Number - The y coordinate of 3D object, the unit is pixels. ■z - Number - The z coordinate defines the order of overlap widgets, if z is too big, the widget will display above. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setCenterPosition(window.innerWidth/2, window.innerHeight/2, 1); |
setOpacity | ||
Description | ||
Sets opacity of the widget. | ||
Parameters | ■opacity - Number - Opacity value of the widget, range from 0.0 to 1.0. e.g. 0.5. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setOpacity(0.5); |
getCType | ||
Description | ||
Returns the type of the widget, every widget have different ctype, it is identification of widget. | ||
Parameters | ■Void | |
Return | ■String - CType is widget or animation type, including 'BasicObject','view','UIContext','button', 'box','label','radio','spinner', 'navigator','panel','carousel','colortag','image','checkbox','gridwidget', 'popup','progressbar','dropdown','indicator','highlighthelper','coverflow', 'listwidget','book','domcontainer','imagegallery','sidebar','fade','transfer','rotate','scale','bounce','flip','syncanim','advancedbox'." | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setOpacity(0.5); var ctype = side.getCType(); |
getDomEl | ||
Description | ||
Returns the DOM element of the widget, note that the dom node to be found actually needs to exist (be rendered and etc). | ||
Parameters | ■Void | |
Return | ■DOM - A document element | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setOpacity(0.5); var opa = side.getDomEl(); |
getOpacity | ||
Description | ||
Returns opacity of the widget. | ||
Parameters | ■Void | |
Return | ■Number - Opacity value of the widget,range from 0.0 to 1.0. e.g. 0.5. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setOpacity(0.5); var opa = side.getOpacity(); |
getPosition | ||
Description | ||
Returns top and left position of widget in the parent widget, include x,y,z coordinate. x,y value of the top and left of the parent widget is (0,19). | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * x : (Number) The x coordinate of 3D object, the unit is pixels. * y : (Number) The y coordinate of 3D object, the unit is pixels. * z : (Number) The z coordinate defines the order of overlap widgets, if z is too big, the widget will display above. e.g. 0, 1, 2 and etc. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setPosition(100, 100, 0); var pos = side.getPosition(); |
setPosition | ||
Description | ||
Sets top and left position of widget in the parent widget. | ||
Parameters | ■x - Number - The x coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel. ■y - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel ■z - Number - The z coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setPosition(window.innerWidth/2, window.innerHeight/2, 1); |
setRotation | ||
Description | ||
Sets rotation of widget , rotation angle of the widget will be changed. | ||
Parameters | ■x - Number - The x coordinate for rotate position of the view. ■y - Number - The y coordinate for rotate position of the view. ■z - Number - The z coordinate for rotate position of the view. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setRotation(0, 0, 0); |
getRotation | ||
Description | ||
Returns widget rotation property. | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * The x coordinate for rotate position of the view. * The y coordinate for rotate position of the view. * The z coordinate for rotate position of the view. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setRotation(0, 0, 0); var rot = side.getRotation(); |
setScale | ||
Description | ||
Sets widget scale value, the display width and height of widget will be changed, but the value of height and width properties will not be modified. | ||
Parameters | ■x - Number - The x coordinate for scale position of the view. ■y - Number - The y coordinate for scale position of the view. ■z - Number - The z coordinate for scale position of the view. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setScale(1, 1, 0); |
getScale | ||
Description | ||
Returns the scale value of the widget, including x, y, z coordinates. | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * The x coordinate for scale position of the view. * The y coordinate for scale position of the view. * The z coordinate for scale position of the view. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); side.setScale(1, 1, 0); var scale = side.getScale(); |
getChildNodes | ||
Description | ||
Returns child nodes of current widget, child nodes are those widgets rendered on the current widget. | ||
Parameters | ■Void | |
Return | ■Array - The child nodes list. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var child = side.getChildNodes(); |
addEventListener | ||
Description | ||
Appends an event handler to the widget. | ||
Parameters | ■type - String - Listener type of event, including {'onfocus', 'onblur', 'onkeydown'. * 'onfocus'- the type of function will be called when the widget is focused. * 'onblur'- the type of function will be called when the widget is blurred. * 'onkeydown' - the type of fun} ■function - Function - the callback to add | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var func = function() { console.log(1); } side.addEventListener('click', func); |
removeEventListener | ||
Description | ||
Removes all listeners according the type and event. | ||
Parameters | ■type - String - Listener type of event, including {'onfocus', 'onblur', 'onkeydown'. * 'onfocus'- the type of function will be called when the widget is focused. * 'onblur'- the type of function will be called when the widget is blurred. * 'onkeydown' - the type of fun} ■func - Function - The callback to remove | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var func = function() { console.log(1); } side.addEventListener('click', func); side.removeEventListener('click', func); |
getParentNode | ||
Description | ||
Returns parent node of current widget, parent node is the widget which the current widget will render on it. | ||
Parameters | ■Void | |
Return | ■Array - The parent node. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' } }); var uicontext = new UIContext(); side.render(uicontext); var parent = side.getParentNode(); |
Sidebar | ||
Description | ||
(Constructor) The constructor of sideBar widget in order to create sideBar object. | ||
Parameters | ■options - Object - some of the options are the same with arguments of parent class box, other differences as below: ■location - String - define the initial placement of the side page(relative to the main page), the side page may on top of main page, o | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Sidebar = caph.wui.widget.Sidebar; var side = new Sidebar({ 'side': { 'width': '18%', 'location': 'left' }, 'center-position':{ 'x':window.innerWidth / 2, 'y':window.innerHeight / 2, 'z':0 } }); |