dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
135 lines (105 loc) • 4.64 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>ListItem - layout</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript">
require([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat"
], function(declare, WidgetBase){
PlainWidget = declare("PlainWidget", WidgetBase, {
buildRendering: function(){
this.inherited(arguments);
this.domNode.style.backgroundColor = "gray";
this.domNode.style.display = "inline";
this.domNode.style.lineHeight = "normal";
}
});
});
</script>
</head>
<body style="visibility:hidden;">
<div id="foo" data-dojo-type="dojox.mobile.View">
<h1 data-dojo-type="dojox.mobile.Heading">ListItem Layout</h1>
<h2 data-dojo-type="dojox.mobile.RoundRectCategory">Examples</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="left"><div data-dojo-type="PlainWidget">Left Widget</div></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="center"><div data-dojo-type="PlainWidget">Center Widget</div></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="right"><div data-dojo-type="PlainWidget">Right Widget</div></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="left"><span data-dojo-type="dojox.mobile.ToolBarButton">Left</span></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="center"><span data-dojo-type="dojox.mobile.ToolBarButton">Center</span></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="right"><span data-dojo-type="dojox.mobile.ToolBarButton">Right</span></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="center"><span data-dojo-type="dojox.mobile.ToolBarButton">Center</span></div>
<div layout="left"><span data-dojo-type="dojox.mobile.ToolBarButton">Left</span></div>
<div layout="right"><span data-dojo-type="dojox.mobile.ToolBarButton">Right</span></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="left">Left Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="center">Center Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="right">Right Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="left"><input></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="center"><input></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="right"><input></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem">
<div layout="left">Left Node</div>
<div layout="right">Right Node</div>
<div layout="center">Center Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"bar"'>
<div layout="left">Left Node</div>
<div layout="right">Right Node</div>
<div layout="center">Center Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"bar", label:"Label"'>
<div layout="left">Left Node</div>
<div layout="right">Right Node</div>
<div layout="center">Center Node</div>
</li>
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props='icon:"images/i-icon-1.png", moveTo:"bar", variableHeight:true, label:"Label<br>Label<br>Label"'>
<div data-dojo-type="PlainWidget" layout="left">Left Widget</div>
<div data-dojo-type="PlainWidget" data-dojo-props='layout:"right"'>Right Widget</div>
<div layout="center"><div data-dojo-type="PlainWidget">Center Widget</div></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='icon:"images/i-icon-1.png", moveTo:"bar", variableHeight:true'>
<div data-dojo-type="PlainWidget" layout="left">Left Widget</div>
<div data-dojo-type="PlainWidget" data-dojo-props='layout:"right"'>Right Widget</div>
<div layout="center"><div data-dojo-type="PlainWidget">Center Widget</div></div>
Label<br>Label<br>Label
</li>
</ul>
</div>
</body>
</html>