annotate jquery-ui/development-bundle/demos/accordion/fillspace.html @ 19:5840fad81f12

minor
author dwinter
date Mon, 27 Feb 2012 10:59:22 +0100
parents b2e4605f20b2
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
1 <!DOCTYPE html>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
2 <html lang="en">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
3 <head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
4 <meta charset="utf-8">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
5 <title>jQuery UI Accordion - Fill space</title>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
6 <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
7 <script src="../../jquery-1.5.1.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
8 <script src="../../ui/jquery.ui.core.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
9 <script src="../../ui/jquery.ui.widget.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
10 <script src="../../ui/jquery.ui.mouse.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
11 <script src="../../ui/jquery.ui.resizable.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
12 <script src="../../ui/jquery.ui.accordion.js"></script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
13 <link rel="stylesheet" href="../demos.css">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
14 <script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
15 $(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
16 $( "#accordion" ).accordion({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
17 fillSpace: true
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
18 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
19 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
20 $(function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
21 $( "#accordionResizer" ).resizable({
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
22 minHeight: 140,
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
23 resize: function() {
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
24 $( "#accordion" ).accordion( "resize" );
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
25 }
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
26 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
27 });
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
28 </script>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
29 </head>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
30 <body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
31
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
32 <div class="demo">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
33
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
34 <h3 class="docs">Resize the outer container:</h3>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
35
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
36 <div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
37
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
38 <div id="accordion">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
39 <h3><a href="#">Section 1</a></h3>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
40 <div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
41 <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
42 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
43 <h3><a href="#">Section 2</a></h3>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
44 <div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
45 <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
46 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
47 <h3><a href="#">Section 3</a></h3>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
48 <div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
49 <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
50 <ul>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
51 <li>List item one</li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
52 <li>List item two</li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
53 <li>List item three</li>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
54 </ul>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
55 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
56 <h3><a href="#">Section 4</a></h3>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
57 <div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
58 <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
59 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
60 </div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
61
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
62 <span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
63 </div><!-- End accordionResizer -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
64
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
65 <div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
66
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
67 </div><!-- End demo -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
68
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
69
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
70
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
71 <div class="demo-description">
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
72 <p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the boolean <code>fillSpace</code> option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is <code>resizable</code>.</p>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
73 </div><!-- End demo-description -->
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
74
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
75 </body>
b2e4605f20b2 beta version
dwinter
parents:
diff changeset
76 </html>