主に表示キーが持つキー属性のうち、代表的なキー属性を紹介します。
その他のキー属性については、REFERENCE「キー属性一覧」を参照してください
%style 表示キーに設定されているスタイルキーラベルを表す属性です。
属性値を変更することで、表示キーのスタイルを変更することが可能です。
サンプル１では、ボタンクリックで画面上部の枠のスタイルを事前に定義した３種類のスタイルに変更しています。
また、サンプル２では、ボタンクリック時にスタイルの内容のみ変更しています。
※スタイルの内容を変更し、キーラベル(@s1等)に変更がない場合、一度スタイルを破棄し、再設定する必要があります。
サンプル１
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
Kf(_Attribute_style){ Pe{ /*キーステーションが最初に実行するキーセット*/ N(_main); } } K(_main){ Se{ @s1{~back{~color="#ffA3FF70";}} @s2{~back{~grad="vcenter";~gcolor="#ff8A95FF";}} @s3{~back{~color="#ffCC6C45";}~border{~shape="circle";}} } U{ R(#area) Rb0.3("スタイル変更"){ Bs{ if(#area%style=="@s1"){ /* img表示エリアのスタイル設定 */ #area%style="@s2"; }else if(#area%style=="@s2"){ /* img表示エリアのスタイル設定 */ #area%style="@s3"; }else{ /* img表示エリアのスタイル設定 */ #area%style="@s1"; } } } } } |
実行結果
サンプル２
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
Kf(_Attribute_style2){ Pe{ /*キーステーションが最初に実行するキーセット*/ N(_main); } } K(_main){ Se{ @s1{~back{~color="#ffA3FF70";}} } U{ R(#area) R0.3(){ Cb("背景色変更"){ Bs{ /* 表示エリアのスタイル破棄 */ #area%style=""; /* スタイルの内容変更 */ if(@s1~back~color?=="#ffA3FF70"){ @s1~back~color?="#ff8A95FF"; }else if(@s1~back~color?=="#ff8A95FF"){ @s1~back~color?="#ffCC6C45"; }else{ @s1~back~color?="#ffA3FF70"; } /* 表示エリアのスタイル再設定 */ #area%style="@s1"; } } Cb("形状変更"){ Bs{ /* 表示エリアのスタイル破棄 */ #area%style=""; /* スタイルの内容変更 */ if(@s1~border==null||@s1~border~shape==null||@s1~border~shape?==""){ @s1%addC(tree("S(~border)")); @s1~border%addC(tree("S(~shape)")); @s1~border~shape?="circle"; }else{ @s1~border%delS(0); } /* 表示エリアのスタイル再設定 */ #area%style="@s1"; } } } } } |
実行結果
