source: Dev/branches/rest-dojo-ui/client/dijit/tests/layout/mobile.html @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 7.3 KB
Line 
1<!DOCTYPE>
2<html>
3        <head>
4                <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
5                <meta name="apple-mobile-web-app-capable" content="yes" />
6                <title>Layout widgets mobile test page</title>
7                <link href="../../themes/claro/claro.css" rel="stylesheet"/>
8                <link href="../../icons/commonIcons.css" rel="stylesheet"/>
9                <link href="../css/dijitTests.css" rel="stylesheet"/>
10                <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true"></script>
11
12                <script language="JavaScript" type="text/javascript">
13                        require([
14                                "dojo/_base/kernel",
15                                "dijit",
16                                "dojo/parser",
17
18                                "dijit/layout/ContentPane",
19                                "dijit/layout/AccordionContainer",
20                                "dijit/layout/BorderContainer",
21                                "dijit/layout/TabContainer",
22                                "dojo/domReady!"
23                        ], function(dojo, dijit){
24                                dojo.parser.parse();
25                        });
26                </script>
27        </head>
28        <body class="claro">
29                <h1>Accordion</h1>
30                <div id="ac" data-dojo-type="dijit.layout.AccordionContainer" style="height: 300px">
31                        <div id="acp1" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true,
32                                title:"Pane 1", iconClass:"dijitEditorIcon dijitEditorIconSave", tooltip:"tooltip for simple pane" '>
33                                <p>
34                                        Nunc consequat nisi vitae quam. Suspendisse sed nunc. Proin
35                                        suscipit porta magna. Duis accumsan nunc in velit. Nam et nibh.
36                                        Nulla facilisi. Cras venenatis urna et magna. Aenean magna mauris,
37                                        bibendum sit amet, semper quis, aliquet nec, sapien.  Aliquam
38                                        aliquam odio quis erat. Etiam est nisi, condimentum non, lacinia
39                                        ac, vehicula laoreet, elit. Sed interdum augue sit amet quam
40                                        dapibus semper. Nulla facilisi. Pellentesque lobortis erat nec
41                                        quam.
42                                </p>
43                        </div>
44                        <div id="acp2" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='
45                                        title:"Pane 2", iconClass:"dijitEditorIcon dijitEditorIconSave", tooltip:"tooltip for simple pane" '>
46                                <p>
47                                        Sed arcu magna, molestie at, <input value="fringilla in, sodales"/> fringilla in, sodales eu, elit.
48                                        Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
49                                        vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
50                                        augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
51                                        metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
52                                        ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
53                                        euismod, magna nulla viverra libero, sit amet lacinia odio diam id
54                                        risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
55                                        porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
56                                        faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
57                                        consequat quis, varius interdum, nulla. Donec neque tortor,
58                                        sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
59                                        ut eros sit amet ante pharetra interdum.
60                                </p>
61                        </div>
62                </div>
63
64
65                <h1>BorderContainer</h1>
66                <div id="bc" data-dojo-type="dijit.layout.BorderContainer" style="height: 200px; width: 100%">
67                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"left", style:"width:50%", splitter:true'>
68                                1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
69                                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
70                                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
71                                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
72                                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
73                                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
74                                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
75                                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
76                                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
77                                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
78                                consequat quis, varius interdum, nulla. Donec neque tortor,
79                                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
80                                ut eros sit amet ante pharetra interdum.
81                        </div>
82                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='region:"center"'>
83                                2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
84                                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
85                                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
86                                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
87                                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
88                                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
89                                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
90                                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
91                                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
92                                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
93                                consequat quis, varius interdum, nulla. Donec neque tortor,
94                                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
95                                ut eros sit amet ante pharetra interdum.
96                        </div>
97                </div>
98
99                <h1>TabContainer</h1>
100                <div data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"height:200px"'>
101                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 1"'>
102                                1Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
103                                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
104                                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
105                                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
106                                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
107                                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
108                                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
109                                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
110                                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
111                                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
112                                consequat quis, varius interdum, nulla. Donec neque tortor,
113                                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
114                                ut eros sit amet ante pharetra interdum.
115                        </div>
116                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 2"'>
117                                2Sed arcu magna, molestie at, fringilla in, sodales eu, elit.
118                                Curabitur mattis lorem et est. Quisque et tortor. Integer bibendum
119                                vulputate odio. Nam nec ipsum. Vestibulum mollis eros feugiat
120                                augue. Integer fermentum odio lobortis odio. Nullam mollis nisl non
121                                metus. Maecenas nec nunc eget pede ultrices blandit. Ut non purus
122                                ut elit convallis eleifend. Fusce tincidunt, justo quis tempus
123                                euismod, magna nulla viverra libero, sit amet lacinia odio diam id
124                                risus. Ut varius viverra turpis. Morbi urna elit, imperdiet eu,
125                                porta ac, pharetra sed, nisi. Etiam ante libero, ultrices ac,
126                                faucibus ac, cursus sodales, nisl. Praesent nisl sem, fermentum eu,
127                                consequat quis, varius interdum, nulla. Donec neque tortor,
128                                sollicitudin sed, consequat nec, facilisis sit amet, orci. Aenean
129                                ut eros sit amet ante pharetra interdum.
130                        </div>
131                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 3"' closable=true>
132                                Tab 3 contents
133                        </div>
134                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 4"' closable=true>
135                                Tab 4 contents
136                        </div>
137                        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"Tab 5"' closable=true>
138                                Tab 5 contents
139                        </div>
140                </div>
141        </body>
142</html>
Note: See TracBrowser for help on using the repository browser.