管理パネル
整形リスト
Such list can be seen, for example, on the currency edit page: when a row is dragged, its position is changed.
例えば、次ようなリストがあります。
通貨編集ページ：行がドラッグされると、ポジションが変更されます。
cm-sortableはソート可能なコンテナに割り当てられます。(cm-sortable-row)
例：管理パネルの通貨リストcm-sortable-id-*/-cm-sortableコンテナの特定の行のIDを指定します。cm-sortable-id-の後の値はリクエストに引き渡され、リストの変更に使用されます。cm-sortable-row- ドラッグ可能なテーブルの行に割り当てられます。その行はcm-sortableコンテナ内にある必要があります。
ファイル・アップローダー
cm-fu-file- ファイルアップローダーから更新されたファイルブロックに割り当てられます。ファイルがない場合、ブロックは表示されません。ファイルがある場合は、表示されます。cm-fu-no-file- ファイルのアップロードが可能な要素に割り当てられます。任意のファイルアップローダーを例として下さい。
クイック・メニュー
cm-add-link- クイックボックスを使用してクイックメニューセクションにに新しいリンクを追加します。cm-add-section- クイックボックスを使用してクイックメニューに新しいセクションを追加します。cm-delete-section- クイックメニューの「選択」または「リンク」の削除ボタンに割り当てられます。cm-qm-name- 編集モードのクイックメニューアイテムに割り当てられます。クイックボックスにセクションデータを渡すために使用されます(リンク検索はこのクラスを使用して実行されます)。cm-update-item- クイックメニューアイテム編集リンクに割り当てられます。アイテムのパラメータダイアログはクリックで展開されます。
イメージ・ギャラリー
cm-image-gallery- 画像ギャラリーの初期化cm-previewer- 画像をクリックした際に、より大きな画像が開くリンクに割り当てられます。ページは遷移しません。大きな画像は、hrefパラメーターで定義されてます。
<a id="det_img_link_1553_140" rel="preview[product_images]" rev="preview[product_images]" class="cm-previewer" href="/professional/images/detailed/0/detailed_image_1386.jpg" title="img.jpg">
<img class=" " id="det_img_1553_140" src="/professional/images/thumbnails/0/120/img.jpg" width="120" alt="img" border="0" />
</a>cm-thumbnails-mini-商品詳細ページのサムネイル・ギャラリーの画像に割り当てられます。 画像がクリックされた際、サムネイルの指定とcm-cur-itemクラスを割り当てるために使用します(cm-cur-itemはcm-thumbnails-miniを持つすべてのアイテムから取り除かれます)。
コンテンツのリアルタイム編集モード
cm-cur-template- デザインモードで編集中の現在のテンプレートに割り当てられます。
また、編集中のテンプレートの変更を識別するために使用されます。デザインモードでのみ使用されます。cm-item-modified- デザインモードのテンプレートの編集に割り当てられます。このクラスが割り当てられたテンプレートの変更があった場合(エディタの左側にあるテンプレート・ツリーを使用)、既存の変更を知らせるメッセージが表示されます。cm-lang-link- 言語の変更のリンクに割り当てられます。言語はname属性で定義されます。cm-select-list- 言語選択のドロップダウンリストに割り当てられます。cm-lang-link要素のコンテナとして使用されます。
例：翻訳モードで翻訳ダイアログが開かれている言語リスト
数量入力
cm-decrease-cm-value-changeで使用されます。入力値を減らすリンクに割り当てられます。入力値を１つずつ減らします。整数でない値は0に置き換えられます。
例：ショップフロントの数量フィールド付近の上/下の矢印
cm-increase-cm-value-changerコンテナで使用されるます。入力値を増すリンクに割り当てられます。入力値を1つずつ増やします。整数でない数字は0に置き換えられます。cm-value-changer- 入力とcm-increase/cm-decreaseボタンの親コンテナに割り当てられます。
例：ショップフロントの商品数量フィールド
ノードの複製
cm-first-sibling- このクラスを持つ行は削除できませんので、削除アイコンは無効になっています。（複製元）cm-image-field- 要素の複製で画像数を正確に複製するための正規表現を定義します。
例：商品オプションを複製。ぞれぞれのオプションに指定された画像に対して、このクラスは画像に関連するフィールドに割り当てられます。
ラッパー
cm-hidden-wrapper- コンテンツがない場合に非表示になるラッパーに割り当てられます。すなわちブロックコンテンツの中身が空の場合、ラッパーは示されません。
ページネーション
cm-history- リンクに割り当てられます。このマイクロフォーマットを持つリンクがクリックされた際、現在のページがブラウザの閲覧履歴に保存されます。 jQueryの「history」プラグインが使用されています。cm-back-link- ブラウザの履歴を利用して以前のページに戻るページナビゲーションの描画結果のコンテナ。AJAXリクエストの後にスクロールするために使用されます。cm-pagination-container- ページナビゲーションの描画された結果のコンテナ。AJAXリクエストの後にスクロールするために使用されます。
AJAX
cm-ajax- このマイクロフォーマットが設定されたリンクがクリックされた際に、AJAXリクエストが実行されます。cm-comet- コメットモデルを使用してリフレッシュされたフォームに割り当てられます。- 例：データベースのバックアップフォーム
cm-ajax-cache- AJAXリクエストをキャッシュでき、cm-ajaxと共に使用されます。cm-ajax-force- 2度目のAJAXレスポンスからJavascriptのコードを実行出来ます。cm-ajaxと共に使用されます。cm-ajax-close-notification- used for the notifications that do not disappear on page change or on timer. When the close button is clicked, a close notification AJAX-request is sent.
通知が行われ、それが閉じられるタイマーまたはボタンに適用されます。閉じるボタンがクリックされた際、通知を閉じるためのAJAXリクエストを送信します。
cm-ajax-full-render-cm-ajaxと一緒にのみ使用出来ます。全体ページをリロードさせます。cm-no-ajax- このクラスがフォームの送信ボタンに割り当てられている場合にボタンがクリックされると、cm-ajaxがフォームに割り当てられていた場合でも、通常の方法でフォームが送信されます。（AJAXを強制的に利用しない）cm-ajax-content-input- 例えば、検索リクエストに自動補完を可能にするためのピッカーで使用されま
自動補完の為のAJAXリクエストは入力が止まった後、500ミリ秒遅れで送信します。 受けとった検索候補はrev属性に記載されたコンテナにロードされます。自動補完のパターンは値のパラメータから取得されます。
例：出品者を選択する際に、マーケットプレイスのピッカーを表示する。
cm-ajax-content-more- （大きなセレクトボックス）要素が表示されるようになった時、追加のコンテンツがロードされます。
例：選択のオプションの数が多い場合、出品者の選択はマーケットプレイスのピッカーを介します。
AJAXでアップロードされた商品コンテンツ
cm-reload- オプション変更で変更されたブロックに割り当てられます。
その後、このクラスをもつ全ての要素が更新されます。例は、
{* Price *}
{capture name="price_`$obj_id`"}
<span class="cm-reload-{$obj_prefix}{$obj_id} price-update"
id="price_update_{$obj_prefix}{$obj_id}">
...オプションが変更され更新されると、価格は随時更新されます。
カスタマイズ・モード
cm-template-box- カスタマイズモードでのレンプレートとして存在するコンテナに割り当てられます。テンプレートを管理し、テンプレートの入れ子構造のレベルを決めるために使用されます。cm-template-icon- カスタマイズモードがオンになっている時に、テンプレートの編集アイコンに割り当てられます。
マウスホバーでテンプレートの適応範囲を強調します。 (cm-template-overを使用)。 マウスのホバーが外れると、ハイライトが無効になります。cm-template-over- 選択されたテンプレートの使用により表示されるコンテナに割り当てられます(カーソルがそれぞれcm-template-iconアイコンの上にある)。 CS-Cartがカスタマイズモードの時、選択されたテンプレートの適応範囲にハイライトが使用されます。