概要
このページでは、UIエディターにてコンテクストメニューを使った操作を行った際に、自動的に生成される、JavaScript コードについて記載します。
コンテクストメニューの仕様
コンテクストメニューとは、エディター内にて要素をクリックした時に出現する、要素を簡単に移動や削除することができるメニューのことです。
どんな操作もコードに変換される
コンテクストメニューを使ってデザイン案を作成した場合、「コードは記述していない」と思われがちですが、コンテクストメニューで行った操作は、全てJavaScriptのコードに変換され、そのコードが実行されることで、デザイン案の反映となります。
例えば、下記の図は、同じ箇所に対してコンテクストメニューの「スタイルを編集」を何度も行なった際のJavaScriptコードです。
このように、全ての変更がJavaScriptコードに変換されるため、同じ箇所に対して何度も操作を行なった場合、同じように何度も同じ処理を行うJavaScriptコードが生成されてしまいます。
今回の例の場合、最後の1行だけが必要なので、1~3行目は削除します。
ユーザーがページに訪れてデザイン案が表示される際、同じ箇所が何度も変化するように見えてしまう可能性があるので、コンテクストメニューを使ってデザイン案を作成した場合でも、JavaScriptコードは必ず確認し、不要なコードは削除するようにしましょう。
自動評価 (Auto Eval) について
コンテクストメニューから要素の操作を行なった場合、変換されたJavaScriptコードの各行の先頭には以下の様なコメントが付きます。
/*!kz:autoeval*/
このコメントが付く行のコードは、該当の要素が現れると即時に評価されます。
これによって、描画の遅延を防ぐことができます。
該当ページの読み込み完了 (DOMContentLoaded) 時まで評価されずに残ったコードは、その時点でまとめて評価されます。
※ 自動評価対象の要素が存在していないと、それ以降の JavaScriptタブ に記述された「/*!kz:autoeval*/」の付かない編集内容は実行を中断されます。 複数ページを対象にデザイン作成する場合はご注意ください。
JavaScriptタブ内に自動生成される「:Eq(0)」の意味
GUIエディターで編集を行うと、エディター下部のJavaScriptタブにソースコードが自動生成されます。
その時に「div:eq(0)」や「p:eq(3)」のように記述されることがあります。
この「:eq(数字)」というのは、左の要素がソースコード上の何番目にあるかを指定するものになります。
Kaizen独自の仕様ではありません。より詳細に学習される方は、 こちら をご参照ください。(jQuery公式、外部サイトです。Kaizenで利用可能なjQueryのバージョンとは異なるバージョンの説明がされている場合があります。ご注意ください。)
数字は0が1番目となります。
下記に例題を記載します。
「div:eq(0)」の場合
div要素の1番目を指定しております。
「p:eq(2)」の場合
p要素の3番目を指定しております。
内包されている要素も数えます。
「div:eq(3)」の場合
内包されているdiv要素も含めた4番目のdiv要素を指定しております。
内包されてる要素を数えない記述もあります。
「body > div:eq(3)」の場合
「>」を記述することで直属の要素を指定できるので、内包されているdiv要素は除外した4番目のdiv要素を指定しております。
jQuery メソッド
エディター内で利用できる jQuery のバージョンは 1.10.2
です。
jQuery のメソッドに関してはこちらもご参照ください。(jQuery公式、外部サイトです。Kaizenで利用可能なjQueryのバージョンとは異なるバージョンの説明がされている場合があります。ご注意ください。)
コンテクストメニューで行える操作の詳細
HTML を編集
以下のメソッドを用いて、設定された HTML の状態に、最短のコードで変更を加えます。
スタイルを編集
attr
メソッドで style
属性を設定します。
属性を編集
以下のメソッドを用いて、設定した属性に変更します。
- attr(properties): 属性の追加・値の変更
- removeAttr(name): 属性の削除
背景画像を設定
設定した画像の URL を用いて css({ "background-image": "画像の URL" })
の様な JavaScript コードを追加します。
jQuery コードの追加
任意の jQuery コードを追加できます。jQuery公式 等を参照して下さい。
要素を削除
以下のメソッドを用いて、要素の削除を行います。
ドラッグして移動
以下の様なコードを用いて、親要素からの相対的な座標を設定します。
$("#element").css({"position":"relative","left":"150px","top":"69px"});
画像を挿入
append(content) メソッドを用いて、<img>
タグを挿入します。
HTML を挿入
- before(content): 要素の前に HTML を挿入する。
- insertBefore(content): 要素を指定した他の要素の前に挿入する。
- after(content): 要素の後に HTML を追加する。
- insertAfter(content): 要素を指定した他の要素の後に挿入する。
- prepend(content): HTML を要素の先頭に挿入する。
- append(content): HTML を要素の末尾に追加する。
- wrap(html): HTML で要素を囲う。
- wrapInner(html): 子要素を HTML で要素を囲う。
- clone(): 要素のクローンを作成し、そのクローンを選択状態にする。
※注意点
エディターの仕様上 「HTMLを挿入」 から要素を追加した場合、「;(セミコロン)」をつけるとSyntax errorになる場合があります。
対処法は二つの方法があります。
ex. .after(“テスト”) でSyntax errorが出る
-
「;(セミコロン)」をエスケープする
.after("<a href=\"javascript:void(0)\;\">テスト</a>")
-
「;(セミコロン)」を削除する
.after("<a href=\"javascript:void(0)\">テスト</a>")
0 コメント