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

実行結果

Tab 1 Content

あああああああああああああ

Tab 2 Content

いいいいいいいいいいいいい

Tab 3 Content

ううううううううううううう

設置サンプルのソース

<!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; Tabbed Panels（タブパネル）| PHP & JavaScript Room</title>
<script type="text/javascript" src="/content/spry/widgets/tabbedpanels/SpryTabbedPanels.js"></script>
<link rel="stylesheet" type="text/css" href="/content/spry/widgets/tabbedpanels/SpryTabbedPanels.css" />
<link rel="stylesheet" type="text/css" href="/module/include/ajax/adobespry_widget/tabbedpanels/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>
<p>
   <input type="button" value="最初のパネルを表示" onclick="tps1.showPanel(0)" >
   <input type="button" value="最後のパネルを表示" onclick="tps1.showPanel(2)" >
</p>
<div class="TabbedPanels" id="TabbedPanel1">
   <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
   </ul>
   <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
         <h3>Tab 1 Content</h3>
         <p>あああああああああああああ</p>
      </div>
      <div class="TabbedPanelsContent">
         <h3>Tab 2 Content</h3>
         <p>いいいいいいいいいいいいい</p>
      </div>
      <div class="TabbedPanelsContent">
         <h3>Tab 3 Content</h3>
         <p>ううううううううううううう</p>
      </div>
   </div>
</div>

<script type="text/javascript">
var tps1 = new Spry.Widget.TabbedPanels(
   "TabbedPanel1",
   {
      /*
      デフォルトで開くタブを指定する場合は、
      オプションの第2引数に {defaultTab:数値} を指定します。
      デフォルトは「0」（最初のタブ）です。
      */
      defaultTab:2
   }
);
</script>
</body>
</html>