Velo by Wixのhide関数、show関数、hiddenプロパティについて

little-boy IT

Wixのhiddenプロパティをhide関数、show関数でOn/Offすることで、エレメントの表示/非表示を切り替えることが可能です。

Advertisements

テキストの非表示(hide)

hide1
まずボタン、イベントを作っていきます。テキストを非表示にする場合はhiddenプロパティをTrueにします。
hiddenプロパティは読み取り専用で、hidden = True;では動作しません。
hideメソッドを使い、$w(“#ID”).hide();のようにすることで、hiddenプロパティをTrueにできます。
hide2
ボタンを押すと、
hide3
テキストが消えます。

collapsedプロパティをTrueにした時とはちがい、間が詰められないのがポイントです。

テキストの表示(show)

show
Showメソッドを使うと、hiddenプロパティをFalseにする=要素を表示することができます。
ここではIf文を使い、hiddenプロパティがTrueの場合はshowを、Falseの場合はhideを使って要素の表示/非表示を押すたびに切り替えます。
//Velo by Wix
	if( $w("#ID").hidden ) {//もしプロパティがhidden = trueなら
  		$w("#ID").show();//hidden = falseに変更
	}
	else {//そうでなければ
  		$w("#ID").hide();//hidden = trueに変更
	}
}
show3
コードを入力してプレビューで確認すると、ボタンを押すたびに、
show4
対象のエレメントが消えたり現れたりすることが確認できます。

show/hide関数に効果をつける

show5
関数の後ろの()内に効果を書き加えることで、アニメーションを加えることができます。
先ほどのコードをshow(“arc”)hide(“arc”)に変更した場合、
arc
こういった動きをするようになります。
fade
同様にarcをfadeに書き換えた場合、
flip
以下flipの場合、
float
float
fold
fold
puff
puff
roll
roll
slide
slide
spin
spin
turn
turn
zoom
zoom、となります。
他にbounce、glideというのがあるはずですが、うまくエフェクト動かなかったのでパスしてます。

上の各効果はさらにパラメータを編集することも可能です(公式ページ参照)。

WixおよびVelo by Wixの使い方・関数・プロパティなどまとめ
Wix関連のまとめです。①公式のリファレンスが充実してるのと②Wix自体がまだ発展途上(バグも多い)のと③そこまでガッツリ使うわけではないのと④AdBlock入れてるとまともに動かない ので記事の充実圧力は低めですが、まあぼちぼち暇を見て増...

コメント