解説/上級編 †

↑

Theaterクラスインスタンス生成時、およびactメソッドの引数 †

  • ※ここでは例を省略させていただきます。(後日、サンプルファイルを添付します。)
  • Theaterクラスのインスタンス生成時、およびactメソッドの引数は、第一引数にオブジェクトがひとつだけとなり、そのオブジェクトに特定の名前でプロパティを作成することで様々な指定が行えます。
  • Theaterクラスのインスタンス生成時引数は、解説/基礎編#a533d944で解説したimgプロパティやscenarioプロパティが基本となりますが、他にもプロパティが指定可能です。
  • actメソッドの引数も、解説/基礎編#tc2077e6で解説したimgプロパティやmsgプロパティが基本となりますが、他にもプロパティが指定可能です。
  • 以下に設定可能なプロパティを示します。前半がTheaterクラスのインスタンス生成時、actメソッド共通、後半がTheaterクラスのインスタンス生成時固有のプロパティです。
↑

actメソッド固有プロパティ †

  • imgプロパティ、msgプロパティが該当します。
  • imgプロパティはTheaterクラスインスタンス生成時にも存在しますが、意味が異なります。
  • imgプロパティ
    • 説明：表示する画像アドレスを指定する。nullまたは指定しない場合、画像を切り替えない。「」(空文字)を指定した場合、Theaterクラスインスタンス生成時、blankプロパティに指定した画像を表示する。
  • msgプロパティ
    • 説明：表示する文章を指定する。nullまたは指定しない場合、文章を元のままにする。インラインのHTMLタグを使用可能。(ただし、Operaで文章タイプライト動作に支障が出る。)
↑

Theaterクラスインスタンス生成時、actメソッド共通プロパティ †

  • Theaterクラスインスタンス生成時の場合はシナリオ全体、actメソッドの場合はそのときのみの指定となります。
  • actメソッドの指定が優先されます。
  • filterプロパティ
    • 説明：IEのfilterによる画像切替効果を指定する。設定値については効果一覧#h2115ddc参照。デフォルトは「」(空文字=効果なし)。
  • outEffectプロパティ
    • 説明：script.aculo.usのEffectによる画像消滅効果を指定する。設定値については効果一覧#k6d10049参照。デフォルトは「」(空文字=効果なし)。
  • inEffectプロパティ
    • 説明：script.aculo.usのEffectによる画像現出効果を指定する。設定値については効果一覧#u593486c参照。デフォルトは「」(空文字=効果なし)。
  • adjustプロパティ
    • 説明：画像表示時、画像ボックスに対する画像の伸縮調整を指定する。設定できる値とその効果は以下のとおり。
  • adjustプロパティの設定値とその効果
  • 設定値："ADJUST" または 0 (デフォルト)
  • 効果：画像が画像ボックスからはみ出す場合のみ、画像ボックスに合わせて画像を縮小して表示する。画像の縦横比は保持する。
  • 設定値："STATIC" または 1
  • 効果：画像をそのままのサイズで表示する。(画像ボックスからはみ出た部分は隠れる)
  • 設定値："ALL" または 2
  • 効果：画像を画像ボックスに合わせて伸縮して表示する。(画像ボックスより小さい場合は拡大する。) 画像の縦横比は保持する。
  • 設定値："FULL" または 3
  • 効果：画像を画像ボックス一杯になるよう伸縮して表示する。画像の縦横比は保持しない。
  • 設定値："LAST" または 4
  • 効果：直前に指定された設定値と同じ値を設定する。
  • heightプロパティ
    • 説明：画像表示時の画像の高さを指定する。設定しなければ、前述adjustプロパティの効果適用後のサイズとなる。設定できる値の形式とその効果は、次のwidthプロパティの後にまとめる。
  • widthプロパティ
    • 説明：画像表示時の画像の幅を指定する。指定しなければ、前述adjustプロパティの効果適用後のサイズとなる。設定できる値の形式とその効果は以下のとおり。
  • height および widthプロパティの設定値形式とその効果
    • 以下で計算の元になる画像の表示サイズは、前述adjustプロパティの効果適用後のサイズ。
  • 設定値：数値 もしくは 数値 + "px" (例："100" "100px")
  • 効果：数値をpxとして画像の表示サイズとする。
  • 設定値："+" または "-" + 上記の設定値形式 (例："+100" "-100px")
  • 効果：数値をpxとして画像の表示サイズに加算減算する。
  • 設定値：数値 + "%", "per", "pr" のいずれか (例："50%" "200per")
  • 効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイズとする。
  • 設定値："+" または "-" + 上記の設定値形式 (例："+50%" "-20per")
  • 効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイズに加算減算する。
  • topプロパティ
    • 説明：画像ボックス上端を基準とした画像の縦の表示位置を指定する。設定値は、数値、または数値 + "px" の形式。指定しなければ画像ボックスの中央に表示される。
  • leftプロパティ
    • 説明：画像ボックス左端を基準とした画像の横の表示位置を指定する。設定値は、数値、または数値 + "px" の形式。指定しなければ画像ボックスの中央に表示される。
  • isDraggableプロパティ
    • 説明：画像をドラッガブル化するかどうかを設定する。trueでドラッガブル可、falseでドラッガブル不可(デフォルト)。ドラッガブル化した場合、画像ボックスをクリックしてもシナリオは進行しなくなる。また、画像ボックスをダブルクリックすると、画像が元の位置に戻る。
  • typeIntervalプロパティ
    • 説明：文章タイプライト時のタイプライト間隔をミリ秒で指定する。デフォルトは100(0.1秒)。
  • isTypeAllプロパティ
    • 説明：文章タイプライトの可否を設定する。trueでタイプライトせず、一度にすべて表示する。falseでタイプライトする(デフォルト)。
  • isAutoプロパティ
    • 説明：シナリオを自動進行させたい場合にtrue、そうでない場合にfalseを指定する。デフォルトはfalse。
  • playIntervalプロパティ
    • 説明：シナリオ自動進行時において、文章タイプライト終了後に次のシナリオ関数実行までの間隔をミリ秒で指定する。デフォルトは1000(1秒)。
