source: sandbox/newExpressoMail/prototype/plugins/layout/simple.html @ 7209

Revision 7209, 5.5 KB checked in by gustavo, 12 years ago (diff)

Ticket #0000 - Criado novo modulo para o desenvolvimento do novo ExpressoMail?
  • Property svn:executable set to *
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4
5        <title>Simple Layout Demo</title>
6
7        <script type="text/javascript" src="jquery.js"></script>
8        <script type="text/javascript" src="jquery.ui.all.js"></script>
9        <script type="text/javascript" src="jquery.layout.js"></script>
10
11        <script type="text/javascript" src="js/complex.js"></script>
12
13        <script type="text/javascript">
14
15        var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method
16
17        $(document).ready(function () {
18                myLayout = $('body').layout({
19                        // enable showOverflow on west-pane so popups will overlap north pane
20                        west__showOverflowOnHover: true
21
22                //,     west__fxSettings_open: { easing: "easeOutBounce", duration: 750 }
23                });
24        });
25
26        </script>
27
28
29        <style type="text/css">
30        /**
31         *      Basic Layout Theme
32         *
33         *      This theme uses the default layout class-names for all classes
34         *      Add any 'custom class-names', from options: paneClass, resizerClass, togglerClass
35         */
36
37        .ui-layout-pane { /* all 'panes' */
38                background: #FFF;
39                border: 1px solid #BBB;
40                padding: 10px;
41                overflow: auto;
42        }
43
44        .ui-layout-resizer { /* all 'resizer-bars' */
45                background: #DDD;
46        }
47
48        .ui-layout-toggler { /* all 'toggler-buttons' */
49                background: #AAA;
50        }
51
52
53        </style>
54
55
56        <style type="text/css">
57        /**
58         *      ALL CSS below is only for cosmetic and demo purposes
59         *      Nothing here affects the appearance of the layout
60         */
61
62        body {
63                font-family: Arial, sans-serif;
64                font-size: 0.85em;
65        }
66        p {
67                margin: 1em 0;
68        }
69
70        /*
71         *      Rules below are for simulated drop-down/pop-up lists
72         */
73
74        ul {
75                /* rules common to BOTH inner and outer UL */
76                z-index:        100000;
77                margin:         1ex 0;
78                padding:        0;
79                list-style:     none;
80                cursor:         pointer;
81                border:         1px solid Black;
82                /* rules for outer UL only */
83                width:          15ex;
84                position:       relative;
85        }
86        ul li {
87                background-color: #EEE;
88                padding: 0.15em 1em 0.3em 5px;
89        }
90        ul ul {
91                display:        none;
92                position:       absolute;
93                width:          100%;
94                left:           -1px;
95                /* Pop-Up */
96                bottom:         0;
97                margin:         0;
98                margin-bottom: 1.55em;
99        }
100        .ui-layout-north ul ul {
101                /* Drop-Down */
102                bottom:         auto;
103                margin:         0;
104                margin-top:     1.45em;
105        }
106        ul ul li                { padding: 3px 1em 3px 5px; }
107        ul ul li:hover  { background-color: #FF9; }
108        ul li:hover ul  { display:      block; background-color: #EEE; }
109
110        </style>
111
112</head>
113<body>
114
115<!-- manually attach allowOverflow method to pane -->
116<div class="ui-layout-north" onmouseover="myLayout.allowOverflow('north')" onmouseout="myLayout.resetOverflow(this)">
117        This is the north pane, closable, slidable and resizable
118
119        <ul>
120                <li>
121                        <ul>
122                                <li>one</li>
123                                <li>two</li>
124                                <li>three</li>
125                                <li>four</li>
126                                <li>five</li>
127                        </ul>
128                        Drop-Down <!-- put this below so IE and FF render the same! -->
129                </li>
130        </ul>
131
132</div>
133
134<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
135<div class="ui-layout-west">
136        This is the west pane, closable, slidable and resizable
137
138        <ul>
139                <li>
140                        <ul>
141                                <li>one</li>
142                                <li>two</li>
143                                <li>three</li>
144                                <li>four</li>
145                                <li>five</li>
146                        </ul>
147                        Pop-Up <!-- put this below so IE and FF render the same! -->
148                </li>
149        </ul>
150
151        <p><button onclick="myLayout.close('west')">Close Me</button></p>
152
153        <p><a href="#" onClick="showOptions(myLayout,'defaults.fxSettings_open');showOptions(myLayout,'west.fxSettings_close')">Show Options.Defaults</a></p>
154
155</div>
156
157<div class="ui-layout-south">
158        This is the south pane, closable, slidable and resizable &nbsp;
159        <button onclick="myLayout.toggle('north')">Toggle North Pane</button>
160</div>
161
162<div class="ui-layout-east">
163        This is the east pane, closable, slidable and resizable
164
165        <!-- attach allowOverflow method to this specific element -->
166        <ul onmouseover="myLayout.allowOverflow(this)" onmouseout="myLayout.resetOverflow('east')">
167                <li>
168                        <ul>
169                                <li>one</li>
170                                <li>two</li>
171                                <li>three</li>
172                                <li>four</li>
173                                <li>five</li>
174                        </ul>
175                        Pop-Up <!-- put this below so IE and FF render the same! -->
176                </li>
177        </ul>
178
179        <p><button onclick="myLayout.close('east')">Close Me</button></p>
180
181        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
182        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
183        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
184        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
185</div>
186
187<div class="ui-layout-center">
188        This center pane auto-sizes to fit the space <i>between</i> the 'border-panes'
189        <p>This layout was created with only <b>default options</b> - no customization</p>
190        <p>Only the <b>applyDefaultStyles</b> option was enabled for <i>basic</i> formatting</p>
191        <p>The Pop-Up and Drop-Down lists demonstrate the <b>allowOverflow()</b> utility</p>
192        <p>The Close and Toggle buttons are examples of <b>custom buttons</b></p>
193        <p><a href="http://layout.jquery-dev.net/demos.html">Go to the Demos page</a></p>
194        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
195        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
196        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
197        <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
198</div>
199
200</body>
201</html>
Note: See TracBrowser for help on using the repository browser.