その他の要素

その他の要素

リンク

リンクをクリックした際に、AJAXリクエストを実行できるマイクロフォーマットがあります。

使用方法：

<a class="cm-ajax" href="http://cs-cart.com" data-ca-target-id="pagination_contents">Ajax link</a>

• cm-ajax - AJAXリクエストはリンクをクリックした際に実行されます。
• cm-comet - フォームはCometモデル（wikipedia ）を利用してリフレッシュされます。
• cm-delete-row- このクラスを持つ要素がクリックされた場合、最も近い親要素「tr」が削除されます。 テーブルで行を削除する時に使用されます。
• cm-row-item - このクラスはテーブルの行に割り当てられます。cs-delete-rowと共にコンテナの識別に使用します。
• cm-ajax-cache - AJAXリクエストをキャッシュする事ができ、cm-ajaxと共に使用されます。
• cm-ajax-force - 二度目のajaxレスポンスからjavascirptコードを実行できます。cm-ajaxと共に使用されます。

既知のIDの要素をクリックする必要がある場合、cm-external-clickクラスのリンクを使用できます。クリックされるべき要素のIDはリンクのdata_ca_scrollパラメータに指定されています。

<a class="cm-external-click" data_ca_scroll="external_elm">Push me</a>

• cm-external-focus - このクラスを持っている要素がクリックされた際、外部の要素にフォーカスが移動します。移動する外部の要素のIDはREVパラメータで定義されています。
• cm-smart-position - コンテナを配置するために使用します。（例えば、管理パネルの通貨リスト）

通知

• cm-auto-hide - このクラスによって通知は自動的に消滅します。 タイムアウトまでの時間は基本設定 -> 表示設定で設定することができます。
• cm-notification-close - このクラスは、通知を「閉じる」ボタンに割り当てられています。通知自体をクリックすると、フォームから削除されるか通知を削除するAJAXリクエストが送信されます。　
• cm-notification-container - このクラスは、通知コンテナに割り当てられます。

その他のエンティティ

• cm-confirm - このクラスを持つリンクがクリックされた際にアクションの確認が表示されます。
• cm-noscript - このクラスを持つ要素はJavascriptサポートがブラウザで有効になってない場合のみ表示されます。
• cm-focus - ページがロードされた際、このクラスを持つ要素にフォーカスが移ります。
  例：ログイン入力フォームがロードされた際、フォーカスはログインフィールドにあります。
• cm-opacity - テーブルから削除された行に割り当てられ、その行は半透明になります。
  例: 商品画像を複製し、その“行” を削除します。ページがリロードされ、削除が実行されるまでその“行”が半透明のままです。
• cm-uploaded-image - アップロードされた画像のdiv要素に割り当てられています。アップロードされた画像のカウントに使用します。
• cm-wysiwyg - textarea要素に割り当てられています。その要素にwysiwygエディタを提供します。
• cm-row-status-[current status code] - テーブルの行に割り当てられます（要素）
  [current status code]は、アイテムの現在のステータスコードを示します。(e. 「a」は有効、「d」は無効 …)
• cm-autocomplete-off - フィールドから自動入力の機能を削除します。パスワード入力フィールドで使用されています。

ポップアップ

マイクロフォーマットのポップアップ・ボックスが使用出来ます。エリア外をクリックするとそのポップアップを閉じることができます。

使用方法:

<div class="cm-popup-box">
...
</div>

ポップアップしたエリア内の要素をクリックで隠すためには、それらの要素にcm-popup-switchクラスを定義する必要があります。

フォーマット:

<div class="cm-popup-box">
<strong class="hand cm-popup-switch">Close</strong>
...
</div>

• cm-select-option - 管理パネル内のbootstrapのポップアップに使用されます。
• cm-popover - bootstrapのポップオーバーの初期化を行います。 http://getbootstrap.com/2.3.2/javascript.html#popovers

要素の組み合わせ（cm-combination）

cm-combination は表示/非表示させたいコンテナに使用し、その状態を示しています。

これは例えば、管理パネル内の商品やカテゴリーに対する「高度な検索」に適用されます。
‘state’によって、コンテナのモード（表示/非表示の状態）に応じて違う画像の表示を意味します。

<img src="" id="on_cat" class="cm-combination" />
<img src="" id="off_cat" class="cm-combination" />
<a href="#" id="sw_cat" class="cm-combination">
...
<div id="cat">
</div>

追加される要素は、異なったプレフィックスを持ったIDを使用します。プレフィックスには3タイプあります。

• on_ - クリックされた際に、コンテナを開く要素に適用(通常はプラス・’アイコン).
• off_ - クリックされた際に、コンテナーを閉じる要素に適用(通常はマイナス・アイコン).
• sw_- クリックでコンテナの内容を切り替える要素に適用 (通常はリンク・アイコン)

• cm-uncheck - cm-combinationと共に使用し、cm-combinationの適用されたidで定義されたチェックボックスの状態を切り替えます。
• cm-switch-availability - IDがsw_elem*のcm-switch-availabilityと関連付けられた入力要素（checkboxやradio、text）の状態を切り替えます。

有効になっているときに、クリックされた要素(cm-switch-availabilityの適用されいる) を作成するにはcm-switch-inverseを使用してアイテムを切り替えます。

checkboxやradioブロックを表示/非表示にするには、cm-switch-visibilityを使用します。checkboxまたはradio以外のブロックに使用される場合、cm-switchedは条件を定義します。

フォーマット例:

<input type="checkbox" id="sw_company_redirect" checked="checked" class="cm-switch-availability cm-switch-inverse cm-switch-visibility" />

• cm-select-with-input-key - テキストエリアでセレクタを接続します。セレクタの値が変更された際、それをテキストエリアに移動させ、そのエリアを無効にします。

