Dojo/JavaScript Toolkitのメモ

PageContainerを用いることで、ページを切り替えるようなレイアウトを作成できる。

まず、配置する場所に、属性 dojoType="PageContainer" を持つdiv要素を作成する。

このdiv要素の子要素に、各ページに配置するコンテナ要素を指定する。各ページの要素には、dojoType="ContentPane" 属性を指定する。以下の例では、３つのページを作成している。また、属性selected="true"を指定したページ要素がデフォルトの表示ページとなる。

<script type="text/javascript">
  dojo.require("dojo.widget.PageContainer");
  dojo.require("dojo.widget.ContentPane");
</script>

<style>
  .mycontainer {width:300px; height:200px; border:3px dashed aqua; margin: 1em;}
</style>

<div id="myPageContainer" dojoType="PageContainer" class="mycontainer">
  <p id="page1" dojoType="ContentPane" label="page 1">
    page1
  </p>
  <p id="page2" dojoType="ContentPane" selected="true" label="page 2">
    page2
  </p>
  <p id="page3" dojoType="ContentPane" label="page 3">
    page3
  </p>
</div>

以下に、表示したPageContainerのページを切り替える例を示す。

<

>

PageControllerを作ることで、前ページのインデックスを作成できる。また、PageContainerのwidgetに対して、back()、forward()メソッドを呼ぶことで、ページを切り替えることもできる。

<script type="text/javascript">
  dojo.require("dojo.event.topic");

  function selected(page){
    dojo.byId("previous").disabled = page.isFirstChild;
    dojo.byId("next").disabled = page.isLastChild;
  }
  dojo.addOnLoad(function(){
    dojo.event.topic.subscribe("myPageContainer-selectChild", selected);
  });
</script>

<style>
  .dojoPageController .item { margin: 0px 5px 0px 5px; }
  .dojoPageController .selectButton { text-decoration: underline; cursor: pointer; margin-right: 3px;}
  .dojoPageController .closeButton { cursor: pointer; };
  .dojoPageController .item { color: #333366; }
  .dojoPageController .current { color: blue; font: bold;}
</style>

<button id="previous" onClick="dojo.widget.byId('myPageContainer').back()"><</button>
<div dojoType="PageController" containerId="myPageContainer"></div>
<button id="next" onClick="dojo.widget.byId('myPageContainer').forward()">></button>