PowerCMS ブログ

昨日に続き、スニペットフィールドを利用した管理画面のUIカスタマイズについてご紹介します。

クリックによる入力値の増減

入力欄の数値の値を▲▼アイコンのクリックで増減できるようにします。

カスタムフィールドの設定値

名前: （任意）
説明: （任意）
種類: スニペット
オプション: val1（任意）
必須?: （任意）
既定値:

<input
  type="text"
  name="val1"
  id="val1"
  value="<$MTGetVar name="val1" escape="html"$>"
  class="short" />

<script>
jQuery(function() {
    jQuery( "#val1" ).spinner();
})
</script>
<MTIgnore>選択スクリプト用CSS</MTIgnore>
<style scoped>
.ui-spinner {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    vertical-align: middle;
}
.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    margin: .2em 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 22px;
}
.ui-spinner-button {
    width: 16px;
    height: 50%;
    font-size: .5em;
    padding: 0;
    margin: 0;
    text-align: center;
    position: absolute;
    cursor: default;
    display: block;
    overflow: hidden;
    right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
    border-top: none;
    border-bottom: none;
    border-right: none;
}
/* vertically center icon */
.ui-spinner .ui-icon {
    position: absolute;
    margin-top: -8px;
    top: 50%;
    left: 0;
}
.ui-spinner-up {
    top: 0;
}
.ui-spinner-down {
    bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
    /* need to fix icons sprite */
    background-position: -65px -16px;
}


.ui-spinner-input {
    padding: 4px;
    margin: 0px;
    border: 1px solid;
    border-color: #323232 #ADADAD #ADADAD #ADADAD;
}
.ui-spinner-button {
    font-size: 1em;
}
</style>

ベースネーム: pagevalue（任意）
テンプレートタグ: PageValue（任意）

テンプレートで保存された値を取り出す方法

通常のスニペットフィールドと同様にオプション値をkeyモディファイアに渡して取り出します。

<$MTPageValue key="val1"$>

関連するエントリ

• スニペッドフィールドを使用したカラーピッカー
• スニペッドフィールドを使用したドラッグ&ドロップインターフェイス
• スニペット・カスタムフィールドでカスタムフィールドをタブグループにまとめる