Ajax » Spry: ウィジェット（UIコントロール） » Accordion（アコーディオン）| PHP & JavaScript Room

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

実行結果

Panel 1
Content for Panel 1 goes here!
Panel 2
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! Content for Panel 3 goes here!
Panel 4
Content for Panel 4 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; Accordion（アコーディオン）| PHP & JavaScript Room</title>
<script language="JavaScript" type="text/javascript" src="/content/spry/widgets/accordion/SpryAccordion.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/accordion/SpryAccordion.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/accordion/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>
<form action="#">
   <p>
   <input type="button" onclick="acc1.openFirstPanel()" value="最初のパネルを開く">
   <input type="button" onclick="acc1.openNextPanel()" value="次のパネルを開く">
   <input type="button" onclick="acc1.openPreviousPanel()" value="前のパネルを開く">
   <input type="button" onclick="acc1.openLastPanel()" value="最後のパネルを開く">
   </p>
</form>
<div class="Accordion" id="AccodionPanel1" tabindex="0">
   <div class="AccordionPanel">
      <div class="AccordionPanelTab">Panel 1</div>
      <div class="AccordionPanelContent">
         Content for Panel 1 goes here!<br>
      </div>
   </div>
   <div class="AccordionPanel">
      <div class="AccordionPanelTab">Panel 2</div>
      <div class="AccordionPanelContent">
         Content for Panel 2 goes here!
      </div>
   </div>
   <div class="AccordionPanel">
      <div class="AccordionPanelTab">Panel 3</div>
      <div class="AccordionPanelContent">
         Content for Panel 3 goes here!
         Content for Panel 3 goes here!
         Content for Panel 3 goes here!
         Content for Panel 3 goes here!
      </div>
   </div>
   <div class="AccordionPanel">
      <div class="AccordionPanelTab">Panel 4</div>
      <div class="AccordionPanelContent">
         Content for Panel 4 goes here!
      </div>
   </div>
</div>
<script language="JavaScript" type="text/javascript">
var acc1 = new Spry.Widget.Accordion(
   "AccodionPanel1",
   {
      defaultPanel:1,
      enableAnimation:true,
      duration:500,
      useFixedPanelHeights:true
   }
);
</script>
</body>
</html>