Collapseは和訳すると「崩壊」とか「破綻」とかそういう物騒な意味になります。
Velo by Wixの場合、挙動として対象のエレメントをページから除去します。
Collapsed | VELO
Indicates if the element is collapsed or expanded. If collapsed is true, the element is not displayed on the page under any circumstances. However, the collapse...
collapse関数の使い方
![collapse1](https://sunagitsune.com/wp-content/uploads/2021/01/collapse1.jpg)
collapse関数を使うと、エレメントのcollapsedプロパティをTrueにすることでページから除去できます。まずはボタンを作り、
![collapse2](https://sunagitsune.com/wp-content/uploads/2021/01/collapse2.jpg)
onClick()→+からイベントを作成します。
![collapse3](https://sunagitsune.com/wp-content/uploads/2021/01/collapse3.jpg)
$w(“#ID”).collapse();のように記述して、ボタンをクリックすると対象IDのエレメントに動作するようにしたら準備OKです。
![collapse4](https://sunagitsune.com/wp-content/uploads/2021/01/collapse4.jpg)
プレビューでボタンを押せば、
![collapse5](https://sunagitsune.com/wp-content/uploads/2021/01/collapse5.jpg)
対象エレメントがなくなり、間が詰められます。
![collapse6](https://sunagitsune.com/wp-content/uploads/2021/01/collapse6.jpg)
ちなみにhide関数の場合は対象は見えなくなってるだけなので、間は詰められません。
expand関数で元に戻す
![collapse7](https://sunagitsune.com/wp-content/uploads/2021/01/collapse7.jpg)
expand関数を使うと、collapsedをfalseにして元に戻すことが可能です。
ここではIf文にcollapseをかけ、trueかfalseかを判定し、その結果をそのままIf文の分岐に使用しています(collapseプロパティは読み取り専用で、値はbooleanです)。
trueならfalseにするためにcollapse関数を、falseならtrueにするためにexpand関数を使う、という処理になります。
ここではIf文にcollapseをかけ、trueかfalseかを判定し、その結果をそのままIf文の分岐に使用しています(collapseプロパティは読み取り専用で、値はbooleanです)。
trueならfalseにするためにcollapse関数を、falseならtrueにするためにexpand関数を使う、という処理になります。
//Velo by Wix
export function buttonID_click(event) {
//collapsedをfalseにする
if( $w("#ID").collapsed ) {
$w("#ID").expand();
}
//collapsedをtrueにする
else {
$w("#ID").collapse();
}
}
![collapse8](https://sunagitsune.com/wp-content/uploads/2021/01/collapse8.jpg)
これでボタンを押すたびに要素を消したり、
![collapse9](https://sunagitsune.com/wp-content/uploads/2021/01/collapse9.jpg)
再度表示したりすることが可能となります。
![](https://sunagitsune.com/wp-content/uploads/2021/02/website-1624028_1280-160x90.png)
WixおよびVelo by Wixの使い方・関数・プロパティなどまとめ
Wix関連のまとめです。①公式のリファレンスが充実してるのと②Wix自体がまだ発展途上(バグも多い)のと③そこまでガッツリ使うわけではないのと④AdBlock入れてるとまともに動かない ので記事の充実圧力は低めですが、まあぼちぼち暇を見て増...
コメント