▶ 実 行
▶ 実行
クリア
パネル部品のサンプル
by TKI
!「貯蔵庫:panel.nako3」を取り込む 「style」のDOM部品作成して、それに『#runbox {width: 100%; box-sizing: border-box}』をHTML設定 「●パネル内配置」のラベル作成 それ@「文字サイズ」は2em 改行作成 『[300,200]のパネル作成 それ.ボーダーは「1px solid」 それに部品作成先一時変更 「テスト」のボタン作成 それを[10,10,100,100]にパネル内配置 //[x,y,w,h] 「テスト2」のボタン作成 それを[「30%」,「40%」,「60%」,「50%」]にパネル内配置 //[x,y,w,h] 部品作成先戻す』のテキストエリア作成 それ.幅は40em [300,200]のパネル作成 それ.ボーダーは「1px solid」 それに部品作成先一時変更 「テスト」のボタン作成 それを[10,10,100,100]にパネル内配置 //[x,y,w,h] 「テスト2」のボタン作成 それを[「30%」,「40%」,「60%」,「50%」]にパネル内配置 //[x,y,w,h] 部品作成先戻す 改行作成 「●直前部品」のラベル作成 それ@「文字サイズ」は2em 改行作成 『「こんにちは」のエディタ作成 「発言」のボタン作成 それのクリックした時には: 対象の直前部品からテキスト取得 //対象はイベントが発生した部品(ボタン) それを言う』のテキストエリア作成 それ.幅は40em 改行作成 「こんにちは」のエディタ作成 「発言」のボタン作成 それのクリックした時には: 対象の直前部品からテキスト取得 //対象はイベントが発生した部品(ボタン) それを言う 改行作成 『[300,200]のパネル作成 それ.ボーダーは「1px solid」 それに部品作成先一時変更 「テスト」のボタン作成 それを[200,100]へパネル内配置 「テスト2」のボタン作成 直前部品の下側へパネル内配置 部品作成先戻す』のテキストエリア作成 それ.幅は40em [300,200]のパネル作成 それ.ボーダーは「1px solid」 それに部品作成先一時変更 「テスト」のボタン作成 それを[200,100]へパネル内配置 「テスト2」のボタン作成 直前部品の下側へパネル内配置 部品作成先戻す 改行作成 「●レイアウト」のラベル作成 それ@「文字サイズ」は2em 改行作成 『[300,200]のパネル作成 それに部品作成先一時変更 「A」のボタン作成して[0,0,「30%」,「20%」]にパネル内配置 「B」のボタン作成して直前部品の右側にパネル内配置 それを横長レイアウト それ.高さは「20%」 「C」のボタン作成して2つ前部品の下側にパネル内配置 それを縦長レイアウト それ.幅は「30%」 「D」のボタン作成して直前部品の右側にパネル内配置 それを全体レイアウト 部品作成先戻す』のテキストエリア作成 それ.幅は40em [300,200]のパネル作成 それに部品作成先一時変更 「A」のボタン作成して[0,0,「30%」,「20%」]にパネル内配置 「B」のボタン作成して直前部品の右側にパネル内配置 それを横長レイアウト それ.高さは「20%」 「C」のボタン作成して2つ前部品の下側にパネル内配置 それを縦長レイアウト それ.幅は「30%」 「D」のボタン作成して直前部品の右側にパネル内配置 それを全体レイアウト 部品作成先戻す 改行作成 「●移行なんとか」のラベル作成 それ@「文字サイズ」は2em 改行作成 『[300,200]のパネル作成 それ@「ボーダー」は「1px solid」 それに部品作成先一時変更 「クリックすると移動します」のボタン作成 それを[5,0]へパネル内配置 それを0.4に移行ディレイ変更 //移動するまでの時間(秒) それを1.0に移行時間変更 //移動にかかる時間(秒) transition-duration それを1に移行タイミング関数変更 //0~4で指定 transition-timing-function //0~4は ["linear","ease","ease-in","ease-out","ease-in-out"]速度の変化 それのクリック時には: 対象を[5,160-(対象@「上」を整数変換)]へパネル内配置 部品作成先戻す』のテキストエリア作成 それ.幅は40em [300,200]のパネル作成 それ@「ボーダー」は「1px solid」 それに部品作成先一時変更 「クリックすると移動します」のボタン作成 それを[5,0]へパネル内配置 それを0.4に移行ディレイ変更 //移動するまでの時間(秒) それを1.0に移行時間変更 //移動にかかる時間(秒) transition-duration それを1に移行タイミング関数変更 //0~4で指定 transition-timing-function //0~4は ["linear","ease","ease-in","ease-out","ease-in-out"]速度の変化 それのクリック時には: 対象を[5,160-(対象@「上」を整数変換)]へパネル内配置 部品作成先戻す
21d4d0a854f971321e0914f9588942cb
3149