You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
8.7 KiB
251 lines
8.7 KiB
<!DOCTYPE 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>ScrollablePane Demo</title> |
|
|
|
<link href="../themes/common/domButtons.css" rel="stylesheet"/> |
|
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','PageIndicator','FixedSplitter','ScrollablePane']"></script> |
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"dojox/mobile/parser", |
|
"dojox/mobile", |
|
"dojox/mobile/compat", |
|
"dojox/mobile/FixedSplitter", |
|
"dojox/mobile/ScrollableView", |
|
"dojox/mobile/SwapView", |
|
"dojox/mobile/PageIndicator", |
|
"dojox/mobile/ScrollablePane" |
|
]); |
|
</script> |
|
|
|
<style> |
|
html,body{ |
|
height: 100%; |
|
overflow: hidden; |
|
position: relative; |
|
} |
|
.mblRoundRectList, .mblRoundRect { |
|
margin: 7px 9px 7px 9px; |
|
} |
|
.mblListItem { |
|
color: white; |
|
} |
|
.subtitle { |
|
color: gray; |
|
font-size: 12px; |
|
} |
|
#news { |
|
font-size: 14px; |
|
} |
|
.list1 li{ |
|
} |
|
.list1 li:nth-child(even){ |
|
background-color: #00575F; |
|
} |
|
.list1 li:nth-child(odd){ |
|
background-color: #013042; |
|
} |
|
.list1 .mblListItemTextBox { |
|
padding-right: 5px; |
|
} |
|
.c1 { |
|
width: 120px; |
|
float: left; |
|
} |
|
.c2 { |
|
width: 80px; |
|
text-align: right; |
|
float: left; |
|
} |
|
.c3 { |
|
text-align: right; |
|
width: 70px; |
|
color: white; |
|
padding: 0px 4px; |
|
margin-top: 4px; |
|
height: 30px; |
|
line-height: 32px; |
|
float: right; |
|
-webkit-border-radius: 4px; |
|
-moz-border-radius: 4px; |
|
} |
|
.android_theme .c3 { |
|
margin-top: 15px; |
|
} |
|
.android_theme .mblRoundRectList { |
|
border-color: #666666; |
|
} |
|
.blackberry_theme .c3 { |
|
margin-top: 13px; |
|
} |
|
.c3a { |
|
border: 2px solid #598F3A; |
|
background-color: #6FB248; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#6FB248), to(#54972D), color-stop(0.5, #5FA238), color-stop(0.5, #54972D)); |
|
} |
|
.c3b { |
|
border: 2px solid #9B322D; |
|
background-color: #C13E37; |
|
background-image: -webkit-gradient(linear, left top, left bottom, from(#C13E37), to(#A6231C), color-stop(0.5, #B6332C), color-stop(0.5, #A8251E)); |
|
} |
|
#tbl1 { |
|
margin: auto; |
|
} |
|
#tbl1 td { |
|
text-align: right; |
|
border-bottom: 1px solid #DEE9F5; |
|
font: bold 13px arial,helvetica,clean,sans-serif; |
|
} |
|
#tbl1 td:first-child { |
|
text-align: left; |
|
} |
|
#tbl1 td.g { |
|
color: #008800 |
|
} |
|
#tbl1 td.r { |
|
color: #CC0000 |
|
} |
|
|
|
.windows_theme .mblRoundRectList, .mblRoundRect { |
|
margin: 0; |
|
} |
|
|
|
.windows_theme #general { |
|
margin-left: 15px; |
|
} |
|
|
|
.windows_theme .c3 { |
|
width: auto; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body style="visibility:hidden;"> |
|
<div id="general" data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"200px",roundCornerMask:true'> |
|
<ul data-dojo-type="dojox.mobile.RoundRectList" class="list1" data-dojo-props='stateful:true'> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Gold</div> |
|
<div class="c2">3,400.20</div> |
|
<div class="c3 c3a">+1.57%</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Oil</div> |
|
<div class="c2">347.26</div> |
|
<div class="c3 c3b">-0.82%</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Commodities</div> |
|
<div class="c2">541.77</div> |
|
<div class="c3 c3b">-0.43%</div> |
|
|
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Silver</div> |
|
<div class="c2">12,823.94</div> |
|
<div class="c3 c3a">+0.17%</div> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Soybeans</div> |
|
<div class="c2">18.19</div> |
|
<div class="c3 c3a">+2.77%</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Wheat</div> |
|
<div class="c2">3,335</div> |
|
<div class="c3 c3a">+1.62%</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Corn</div> |
|
<div class="c2">29,930</div> |
|
<div class="c3 c3a">+1.15%</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'> |
|
<div class="c1">Sugar</div> |
|
<div class="c2">172.15</div> |
|
<div class="c3 c3a">+0.00%</div> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<div style="position:relative"> |
|
<div id="swap1" data-dojo-type="dojox.mobile.SwapView"> |
|
<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"200px",roundCornerMask:true'> |
|
<ul id="news" class="list1" data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='variableHeight:true'> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Oil prices rise as dollar weakens |
|
<div class="subtitle">Daily News - 2011/05/02 15:40</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Same Old Story For Air Service Costs |
|
<div class="subtitle">Daily News - 2011/05/02 14:30</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Local stocks mixed despite new trade data |
|
<div class="subtitle">Daily News - 2011/05/02 14:10</div> |
|
</li> |
|
|
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Stocks point higher after economic data |
|
<div class="subtitle">Daily News - 2011/05/02 11:00</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Wall St seen higher after industry forecasts |
|
<div class="subtitle">Daily News - 2011/05/01 16:05</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Stocks drop on slower job creation |
|
<div class="subtitle">Daily News - 2011/05/01 15:50</div> |
|
</li> |
|
<li data-dojo-type="dojox.mobile.ListItem" |
|
data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'> |
|
Dollar initially falls after revised jobs report |
|
<div class="subtitle">Daily News - 2011/05/01 13:20</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div id="swap2" data-dojo-type="dojox.mobile.SwapView"> |
|
<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"200px",roundCornerMask:true'> |
|
<div data-dojo-type="dojox.mobile.RoundRect" style="position:relative;background-color:#00575F;color:white;"> |
|
<table id="tbl1" style="width:90%"> |
|
<tr><td>2 Yr Bond</td><td>113.75</td><td>0.00</td><td class="g">0.00%</td></tr> |
|
<tr><td>N225</td><td>10,004.20</td><td>154.46</td><td class="g">1.57%</td></tr> |
|
<tr><td>JKSE</td><td>3,816.44</td><td>32.87</td><td class="r">-0.85%</td></tr> |
|
<tr><td>Seoul</td><td>2,200.73</td><td>28.23</td><td class="g">1.27%</td></tr> |
|
<tr><td>TW</td><td>8,946.08</td><td>61.79</td><td class="r">-0.69%</td></tr> |
|
<tr><td>Tokyo</td><td>2,932.19</td><td>20.68</td><td class="r">-0.71%</td></tr> |
|
<tr><td>Osaka</td><td>113.75</td><td>0.00</td><td class="g">0.00%</td></tr> |
|
<tr><td>HSI</td><td>10,004.20</td><td>154.46</td><td class="g">1.57%</td></tr> |
|
<tr><td>AORD</td><td>3,816.44</td><td>32.87</td><td class="r">-0.85%</td></tr> |
|
<tr><td>BSESN</td><td>2,200.73</td><td>28.23</td><td class="g">1.27%</td></tr> |
|
<tr><td>PSEI</td><td>8,946.08</td><td>61.79</td><td class="r">-0.69%</td></tr> |
|
<tr><td>STI</td><td>2,932.19</td><td>20.68</td><td class="r">-0.71%</td></tr> |
|
<tr><td>All</td><td>4,854.70</td><td>41.50</td><td class="r">-0.85%</td></tr> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="swap3" data-dojo-type="dojox.mobile.SwapView"> |
|
<div data-dojo-type="dojox.mobile.ScrollablePane" data-dojo-props='height:"200px",roundCornerMask:true'> |
|
<div data-dojo-type="dojox.mobile.RoundRect" style="overflow:hidden;background-color:#00575F;"> |
|
<img src="images/chart.png" alt=""> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div data-dojo-type="dojox.mobile.PageIndicator" data-dojo-props='fixed:"bottom"'></div> |
|
</div> |
|
</body> |
|
</html>
|
|
|