PHP & JavaScript Room :: 設置サンプル

実行結果

CollapsiblePanel

Panel 1
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Panel 2
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Panel 3
Content for Panel 3 goes here!
Content for Panel 3 goes here!
Content for Panel 3 goes here!
Panel 4
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Panel 5
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!

CollapsiblePanelGroup

Panel 1
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Content for Panel 1 goes here!
Panel 2
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Content for Panel 2 goes here!
Panel 3
Content for Panel 3 goes here!
Content for Panel 3 goes here!
Content for Panel 3 goes here!
Panel 4
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Content for Panel 4 goes here!
Panel 5
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!
Content for Panel 5 goes here!

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax &raquo; Spry: ウィジェット（UIコントロール） &raquo; Collapsible Panel / CollapsiblePanelGroup（折りたたみパネル）| PHP & JavaScript Room</title>
<script language="JavaScript" type="text/javascript" src="/content/spry/includes/SpryData.js"></script>
<script language="JavaScript" type="text/javascript" src="/content/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/collapsiblepanel/SpryCollapsiblePanel.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/collapsiblepanel/custom.css" />
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div class="left">
   <p><strong>CollapsiblePanel</strong></p>
   <form action="">
      <p>
         <input type="button" onclick="cp1.open();" value="Panel1を開く">
         <input type="button" onclick="cp1.close();" value="Panel1を閉じる">
      </p>
   </form>
   <div class="CollapsiblePanel" id="cp1">
      <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
      <div class="CollapsiblePanelContent">
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
         Content for Panel 1 goes here!<br>
      </div>
   </div>
   <div class="CollapsiblePanel" id="cp2">
      <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
      <div class="CollapsiblePanelContent">
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
         Content for Panel 2 goes here!<br>
      </div>
   </div>
   <div class="CollapsiblePanel" id="cp3">
      <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>
      <div class="CollapsiblePanelContent">
         Content for Panel 3 goes here!<br>
         Content for Panel 3 goes here!<br>
         Content for Panel 3 goes here!<br>
      </div>
   </div>
   <div class="CollapsiblePanel" id="cp4">
      <div class="CollapsiblePanelTab" tabindex="0">Panel 4</div>
      <div class="CollapsiblePanelContent">
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
         Content for Panel 4 goes here!<br>
      </div>
   </div>
   <div class="CollapsiblePanel" id="cp5">
      <div class="CollapsiblePanelTab"><a href="#">Panel 5</a></div>
      <div class="CollapsiblePanelContent">
         Content for Panel 5 goes here!<br>
         Content for Panel 5 goes here!<br>
         Content for Panel 5 goes here!<br>
         Content for Panel 5 goes here!<br>
         Content for Panel 5 goes here!<br>
      </div>
   </div>
   <script language="JavaScript" type="text/javascript">
   var cp1 = new Spry.Widget.CollapsiblePanel(
      "cp1",
      {
          /* 開閉時にアニメーションするか否か: true | false 
             デフォルトはtrue（アニメーションする）*/
           enableAnimation:true,
          /* アニメーションの速度: ミリ秒（1000ミリ秒=1秒）
            デフォルトは500ミリ秒 */
             duration:100
      }
   );
   var cp2 = new Spry.Widget.CollapsiblePanel("cp2");
   var cp3 = new Spry.Widget.CollapsiblePanel("cp3");
   var cp4 = new Spry.Widget.CollapsiblePanel("cp4");
   var cp5 = new Spry.Widget.CollapsiblePanel("cp5");
   </script>
</div>

<div class="right">
   <p><strong>CollapsiblePanelGroup</strong></p>
   <div id="CollapsiblePanelGroup1" class="CollapsiblePanelGroup">
      <div class="CollapsiblePanel">
         <div class="CollapsiblePanelTab" tabindex="0">Panel 1</div>
         <div class="CollapsiblePanelContent">
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
            Content for Panel 1 goes here!<br>
         </div>
      </div>
      <div class="CollapsiblePanel">
         <div class="CollapsiblePanelTab" tabindex="0">Panel 2</div>
         <div class="CollapsiblePanelContent">
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
            Content for Panel 2 goes here!<br>
         </div>
      </div>
      <div class="CollapsiblePanel">
         <div class="CollapsiblePanelTab" tabindex="0">Panel 3</div>
         <div class="CollapsiblePanelContent">
            Content for Panel 3 goes here!<br>
            Content for Panel 3 goes here!<br>
            Content for Panel 3 goes here!<br>
         </div>
      </div>
      <div class="CollapsiblePanel">
         <div class="CollapsiblePanelTab" tabindex="0">Panel 4</div>
         <div class="CollapsiblePanelContent">
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
            Content for Panel 4 goes here!<br>
         </div>
      </div>
      <div class="CollapsiblePanel">
         <div class="CollapsiblePanelTab"><a href="#">Panel 5</a></div>
         <div class="CollapsiblePanelContent">
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
            Content for Panel 5 goes here!<br>
         </div>
      </div>
   </div>
   <script language="JavaScript" type="text/javascript">
   var cpg1 = new Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup1");
   </script>
</div>
</body>
</html>