Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
a-blog cmsのカスタムユニット:ボタン
<!-- BEGIN custom_button -->
<table class="entryFormColumnSettingTable entryFormColumnTable">
<tr>
<td class="entryFormFileControl">
<table class="entryFormColumnSettingTable">
<tr>
<th style="white-space: nowrap;">ボタンの文字列</th>
<td>
<input type="text" name="button_text{id}" value="{button_text}" class="acms-admin-form-width-half" />
<input type="hidden" name="unit{id}[]" value="button_text{id}" />
</td>
</tr>
<tr>
<th style="white-space: nowrap;">リンク先URL</th>
<td>
<input type="text" name="button_url{id}" value="{button_url}" class="acms-admin-form-width-full" />
<input type="hidden" name="unit{id}[]" value="button_url{id}" />
</td>
</tr>
<tr>
<th style="white-space: nowrap;">ラジオボタン</th>
<td>
<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value="small"{button_size:checked#small} /><i class="acms-admin-ico-radio"></i>小</label>
<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value=""<!-- BEGIN_IF [{button_size}/em] --> checked="checked"<!-- END_IF --> /><i class="acms-admin-ico-radio"></i>中</label>
<label class="acms-admin-form-radio"><input type="radio" name="button_size{id}" value="large"{button_size:checked#large} /><i class="acms-admin-ico-radio"></i>大</label>
<input type="hidden" name="unit{id}[]" value="button_size{id}" />
<label class="acms-admin-form-checkbox" for="input-button_block{id}">
<input type="checkbox" name="button_block{id}[]" value="1" id="input-button_block{id}"{button_block:checked#1} />
<i class="acms-admin-ico-checkbox"></i>幅を広げる
</label>
<input type="hidden" name="unit{id}[]" value="button_block{id}" />
</td>
</tr>
<tr>
<th style="white-space: nowrap;">ボタンの色</th>
<td>
<select name="button_color{id}" class="acms-admin-form-width-full">
<option value="">グレー</option>
<option value="primary"{button_color:selected#primary}>青</option>
<option value="success"{button_color:selected#success}>緑</option>
<option value="info"{button_color:selected#info}>黒</option>
<option value="warning"{button_color:selected#warning}>オレンジ</option>
<option value="danger"{button_color:selected#danger}>赤</option>
</select>
<input type="hidden" name="unit{id}[]" value="button_color{id}" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END custom_button -->
<!-- BEGIN unit#custom_button -->
<p class="acms-text-center">
<!-- BEGIN_IF [{button_url}/nem/and/{button_text}/nem] -->
<a href="{button_url}" class="acms-btn<!-- BEGIN_IF [{button_size}/nem] --> acms-btn-{button_size}<!-- END_IF --><!-- BEGIN_IF [{button_color}/nem] --> acms-btn-{button_color}<!-- END_IF --><!-- BEGIN_IF [{button_block}/eq/1] --> acms-btn-block<!-- END_IF -->">
{button_text}
</a>
<!-- ELSE -->
<small>【!】ボタンの文字列・リンク先URLの両方を入力してください</small>
<!-- END_IF -->
</p>
<!-- END unit#custom_button -->
Owner

webbingstudio commented May 11, 2016

a-blog cmsの公式テーマでいきなり使えるボタンのセット。

サイズ・カラー・ブロック化の有無を選択することができる。
カスタムユニットでは必須チェックができない(らしい)ので、文字列とリンク先URLのいずれかが未入力だった場合はエラー文を表示する(何も表示しないとダイレクト編集で直すことができない)。

ファイルユニットに使用されているtd.entryFormFileControlを改変。モバイルに対応する。
td.entryFormFileControlは、th要素の幅が8emと狭いので、th要素にnowrapを明示している。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment