A module to make a screen size aware application.
This module helps for creating applications that transform their UI layout according to the screen size. It assumes that the application consists of two horizontally split panes, and the left pane has a list widget. If you require this module in such an application, in a tablet-sized screen, the application shows a horizontally split view whose left pane is a list widget. In a phone-sized screen, the application shows a list widget that fills the screen.
| Parameter | Type | Description |
|---|---|---|
| options | Object |
Optional Contains properties to be set. |
See the dojox/mobile/ScreenSizeAware reference documentation for more information.
<span data-dojo-type="dojox.mobile.ScreenSizeAware"></span>
<div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props='orientation:"H"'>
<div data-dojo-type="dojox.mobile.Container" style="width:300px;">
<div id="leftView" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Left Pane</h1>
<ul data-dojo-type="dojox.mobile.EdgeToEdgeList" data-dojo-props='stateful:true'>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='label:"View1", moveTo:"view1"'></li>
....
</ul>
</div>
</div>
<div data-dojo-type="dojox.mobile.Container">
<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top", back:"Home", moveTo:"leftView"'>Right Pane</h1>
....
</div>
</div>
</div>
Returns the id of the target view of the given item.
| Parameter | Type | Description |
|---|---|---|
| item | undefined |
Returns true if the current mode set by transformUI(mode) is "phone".
Function called when an item in the left-side list is selected.
| Parameter | Type | Description |
|---|---|---|
| e | Event |
Places the list widget. If the current mode is "phone", it places the list widget in the right pane, otherwise in the left pane.
Applies an UI mode.
| Parameter | Type | Description |
|---|---|---|
| mode | String | If this argument is "phone", sets the UI in phone mode, otherwise in tablet mode. |
Updates the stateful property of the list widget in the left-side pane.
Updates the transition property of the items in the left-side widget.