Ribbon ボタン

全て展開

すべて折りたたむ

リボンでは、いくつかのタイプのボタンを使用できます。

大きいボタン

大きいリボンボタンは、ボタン <button> マークアップを使用して作成されます。ボタンは３つの部分から成ります。

ボタン - ボタン自体は、メインの <button> マークアップで作成されます。このクラスは wijmo-wijribbon-bigbutton と指定します。
アイコン - オプションのアイコンは、ボタン要素内にネストされた <div> 要素を使用して作成されます。ページの <head> で参照される CSS ファイルに含まれるアイコンが使用されます。<div> の class 属性で使用できるアイコンのリストについては、「ボタンのアイコン」を参照してください。
テキスト - オプションのテキストは、アイコンの下のボタン要素内にネストされた <span> 要素で作成されます。

グループ内に置かれた大きい保存ボタンのマークアップは次のようになります。

大きいボタンを作成するサンプルマークアップ

サンプルマークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> <button title="Save" class="wijmo-wijribbon-bigbutton" name="save"> <div class="wijmo-wijribbon-save"></div> <span>Save</span> </button> <div>First Group Title</div> </li> </ul> </div> </div>

横並びの小さいボタン

横並びの小さいボタンは、スパン <span> マークアップを使用して作成されます。このクラスは wijmo-wijribbon-list と指定します。このスパンは、その内側で指定されたすべてのボタンを１つの行にまとめます。これらのボタンは、<button> マークアップを使用して作成されます。行内の小さいボタンのクラスには、それぞれ以下のいずれかを指定して、ページの <head> で参照される CSS ファイルに含まれるアイコンを指定できます。

メモ：<button> マークアップの使用方法は２つあります。１つは、アイコンのみを指定する方法です。たとえば、赤色の×マークが付いたアイコンは、それだけで削除ボタンとわかります。もう１つは、アイコンとテキストを指定します。たとえば、検索ボタンや置換ボタンがあります。

グループ内に２行に分けて置かれた小さいボタンのマークアップは次のようになります。小さいボタンの行ごとに、クラスを wijmo-wijribbon-list に設定した <span> 要素を使用し、その内側に各行の <button> 要素をネストします。

クイックスタートで示したように、同じグループに大きいボタンも１つ入れると、最初の２つの <span> 要素は離れて、大きいボタンの横に２行で表示されます。この例では、<style> でグループの幅を 200px に設定しました。また、大きいボタンはないため、最初の２つの <span> 要素が上の行に、３つめの <span> 要素が下の行に表示されます。

横並びの小さいボタンを作成するサンプルマークアップ

サンプルマークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> <span class="wijmo-wijribbon-list"> <button title="Undo" class="wijmo-wijribbon-undo" name="undo"></button> <button title="Redo" class="wijmo-wijribbon-redo" name="redo"></button> </span> <span class="wijmo-wijribbon-list"> <button title="Preview" class="wijmo-wijribbon-preview" name="preview"></button> <button title="Clean up" class="wijmo-wijribbon-cleanup" name="cleanup"></button> </span> <span class="wijmo-wijribbon-list"> <button title="Cut" class="wijmo-wijribbon-cut" name="cut"></button> <button title="Copy" class="wijmo-wijribbon-copy" name="copy"></button> <button title="Paste" class="wijmo-wijribbon-paste" name="paste"></button> <button title="Select All" class="wijmo-wijribbon-selectall" name="selectall"></button> </span> <div>First Group Title</div> </li> </ul> </div> </div>

チェックボックスボタン

type 属性を "checkbox" に設定したインプット <input> マークアップを使用して横並びのボタンを作成すると、<button> マークアップを使用する場合より多少ボタンが小さくなります。サイズ以外の違いとして、チェックボックスボタンは、オフにされるまで、クリックされた（チェックされた）状態になります。同時に１つ以上のボタンをオンにすることができるため、太字や斜体などの書式設定ボタンに使用できます。

横並びの小さいボタンと同様に、最初に、クラスを wijmo-wijribbon-list に設定した <span> 要素を使用します。

各 <input> 要素には、<label> 要素の for 属性に一致する id 属性があります。<label> 要素は、使用する class（有効なクラスについては、上の横並びの小さいボタンのアイコンのリストを参照）と、ボタンのツールチップテキストを提供する title 属性を指定します。１行から成るチェックボックスボタンのマークアップは次のようになります。

チェックボックスから最小のボタンを作成するサンプルマークアップ

サンプルマークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> <span class="wijmo-wijribbon-list"> <input type="checkbox" id="fontStyleBold"/> <label for="fontStyleBold" id="bold" title="Bold" class="wijmo-wijribbon-bold"></label> <input type="checkbox" id="fontStyleItalic"/> <label for="fontStyleItalic" id="italic" title="Italic" class="wijmo-wijribbon-italic"></label> <input type="checkbox" id="fontStyleUnderline"/> <label for="fontStyleUnderline" id="underline" title="Underline" class="wijmo-wijribbon-underline"></label> <input type="checkbox" id="fontStyleStrikeThrough"/> <label for="fontStyleStrikeThrough" id="strikethrough" title="Strikethrough" class="wijmo-wijribbon-strike"></label> <input type="checkbox" id="fontStyleSubscript"/> <label for="fontStyleSubscript" id="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label> <input type="checkbox" id="fontStyleSuperscript"/> <label for="fontStyleSuperscript" id="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label> </span> <div>First Group Title</div> </li> </ul> </div> </div>

ラジオボタン

