解説/上級編
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
#contents
----
*解説/上級編 [#uc3f791c]
**Theaterクラスインスタンス生成時、およびactメソッドの引...
-※ここでは例を省略させていただきます。(後日、サンプルファ...
-Theaterクラスのインスタンス生成時、およびactメソッドの引...
-Theaterクラスのインスタンス生成時引数は、[[解説/基礎編#a...
-actメソッドの引数も、[[解説/基礎編#tc2077e6]]で解説したi...
-以下に設定可能なプロパティを示します。前半がTheaterクラ...
***actメソッド固有プロパティ [#l9aac7f2]
-imgプロパティ、msgプロパティが該当します。
-imgプロパティはTheaterクラスインスタンス生成時にも存在し...
-imgプロパティ
--説明：表示する画像アドレスを指定する。nullまたは指定し...
-msgプロパティ
--説明：表示する文章を指定する。nullまたは指定しない場合...
***Theaterクラスインスタンス生成時、actメソッド共通プロパ...
-Theaterクラスインスタンス生成時の場合はシナリオ全体、act...
-actメソッドの指定が優先されます。
-filterプロパティ
--説明：IEのfilterによる画像切替効果を指定する。設定値に...
-outEffectプロパティ
--説明：script.aculo.usのEffectによる画像消滅効果を指定す...
-inEffectプロパティ
--説明：script.aculo.usのEffectによる画像現出効果を指定す...
-adjustプロパティ
--説明：画像表示時、画像ボックスに対する画像の伸縮調整を...
-adjustプロパティの設定値とその効果
--設定値："ADJUST" または 0 (デフォルト)
--効果：画像が画像ボックスからはみ出す場合のみ、画像ボッ...
--設定値："STATIC" または 1
--効果：画像をそのままのサイズで表示する。(画像ボックスか...
--設定値："ALL" または 2
--効果：画像を画像ボックスに合わせて伸縮して表示する。(画...
--設定値："FULL" または 3
--効果：画像を画像ボックス一杯になるよう伸縮して表示する...
--設定値："LAST" または 4
--効果：直前に指定された設定値と同じ値を設定する。
-heightプロパティ
--説明：画像表示時の画像の高さを指定する。設定しなければ...
-widthプロパティ
--説明：画像表示時の画像の幅を指定する。指定しなければ、...
-height および widthプロパティの設定値形式とその効果
--以下で計算の元になる画像の表示サイズは、前述adjustプロ...
--設定値：数値 もしくは 数値 + "px" (例："100" "100px")
--効果：数値をpxとして画像の表示サイズとする。
--設定値："+" または "-" + 上記の設定値形式 (例："+100" "...
--効果：数値をpxとして画像の表示サイズに加算減算する。
--設定値：数値 + "%", "per", "pr" のいずれか (例："50%" "...
--効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイ...
--設定値："+" または "-" + 上記の設定値形式 (例："+50%" "...
--効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイ...
-topプロパティ
--説明：画像ボックス上端を基準とした画像の縦の表示位置を...
-leftプロパティ
--説明：画像ボックス左端を基準とした画像の横の表示位置を...
-isDraggableプロパティ
--説明：画像をドラッガブル化するかどうかを設定する。true...
-typeIntervalプロパティ
--説明：文章タイプライト時のタイプライト間隔をミリ秒で指...
-isTypeAllプロパティ
--説明：文章タイプライトの可否を設定する。trueでタイプラ...
-isAutoプロパティ
--説明：シナリオを自動進行させたい場合にtrue、そうでない...
-playIntervalプロパティ
--説明：シナリオ自動進行時において、文章タイプライト終了...
***Theaterクラスインスタンス生成時固有プロパティ [#v6edc4...
-imgプロパティ
--説明：先読みする画像アドレス配列を指定する。
-scenarioプロパティ
--説明：シナリオ関数配列を指定する。(必須)
-frameIdプロパティ
--説明：画像を表示する要素IDまたはオブジェクトを指定する...
-msgIdプロパティ
--説明：文章を表示する要素IDまたはオブジェクトを指定する...
-playIdプロパティ
--説明：クリックすることでシナリオが進行する要素のIDまた...
-resetIdプロパティ
--説明：クリック時にシナリオを最初に戻す要素IDまたはオブ...
-nameプロパティ
--説明：同一ページに複数Theaterクラスインスタンスを生成す...
-curtainプロパティ
--説明：シナリオ開始前にあらかじめ表示しておく画像のアド...
-blankプロパティ
--説明：シナリオで画像アドレス指定が「」(空文字)の際に表...
**メニュー作成 [#nf6a649e]
-※この項目はかなり複雑です。JavaScriptに詳しい方でないと...
-[[解説/初級編#m562053c]]で解説した基本メニュー以外にも、...
-このためにはmenuメソッドを使用します。引数は、第一引数の...
-menuメソッド
--機能：メニューを表示する。ウィンドウを半透明の要素で覆...
--第一引数：設定用カスタムオブジェクト。
-以下、設定用カスタムオブジェクトのプロパティです。
-outerプロパティ
--説明：メニューの表示基準要素。メニューはこの要素の中央...
-titleプロパティ
--説明：タイトルバーに表示する文字列を設定します。
-contentsプロパティ
--説明：メニュー内容のhtmlソース。要素のname属性が重要に...
-actionsプロパティ
--説明：イベント用関数カスタムオブジェクト。前述contents...
--補足：
--各イベント関数は各イベント登録要素のメンバとして実行さ...
--引数にMenuオブジェクト(詳細略)が設定されます。メニュー...
--シナリオ復帰後、最初に実行されるシナリオ関数の引数に結...
-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='D...
+ "<button name='btn' class='menu-conten...
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-con...
+ "<button name='no' class='menu-contents-cont...
actions: {
'yes': function(menu){
_theater.setResult(true);
menu.close();
},
'no': function(menu){
_theater.setResult(false);
menu.close();
}
},
title: "確認"
});
},
function(result){
this.speak("結果：" + result);
}
]
});
終了行:
#contents
----
*解説/上級編 [#uc3f791c]
**Theaterクラスインスタンス生成時、およびactメソッドの引...
-※ここでは例を省略させていただきます。(後日、サンプルファ...
-Theaterクラスのインスタンス生成時、およびactメソッドの引...
-Theaterクラスのインスタンス生成時引数は、[[解説/基礎編#a...
-actメソッドの引数も、[[解説/基礎編#tc2077e6]]で解説したi...
-以下に設定可能なプロパティを示します。前半がTheaterクラ...
***actメソッド固有プロパティ [#l9aac7f2]
-imgプロパティ、msgプロパティが該当します。
-imgプロパティはTheaterクラスインスタンス生成時にも存在し...
-imgプロパティ
--説明：表示する画像アドレスを指定する。nullまたは指定し...
-msgプロパティ
--説明：表示する文章を指定する。nullまたは指定しない場合...
***Theaterクラスインスタンス生成時、actメソッド共通プロパ...
-Theaterクラスインスタンス生成時の場合はシナリオ全体、act...
-actメソッドの指定が優先されます。
-filterプロパティ
--説明：IEのfilterによる画像切替効果を指定する。設定値に...
-outEffectプロパティ
--説明：script.aculo.usのEffectによる画像消滅効果を指定す...
-inEffectプロパティ
--説明：script.aculo.usのEffectによる画像現出効果を指定す...
-adjustプロパティ
--説明：画像表示時、画像ボックスに対する画像の伸縮調整を...
-adjustプロパティの設定値とその効果
--設定値："ADJUST" または 0 (デフォルト)
--効果：画像が画像ボックスからはみ出す場合のみ、画像ボッ...
--設定値："STATIC" または 1
--効果：画像をそのままのサイズで表示する。(画像ボックスか...
--設定値："ALL" または 2
--効果：画像を画像ボックスに合わせて伸縮して表示する。(画...
--設定値："FULL" または 3
--効果：画像を画像ボックス一杯になるよう伸縮して表示する...
--設定値："LAST" または 4
--効果：直前に指定された設定値と同じ値を設定する。
-heightプロパティ
--説明：画像表示時の画像の高さを指定する。設定しなければ...
-widthプロパティ
--説明：画像表示時の画像の幅を指定する。指定しなければ、...
-height および widthプロパティの設定値形式とその効果
--以下で計算の元になる画像の表示サイズは、前述adjustプロ...
--設定値：数値 もしくは 数値 + "px" (例："100" "100px")
--効果：数値をpxとして画像の表示サイズとする。
--設定値："+" または "-" + 上記の設定値形式 (例："+100" "...
--効果：数値をpxとして画像の表示サイズに加算減算する。
--設定値：数値 + "%", "per", "pr" のいずれか (例："50%" "...
--効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイ...
--設定値："+" または "-" + 上記の設定値形式 (例："+50%" "...
--効果：(画像の表示サイズ * 数値 / 100) を画像の表示サイ...
-topプロパティ
--説明：画像ボックス上端を基準とした画像の縦の表示位置を...
-leftプロパティ
--説明：画像ボックス左端を基準とした画像の横の表示位置を...
-isDraggableプロパティ
--説明：画像をドラッガブル化するかどうかを設定する。true...
-typeIntervalプロパティ
--説明：文章タイプライト時のタイプライト間隔をミリ秒で指...
-isTypeAllプロパティ
--説明：文章タイプライトの可否を設定する。trueでタイプラ...
-isAutoプロパティ
--説明：シナリオを自動進行させたい場合にtrue、そうでない...
-playIntervalプロパティ
--説明：シナリオ自動進行時において、文章タイプライト終了...
***Theaterクラスインスタンス生成時固有プロパティ [#v6edc4...
-imgプロパティ
--説明：先読みする画像アドレス配列を指定する。
-scenarioプロパティ
--説明：シナリオ関数配列を指定する。(必須)
-frameIdプロパティ
--説明：画像を表示する要素IDまたはオブジェクトを指定する...
-msgIdプロパティ
--説明：文章を表示する要素IDまたはオブジェクトを指定する...
-playIdプロパティ
--説明：クリックすることでシナリオが進行する要素のIDまた...
-resetIdプロパティ
--説明：クリック時にシナリオを最初に戻す要素IDまたはオブ...
-nameプロパティ
--説明：同一ページに複数Theaterクラスインスタンスを生成す...
-curtainプロパティ
--説明：シナリオ開始前にあらかじめ表示しておく画像のアド...
-blankプロパティ
--説明：シナリオで画像アドレス指定が「」(空文字)の際に表...
**メニュー作成 [#nf6a649e]
-※この項目はかなり複雑です。JavaScriptに詳しい方でないと...
-[[解説/初級編#m562053c]]で解説した基本メニュー以外にも、...
-このためにはmenuメソッドを使用します。引数は、第一引数の...
-menuメソッド
--機能：メニューを表示する。ウィンドウを半透明の要素で覆...
--第一引数：設定用カスタムオブジェクト。
-以下、設定用カスタムオブジェクトのプロパティです。
-outerプロパティ
--説明：メニューの表示基準要素。メニューはこの要素の中央...
-titleプロパティ
--説明：タイトルバーに表示する文字列を設定します。
-contentsプロパティ
--説明：メニュー内容のhtmlソース。要素のname属性が重要に...
-actionsプロパティ
--説明：イベント用関数カスタムオブジェクト。前述contents...
--補足：
--各イベント関数は各イベント登録要素のメンバとして実行さ...
--引数にMenuオブジェクト(詳細略)が設定されます。メニュー...
--シナリオ復帰後、最初に実行されるシナリオ関数の引数に結...
-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='D...
+ "<button name='btn' class='menu-conten...
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-con...
+ "<button name='no' class='menu-contents-cont...
actions: {
'yes': function(menu){
_theater.setResult(true);
menu.close();
},
'no': function(menu){
_theater.setResult(false);
menu.close();
}
},
title: "確認"
});
},
function(result){
this.speak("結果：" + result);
}
]
});
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