ロケーションで使用する場合、dispatchを選択します。

要素の組み合わせ（cm-combinations）

要素の組み合わせ（例：ツリー表示の表示/非表示）にこのマイクロフォーマットcm-combinationsが使用されます。

<img src="" id="on_cat" class="cm-combinations" />
<img src="" id="off_cat" class="cm-combinations hidden" />

ここで使用されるIDはこれらの２つの要素に対してのみです。

また、組み合せをグループ化することが出来ます。（同じページに複数のツリーがある場合など）その際はsuffixを追加することが必要です。

<img src="" id="on_abc" class="cm-combinations-a" />
<img src="" id="off_abc" class="cm-combinations-a hidden" />
...
<img src="" id="on_cat" class="cm-combination-a" />
<img src="" id="off_cat" class="cm-combination-a" />
<a href="#" id="sw_cat" class="cm-combination-a">
...
<div id="cat">
</div>

この例の場合、上のイメージをクリックした際、グループAの組み合せのみが表示/非表示になります。

タブ

• cm-js - このクラスを持つdiv要素は内部にタブのリストを持つSmartyが生成されます：cm-jsクラスを持つ li要素と特定のID（例：description）

タブがクリックされた際、content + タブのID_というIDを持つdiv要素が検索されて表示されます。コンテナ内の他のdiv要素は非表示になります。

• cm-j-tabs - cm-jsタブのコンテナに使用されます。タブコンテナの検索や初期化に使用されます。
• cm-tabs-content - 非表示にできる保存ボタンのあるタブに割り当てられます。(cm-hide-save-button)
• cm-toggle-button - このクラスは、div要素に割り当てられます。cm-hide-save-buttonクラスを持つdivのタブが選択された際、divに配置されたボタンは非表示になります。

保存の状態

• cm-save-state - コンテナの保存状態を有効にするには、このマイクロフォーマットがコンテナをオープン/クローズする全ての要素に割り当てられる必要があります。 このとき、状態の変化に、この要素のIDと接続されるクッキーが作成されます。 デフォルト状態はコンテナは 非表示 です。デフォルトの状態がコンテナを【表示】するべき場合は、マクロフォーマットはa です。 クッキーの確認と要素を隠す処理はテンプレートに書かれている必要があります。
• cm-save-fields - このクラスを持つ表示されている入力コンテナは配列にシリアライズされAJAXリクエストに渡されます．

追加のマイクロフォーマット

• cm-skip-avail-switch - このマイクロフォーマットは、switchAvailabilityに使用します。(特定の全ての要素のオン/オフを切り替えます)。要素がこのクラスを持っている場合、後ろには切り替わりません。
• cm-skip-check-items - assigned to a form to allow state change check skipping for its children elements. 子要素のチェックをスキップする場合に、このマイクロフォーマットをフォームに割り当てます。
• cm-track - タブコンテナを割り当てます。最後に有効になったタブが送信された後に開かれます。
• cm-save-and-close - return_to_listを持つ非表示のフィールドを追加します。「保存して閉じる」ボタンに使用します。
• cm-promo-popup - フリーモードのCS-Cartでフルバージョンの機能を利用しようとした際に警告ポップアップを開きます。
• cm-update-for-all-icon - ストアフロントの共有を可能にします。フィールドは編集できるように作られています。
• cm-sticky-scroll - 使用されるブロックを固定します。ページの上端からこのクラスが付いたブロックまでスクロールされた場合、ブロックの位置が固定されます。 data-ce-paddingは、固定されたフィールドが画面の上端で特定されるまでの距離となります。

例:

<div class="subnav cm-sticky-scroll" data-ce-top="100" data-ce-padding="20" >

ブラウザのウィンドウが100pxスクロールされた際、パネルは上端から20pxの距離で固定されます。

• cm-range-slider - 範囲選択スライダーの初期化を行います。 (jQuery UI Slider)
• m-colorpicker - カラーピッカー (http://bgrins.github.io/spectrum/)の初期化を行います。

ロケーション

• cm-location-billing
• cm-location-search
• cm-location-shipping

cm-location-を持つ全てのクラスの配列は都道府県・州（state/province）を定義するために使用されます。

cm-location-の後の値は対象を区別するために使用されます。

都道府県・州（state/province）のリストを含む選択ボックスはfor属性に定義されます。

• cm-country - 国名を定義するために cm-location-\* と共に使用します。その国の都道府県・州（state/province）はこのマクロフォーマットにしたがって更新されます。
• cm-state - ラベルが割り当てられます。
  for属性で指定された要素は都道府県・州（state/province）のリストが利用可能な場合、または入力フィールド以外の場合にリストとしてどちらも表示されます。

ヒントやツールチップ

• cm-hint - ヒントを表示したい入力フィールドやテキストエリアはこのクラスに割り当てます。表示したいヒントのテキストはタイトル属性に定義して下さい。

もしタイトル属性が無い場合、ヒントのテキストは「value」属性から取得されます。
フィールドにフォーカスが移ると、ヒントは非表示になります。
フィールドが空の場合。フォーカスが外れると、ヒントは再び表示されます。

ヒントがフィールド内に表示された場合、フィールド名のプレフィックスとしてhint_がつけます。このプレフィックスはテキストが入力された場合に取り除かれます。

例:

<input type="text" name="field" id="a" size="20" title="Please, input your name here" value="" class="input-text cm-hint" />

• cm-hint-focused - 入力フィールドにフォーカスが当たるとヒントが隠れていることを示しています。cm-hintと使用する際、内部ヒントが表示されなくなります。
• 例）
  管理パネルの注文の追跡フィールド
• cm-tooltip ツールチップを持つ要素に割り当てられます。ツールチップテキストはタイトル属性に定義します。