案例:jQuery UI案例     状态:可编辑再运行    进入竖版
 运行结果 
AخA
      <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>
 
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="utf-8">
5
  <title>jQuery UI 折叠面板(Accordion) - 填充空间</title>
6
  <link rel="stylesheet" href="/css/jqu1.10.4/jquery-ui.min.css">
7
  <script src="/js/jqu/jquery.min1.10.2.js"></script>
8
  <script src="/js/jqu/jquery-ui.min1.10.4.js"></script>
9
  <link rel="stylesheet" href="jqueryui/style.css">
10
  <style>
11
  #accordion-resizer {
12
    padding: 10px;
13
    width: 350px;
14
    height: 220px;
15
  }
16
  </style>
17
  <script>
18
  $(function() {
19
    $( "#accordion" ).accordion({
20
      heightStyle: "fill"
21
    });
22
  });
23
  $(function() {
24
    $( "#accordion-resizer" ).resizable({
25
      minHeight: 140,
26
      minWidth: 200,
27
      resize: function() {
28
        $( "#accordion" ).accordion( "refresh" );
29
      }
30
    });
31
  });
32
  </script>
33
</head>
34
<body>
35
 
36
<h3 class="docs">重新调整外部容器:</h3>
37
 
38
<div id="accordion-resizer" class="ui-widget-content">
39
  <div id="accordion">
40
    <h3>部分 1</h3>
41
    <div>
42
      <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>
43
    </div>
44
    <h3>部分 2</h3>
45
    <div>
46
      <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>
47
    </div>
48
    <h3>部分 3</h3>