source: Dev/trunk/src/client/dojox/mobile/tests/test_SwapView-demo.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.
File size: 8.3 KB
Line 
1<!DOCTYPE html>
2<html>
3<head>
4        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
5        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
6        <meta name="apple-mobile-web-app-capable" content="yes"/>
7        <title>SwapView Demo</title>
8
9        <link href="../themes/common/domButtons.css" rel="stylesheet"/>
10        <script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','PageIndicator','FixedSplitter']"></script>
11        <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>
12
13        <script type="text/javascript">
14                require([
15                        "dojox/mobile/parser",
16                        "dojox/mobile",
17                        "dojox/mobile/compat",
18                        "dojox/mobile/FixedSplitter",
19                        "dojox/mobile/ScrollableView",
20                        "dojox/mobile/Pane",
21                        "dojox/mobile/Container",
22                        "dojox/mobile/SwapView",
23                        "dojox/mobile/PageIndicator"
24                ]);
25        </script>
26
27        <style>
28        html,body{
29                height: 100%;
30                overflow: hidden;
31                position: relative;
32        }
33        .subtitle {
34                color: gray;
35                font-size: 12px;
36        }
37        #news {
38                font-size: 14px;
39        }
40        .list1 li{
41                color: black;
42        }
43        .list1 li.mblListItemSelected {
44                color: white;
45        }
46        .list1 li:nth-child(even){
47                background-color: #EAEAEA;
48        }
49        .list1 li:nth-child(odd){
50                background-color: white;
51        }
52        .list1 .mblListItemTextBox {
53                padding-right: 5px;
54        }
55        .c1 {
56                width: 120px;
57                float: left;
58        }
59        .c2 {
60                width: 80px;
61                text-align: right;
62                float: left;
63        }
64        .c3 {
65                text-align: right;
66                width: 70px;
67                color: white;
68                padding: 0px 4px;
69                margin-top: 4px;
70                height: 30px;
71                line-height: 32px;
72                float: right;
73                -webkit-border-radius: 4px;
74                -moz-border-radius: 4px;
75        }
76        .android_theme .c3 {
77                margin-top: 15px;
78        }
79        .android_theme .mblRoundRectList {
80                border-color: #666666;
81        }
82        .blackberry_theme .c3 {
83                margin-top: 13px;
84        }
85        .windows_theme .c3 {
86                width: 80px;
87        }
88        .c3a {
89                border: 2px solid #598F3A;
90                background-color: #6FB248;
91                background-image: -webkit-gradient(linear, left top, left bottom, from(#6FB248), to(#54972D), color-stop(0.5, #5FA238), color-stop(0.5, #54972D));
92        }
93        .c3b {
94                border: 2px solid #9B322D;
95                background-color: #C13E37;
96                background-image: -webkit-gradient(linear, left top, left bottom, from(#C13E37), to(#A6231C), color-stop(0.5, #B6332C), color-stop(0.5, #A8251E));
97        }
98        #tbl1 {
99                margin: auto;
100        }
101        #tbl1 td {
102                text-align: right;
103                border-bottom: 1px solid #DEE9F5;
104                font: bold 13px arial,helvetica,clean,sans-serif;
105        }
106        #tbl1 td:first-child {
107                text-align: left;
108        }
109        #tbl1 td.g {
110                color: #008800
111        }
112        #tbl1 td.r {
113                color: #CC0000
114        }
115        </style>
116</head>
117<body style="visibility:hidden;">
118        <div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props='orientation:"V"'>
119                <div data-dojo-type="dojox.mobile.Container" style="height:50%;overflow:hidden;">
120                        <div id="general" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='height:"inherit"'>
121                                <ul data-dojo-type="dojox.mobile.RoundRectList" class="list1" data-dojo-props='stateful:true'>
122                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
123                                                <div class="c1">Gold</div>
124                                                <div class="c2">3,400.20</div>
125                                                <div class="c3 c3a">+1.57%</div>
126                                        </li>
127                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
128                                                <div class="c1">Oil</div>
129                                                <div class="c2">347.26</div>
130                                                <div class="c3 c3b">-0.82%</div>
131                                        </li>
132                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
133                                                <div class="c1">Commodities</div>
134                                                <div class="c2">541.77</div>
135                                                <div class="c3 c3b">-0.43%</div>
136                                               
137                                        </li>
138                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
139                                                <div class="c1">Silver</div>
140                                                <div class="c2">12,823.94</div>
141                                                <div class="c3 c3a">+0.17%</div>
142                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
143                                                <div class="c1">Soybeans</div>
144                                                <div class="c2">18.19</div>
145                                                <div class="c3 c3a">+2.77%</div>
146                                        </li>
147                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
148                                                <div class="c1">Wheat</div>
149                                                <div class="c2">3,335</div>
150                                                <div class="c3 c3a">+1.62%</div>
151                                        </li>
152                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
153                                                <div class="c1">Corn</div>
154                                                <div class="c2">29,930</div>
155                                                <div class="c3 c3a">+1.15%</div>
156                                        </li>
157                                        <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='moveTo:"#"'>
158                                                <div class="c1">Sugar</div>
159                                                <div class="c2">172.15</div>
160                                                <div class="c3 c3a">+0.00%</div>
161                                        </li>
162                                </ul>
163                        </div>
164                </div>
165
166                <div data-dojo-type="dojox.mobile.Pane" style="height:10px;overflow:hidden;">
167                </div>
168
169                <div data-dojo-type="dojox.mobile.Container" style="overflow:hidden;">
170                        <div id="swap1" data-dojo-type="dojox.mobile.SwapView">
171                                <div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='height:"100%"'>
172                                        <ul id="news" data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='variableHeight:true'>
173                                                <li data-dojo-type="dojox.mobile.ListItem"
174                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
175                                                        Oil prices rise as dollar weakens
176                                                        <div class="subtitle">Daily News - 2011/05/02 15:40</div>
177                                                </li>
178                                                <li data-dojo-type="dojox.mobile.ListItem"
179                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
180                                                        Same Old Story For Air Service Costs
181                                                        <div class="subtitle">Daily News - 2011/05/02 14:30</div>
182                                                </li>
183                                                <li data-dojo-type="dojox.mobile.ListItem"
184                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
185                                                        Local stocks mixed despite new trade data
186                                                        <div class="subtitle">Daily News - 2011/05/02 14:10</div>
187                                                </li>
188
189                                                <li data-dojo-type="dojox.mobile.ListItem"
190                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
191                                                        Stocks point higher after economic data
192                                                        <div class="subtitle">Daily News - 2011/05/02 11:00</div>
193                                                </li>
194                                                <li data-dojo-type="dojox.mobile.ListItem"
195                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
196                                                        Wall St seen higher after industry forecasts
197                                                        <div class="subtitle">Daily News - 2011/05/01 16:05</div>
198                                                </li>
199                                                <li data-dojo-type="dojox.mobile.ListItem"
200                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
201                                                        Stocks drop on slower job creation
202                                                        <div class="subtitle">Daily News - 2011/05/01 15:50</div>
203                                                </li>
204                                                <li data-dojo-type="dojox.mobile.ListItem"
205                                                        data-dojo-props='href:"test_ScrollableView-demo.html", hrefTarget:"_blank", arrowClass:"mblDomButtonBlueCircleArrow"'>
206                                                        Dollar initially falls after revised jobs report
207                                                        <div class="subtitle">Daily News - 2011/05/01 13:20</div>
208                                                </li>
209                                        </ul>
210                                </div>
211                        </div>
212
213                        <div id="swap2" data-dojo-type="dojox.mobile.SwapView">
214                                <div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='height:"100%"'>
215                                        <div data-dojo-type="dojox.mobile.RoundRect" style="position:relative;">
216                                        <table id="tbl1" style="width:90%">
217                                                <tr><td>2 Yr Bond</td><td>113.75</td><td>0.00</td><td class="g">0.00%</td></tr>
218                                                <tr><td>N225</td><td>10,004.20</td><td>154.46</td><td class="g">1.57%</td></tr>
219                                                <tr><td>JKSE</td><td>3,816.44</td><td>32.87</td><td class="r">-0.85%</td></tr>
220                                                <tr><td>Seoul</td><td>2,200.73</td><td>28.23</td><td class="g">1.27%</td></tr>
221                                                <tr><td>TW</td><td>8,946.08</td><td>61.79</td><td class="r">-0.69%</td></tr>
222                                                <tr><td>Tokyo</td><td>2,932.19</td><td>20.68</td><td class="r">-0.71%</td></tr>
223                                                <tr><td>All</td><td>4,854.70</td><td>41.50</td><td class="r">-0.85%</td></tr>
224                                        </table>
225                                        </div>
226                                </div>
227                        </div>
228
229                        <div id="swap3" data-dojo-type="dojox.mobile.SwapView">
230                                <div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='height:"100%"'>
231                                        <div data-dojo-type="dojox.mobile.RoundRect" style="overflow:hidden">
232                                                <img src="images/chart.png" alt="">
233                                        </div>
234                                </div>
235                        </div>
236
237                        <div data-dojo-type="dojox.mobile.PageIndicator" data-dojo-props='fixed:"bottom"'></div>
238                </div>
239        </div>
240</body>
241</html>
Note: See TracBrowser for help on using the repository browser.