type 属性を "radio" に設定したインプット <input> マークアップを使用して横並びのボタンを作成すると、<button> マークアップを使用する場合より多少ボタンが小さくなります。サイズ以外の違いとして、ユーザーはリスト内のラジオボタンを１つしか選択できません。これは、一度に１つの値しか使用できない JustifyLeft、JustifyCenter、JustifyRight などの書式設定ボタンに便利です。

横並びの小さいボタンと同様に、最初に、クラスを wijmo-wijribbon-list に設定した <span> 要素を使用します。

各 <input> 要素には、<label> 要素の for 属性に一致する id 属性があります。<label> 要素は、使用する class（有効なクラスについては、上の横並びの小さいボタンのアイコンのリストを参照）と、ボタンのツールチップテキストを提供する title 属性を指定します。１行から成る最小のボタンのマークアップは次のようになります。

ラジオボタンから最小のボタンを作成するサンプルマークアップ

サンプルマークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> <span class="wijmo-wijribbon-list"> <input type="radio" id="justifyFull"/> <label for="justifyFull" id="bold" title="Full Justify" class="wijmo-wijribbon-justifyfull"></label> <input type="radio" id="justifyLeft"/> <label for="justifyLeft" id="italic" title="Left Justify" class="wijmo-wijribbon-justifyleft"></label> <input type="radio" id="justifyRight"/> <label for="justifyRight" id="underline" title="Right Justify" class="wijmo-wijribbon-justifyright"></label> <input type="radio" id="justifyCenter"/> <label for="justifyCenter" id="strikethrough" title="Center Text" class="wijmo-wijribbon-justifycenter"></label> </span> <div>First Group Title</div> </li> </ul> </div> </div>

ドロップダウンボタン

ドロップダウンボタンは、class 属性を wijmo-wijribbon-dropdownbutton に設定した <div> マークアップを使用して作成されます。メインのドロップダウン <div> 内に、<button> 要素と順序なしリスト <ul> をネストして、リストのボタンテキストとドロップダウン項目を作成します。各行項目 <li> には、type 属性を "radio" に設定した <input> 要素と、使用するテキストを含む <label> 要素が含まれます。グループ内に２つ置かれたドロップダウンボタンのマークアップは次のようになります。

ドロップダウンボタンを作成するサンプルマークアップ

サンプルマークアップ	コードのコピー
<div id="ribbon"> <ul> <li><a href="#FirstTab">First Tab</a></li> </ul> <div id="FirstTab"> <ul> <li id="FirstGroup"> <div title="Font Name" class="wijmo-wijribbon-dropdownbutton"> <button title="Font Name" name="fontname">Font Name</button> <ul> <li> <input type="radio" id="fontNameArial" name="fontname"/> <label for="fontNameArial" id="fn1" title="Arial">Arial</label> </li> <li> <input type="radio" id="fontNameCourier" name="fontname"/> <label for="fontNameCourier" id="fn2" title="Courier New">Courier New</label> </li> <li> <input type="radio" id="fontNameTimes" name="fontname"/> <label for="fontNameTimes" id="fn3" title="Times New Roman">Times New Roman</label> </li> </ul> </div> <div title="Font Size" class="wijmo-wijribbon-dropdownbutton"> <button title="Font Size" name="fontsize">Font Size</button> <ul> <li> <input type="radio" id="fontSizeSmall" name="fontsize"/> <label for="fontSizeSmall" id="small" title="Small">Small</label> </li> <li> <input type="radio" id="fontSizeMedium" name="fontsize"/> <label for="fontSizeMedium" id="medium" title="Medium">Medium</label> </li> <li> <input type="radio" id="fontSizeLarge" name="fontsize"/> <label for="fontSizeLarge" id="large" title="Large">Large</label> </li> </ul> </div> <div>First Group Title</div> </li> </ul> </div> </div>

サンプルマークアップ

コードのコピー

<div id="ribbon">
    <ul>
        <li><a href="#FirstTab">First Tab</a></li>
    </ul>
    <div id="FirstTab">
        <ul>
            <li id="FirstGroup">
                <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Name" name="fontname">Font Name</button>
                    <ul>
                        <li>
                            <input type="radio" id="fontNameArial" name="fontname"/>
                            <label for="fontNameArial" id="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameCourier" name="fontname"/>
                            <label for="fontNameCourier" id="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameTimes" name="fontname"/>
                            <label for="fontNameTimes" id="fn3" title="Times New Roman">Times New Roman</label>
                        </li>
                    </ul>
                </div>
                <div title="Font Size" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Size" name="fontsize">Font Size</button>
                    <ul>
                        <li>
                            <input type="radio" id="fontSizeSmall" name="fontsize"/>
                            <label for="fontSizeSmall" id="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeMedium" name="fontsize"/>
                            <label for="fontSizeMedium" id="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeLarge" name="fontsize"/>
                            <label for="fontSizeLarge" id="large" title="Large">Large</label>
                        </li>
                    </ul>
                </div>
                <div>First Group Title</div>
            </li>
        </ul>
    </div>
</div>

分割ボタン

分割ボタンは、class 属性を wijmo-wijribbon-splitbutton に設定したメインの <div> 要素を使用して作成されます。メインの <div> に２つの <button> 要素をネストして、分割ボタンの左右の領域を作成します。また、メインの <div> 内に、順序なしリスト <ul> をネストして、右の領域にドロップダウンボタンのサブ項目を追加します。グループ内に置かれた分割ボタンのマークアップは次のようになります。

分割ボタンを作成するサンプルマークアップ