↑

Theaterクラスインスタンス生成時固有プロパティ †

  • imgプロパティ
    • 説明：先読みする画像アドレス配列を指定する。
  • scenarioプロパティ
    • 説明：シナリオ関数配列を指定する。(必須)
  • frameIdプロパティ
    • 説明：画像を表示する要素IDまたはオブジェクトを指定する。デフォルトは「frame」。
  • msgIdプロパティ
    • 説明：文章を表示する要素IDまたはオブジェクトを指定する。デフォルトは「msg」。
  • playIdプロパティ
    • 説明：クリックすることでシナリオが進行する要素のIDまたはオブジェクト指定する。デフォルトは「play」。
  • resetIdプロパティ
    • 説明：クリック時にシナリオを最初に戻す要素IDまたはオブジェクトを指定する。デフォルトは「reset」。
  • nameプロパティ
    • 説明：同一ページに複数Theaterクラスインスタンスを生成する場合に、競合を防ぐために指定する。デフォルトは「Theater」。
  • curtainプロパティ
    • 説明：シナリオ開始前にあらかじめ表示しておく画像のアドレスを指定する。デフォルトはnullで、この場合、なにも表示されない。
  • blankプロパティ
    • 説明：シナリオで画像アドレス指定が「」(空文字)の際に表示する画像のアドレスを指定する。デフォルトはtheater.js等と同じフォルダ内のblank.gif(800×600の透明画像)のアドレス。
↑

メニュー作成 †

  • ※この項目はかなり複雑です。JavaScriptに詳しい方でないと理解しにくいかもしれません。簡略化が課題です・・・。
  • 解説/初級編#m562053cで解説した基本メニュー以外にも、メニューを作成することができます。
  • このためにはmenuメソッドを使用します。引数は、第一引数の設定用カスタムオブジェクトのみで、そのプロパティにより設定を行います。
  • menuメソッド
    • 機能：メニューを表示する。ウィンドウを半透明の要素で覆い、シナリオの進行を抑制する。
    • 第一引数：設定用カスタムオブジェクト。
  • 以下、設定用カスタムオブジェクトのプロパティです。
  • outerプロパティ
    • 説明：メニューの表示基準要素。メニューはこの要素の中央に表示されます。デフォルトは画像表示要素です。
  • titleプロパティ
    • 説明：タイトルバーに表示する文字列を設定します。
  • contentsプロパティ
    • 説明：メニュー内容のhtmlソース。要素のname属性が重要になります。次のactionsプロパティを参照してください。
  • actionsプロパティ
    • 説明：イベント用関数カスタムオブジェクト。前述contentsプロパティの要素にonclickイベントを設定します。形式は{要素のname属性:クリック時実行関数,･･･}となります。
    • 補足：
    • 各イベント関数は各イベント登録要素のメンバとして実行されます(イベント関数内のthisはイベント登録要素を意味します)。
    • 引数にMenuオブジェクト(詳細略)が設定されます。メニューを非表示にしてシナリオに復帰する場合はMenuオブジェクトのcloseメソッドを呼び出してください。
    • シナリオ復帰後、最初に実行されるシナリオ関数の引数に結果を設定するには、TheaterオブジェクトのsetResultメソッドを使用します。
  • focusNameプロパティ
    • 説明：メニュー表示直後にフォーカスする要素のname属性を指定します。
  • 以下は基本メニューのprompt,confirmと同じ機能をシナリオ関数内で記述したものです。
new Theater({
  img: [
    "img/sample1.gif"
  ],
  scenario: [
    function(){
      this.act({
        img: "img/sample1.gif",
        msg: "メニューテスト"
      });
    },
    function(){
      var _theater = this;
      this.menu({
        contents: "MENU TEST<br/>"
                + "<input type='text' name='IN' value='DEFAULT_VALUE'/><br/>"
                + "<button name='btn' class='menu-contents-control'>入力<\/button>",
        actions: {
          'btn': function(menu){
            _theater.setResult(this.form.IN.value);
            menu.close();
          }
        },
        focusName: 'IN',
        title: "入力"
      });
    },
    function(result){
      this.speak("結果：" + result);
    },
    function(){
      var _theater = this;
      this.menu({
        contents: "どっち？<br/>"
          + "<button name='yes' class='menu-contents-control'>はい<\/button>"
          + "<button name='no' class='menu-contents-control'>いいえ<\/button>",
        actions: {
          'yes': function(menu){
            _theater.setResult(true);
            menu.close();
          },
          'no': function(menu){
            _theater.setResult(false);
            menu.close();
          }
        },
        title: "確認"
      });
    },
    function(result){
      this.speak("結果：" + result);
    }
  ]
});
トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2007-08-04 (土) 00:25:55 (6104d)