マニュアル キャンセル

カスタムコンポーネントのコードスニペット

 

この記事では、カスタムコンポーネントのコードスニペットについて説明します。

カスタムコンポーネントとのやり取りを容易にするために、コードスニペットを追加することができます。Animate での 2 つの例を見てみましょう。新しいコードスニペットは HTML5 Canvas/コンポーネントから追加します。

  1. ボタンにクリックハンドラーを追加するコードスニペット

    // フレームスクリプトで使用されている可能性がある複数のハンドラーを無効にする
    if(!this.instance_name_here_click_cbk) {
    function instance_name_here_click(evt) {
    // カスタムコードを開始
    console.log("Button clicked");
    // カスタムコードを終了
    }
    // コンポーネントインスタンスの ID でフィルタリングして、
    // 親にイベントハンドラーをアタッチ
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
    this.instance_name_here_click_cbk = true;
    }
    // フレームスクリプトで使用されている可能性がある複数のハンドラーを無効にする if(!this.instance_name_here_click_cbk) { function instance_name_here_click(evt) { // カスタムコードを開始 console.log("Button clicked"); // カスタムコードを終了 } // コンポーネントインスタンスの ID でフィルタリングして、 // 親にイベントハンドラーをアタッチ $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this)); this.instance_name_here_click_cbk = true; }
    // フレームスクリプトで使用されている可能性がある複数のハンドラーを無効にする
    if(!this.instance_name_here_click_cbk) {
     function instance_name_here_click(evt) {
      // カスタムコードを開始
      console.log("Button clicked");
      // カスタムコードを終了
     }
    
     // コンポーネントインスタンスの ID でフィルタリングして、
     // 親にイベントハンドラーをアタッチ
    $("#dom_overlay_container").on("click", "#instance_name_here", instance_name_here_click.bind(this));
     this.instance_name_here_click_cbk = true;
    }
    

    ハンドラーは、コンポーネントインスタンスのフィルターセットと共に親(dom_overlay_container)に割り当てることに注意してください。これは、ハンドラーを割り当てようとしたときにコンポーネントインスタンスが存在しない可能性があるためです。このようにしておくと、イベントハンドラーが適切に起動します。

    カスタムコンポーネントでも、同様にしてイベントハンドラーを追加できます。

  2. 任意の入力コントロールから値を取得するコードスニペット

    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
    console.log($("#instance_name_here").val());
  3. コンポーネントインスタンスが DOM に追加されたときに使用するコードスニペット

    // コンポーネントランタイムで発生する、アタッチされたイベントをリッスン
    $("#dom_overlay_container").on("attached", function(evt, param) {
    // インスタンスの ID を確認
    if(param && param.id == 'movieClip_1') {
    $("#movieClip_1").text("My Button");
    }
    });
    // コンポーネントランタイムで発生する、アタッチされたイベントをリッスン $("#dom_overlay_container").on("attached", function(evt, param) { // インスタンスの ID を確認 if(param && param.id == 'movieClip_1') { $("#movieClip_1").text("My Button"); } });
    // コンポーネントランタイムで発生する、アタッチされたイベントをリッスン
    
    $("#dom_overlay_container").on("attached", function(evt, param) {           
    // インスタンスの ID を確認 
    if(param && param.id == 'movieClip_1') {                           
    
    $("#movieClip_1").text("My Button");                          
    }
    });
    

ヘルプをすばやく簡単に入手

新規ユーザーの場合