パネル部品のサンプル 📖

パネル部品他のプラグインのサンプル集

プログラム: (→大)
!「貯蔵庫: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-(対象＠「上」を整数変換)]へパネル内配置 部品作成先戻す