フォローする

UI エディターがGUI操作時に生成するJavaScriptコードについて

このページについて

このページでは、UI エディターでGUI操作を行った際に自動的に生成される JavaScript コードについて説明します。

自動評価 (Auto Eval) について

エディターのコンテキストメニューから行った動作は、JavaScriptコードに変換され自動で JavaScriptタブ 内に書き込まれます
UI エディター が生成する jQuery コードの各行の先頭には以下の様なコメントが付きます。

/*!kz:autoeval*/

このコメントが付く行の jQuery コードは、該当の要素が現れると即時に評価されます。

これによって、描画の遅延を防ぐことができます。

該当ページの読み込み完了 (DOMContentLoaded) 時まで評価されずに残ったコードは、その時点でまとめて評価されます。

※ 自動評価対象の要素が存在していないと、それ以降の JavaScriptタブ に記述された編集内容は実行を中断されます。 複数ページを対象にデザイン作成する場合はご注意ください。

jQuery メソッド

  • エディター内で利用できる jQuery のバージョンは 1.10.2 です。
  • jQuery のメソッドに関してはこちらもご参照ください。

HTML を編集

以下のメソッドを用いて、設定された HTML の状態に、最短のコードで変更を加えます。

スタイルを編集

attr メソッドで style 属性を設定します。

属性を編集

以下のメソッドを用いて、設定した属性に変更します。

背景画像を設定

設定した画像の URL を用いて css({ "background-image": "画像の URL" }) の様な JavaScript コードを追加します。

jQuery コードの追加

任意の jQuery コードを追加できます。jQuery リファレンス を参照して下さい。

要素を削除

ドラッグして移動

以下の様なコードを用いて、親要素からの相対的な座標を設定します。

$("#element").css({"position":"relative","left":"150px","top":"69px"});

画像を挿入

append(content) メソッドを用いて、<img> タグを挿入します。

HTML を挿入

※注意点
エディターの仕様上 「HTMLを挿入」 から要素を追加した場合、「;(セミコロン)」をつけるとSyntax errorになる場合があります。
対処法は二つの方法があります。

ex. .after(“テスト”) でSyntax errorが出る

  1. 「;(セミコロン)」をエスケープする
    .after("<a href=\"javascript:void(0)\;\">テスト</a>")

  2. 「;(セミコロン)」を削除する
    .after("<a href=\"javascript:void(0)\">テスト</a>")

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。