Wijmo UI for the Web
Ribbon Buttons
Wijmo User Guide > Widgets > Ribbon > Ribbon Concepts > Ribbon Buttons
Show All
Hide All

There are several types of buttons that you can use in the ribbon.

Big Buttons

Big ribbon buttons are created using button <button> markup. There are three components of a button:

The markup for a big save button inside a group looks like this.

Sample markup for creating a big button

Sample Markup
Copy Code 
<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>

Rows of Smaller Buttons

Rows of smaller ribbon buttons are created using span <span> markup with the class specified as wijmo-wijribbon-list. The span keeps together in one row all of the buttons that you specify inside it. The buttons are created using <button> markup. You can specify the class for each small button in the row as one of the following to specify icons included in the CSS file referenced in the <head> of your page. 

Note: There are two ways to use <button> markup. One is icon only, for example, a Cut button where the red X is universally understood. Another is icon and text, for example, a Find and Replace button.

The markup for two rows of small buttons inside a group looks like this, using a <span> element with the class set to wijmo-wijribbon-list for each row of small buttons, and the <button> elements for the row nested in it.

Note that if we also included a big button in the same group, as it is in the Quick Start, the first two <span> elements would break to separate rows next to the big button. In this example though, with the width of the group set to 200px in the <style>, and without a big button, the first two <span> elements appear in the top row, and the third <span> element appears on the bottom row.

Sample markup for creating rows of small buttons

Sample Markup
Copy Code 
<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>

CheckBox Buttons 

Rows of buttons created using input <input> markup with the type attribute set to "checkbox" creates slightly smaller buttons than those created using <button> markup. Another difference, besides the size, is that checkbox buttons stay in their clicked (or "checked") state until they are toggled off. This is useful for formatting buttons like Bold or Italic, where you can toggle one or more of the buttons at the same time.

Like the rows of smaller buttons, we start with a <span> element that has the class set to wijmo-wijribbon-list.

Each <input> element has an id attribute that matches a <label> element's for attribute. The <label> element specifies the class to use (see the list of icons in the rows of smaller buttons above for valid classes) as well as the title attribute, which provides tooltip text for the button. The markup for a row of checkbox buttons looks like this.

Sample markup for creating the smallest buttons from checkboxes

Sample Markup
Copy Code 
<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" name="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
                    <input type="checkbox" id="fontStyleItalic"/>
                    <label for="fontStyleItalic" name="italic" title="Italic" class="wijmo-wijribbon-italic"></label>
                    <input type="checkbox" id="fontStyleUnderline"/>
                    <label for="fontStyleUnderline" name="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
                    <input type="checkbox" id="fontStyleStrikeThrough"/>
                    <label for="fontStyleStrikeThrough" name="strikethrough" title="Strikethrough" class="wijmo-wijribbon-strike"></label>
                    <input type="checkbox" id="fontStyleSubscript"/>
                    <label for="fontStyleSubscript" name="subscript" title="Subscript" class="wijmo-wijribbon-sub"></label>
                    <input type="checkbox" id="fontStyleSuperscript"/>
                    <label for="fontStyleSuperscript" name="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label>
                </span>
                <div>First Group Title</div>
            </li>
        </ul>
    </div>
</div>

Radio Buttons

Rows of buttons created using input <input> markup with the type attribute set to "radio" creates slightly smaller buttons than those created using <button> markup. Another difference, besides the size, is that the user can only select one of radio buttons in the list. This is useful for formatting buttons like JustifyLeft, JustifyCenter, and JustifyRight, where you only want to allow one value at a time.

Like the rows of smaller buttons, we start with a <span> element that has the class set to wijmo-wijribbon-list.

Each <input> element has an id attribute that matches a <label> element's for attribute. The <label> element specifies the class to use (see the list of icons in the rows of smaller buttons above for valid classes) as well as the title attribute, which provides tooltip text for the button. The markup for a row of the smallest buttons looks like this.

Sample markup for creating the smallest buttons from radio buttons

Sample Markup
Copy Code 
<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" name="bold" title="Full Justify" class="wijmo-wijribbon-justifyfull"></label>
                    <input type="radio" id="justifyLeft"/>
                    <label for="justifyLeft" name="italic" title="Left Justify" class="wijmo-wijribbon-justifyleft"></label>
                    <input type="radio" id="justifyRight"/>
                    <label for="justifyRight" name="underline" title="Right Justify" class="wijmo-wijribbon-justifyright"></label>
                    <input type="radio" id="justifyCenter"/>
                    <label for="justifyCenter" name="strikethrough" title="Center Text" class="wijmo-wijribbon-justifycenter"></label>
                </span>
                <div>First Group Title</div>
            </li>
        </ul>
    </div>
</div>

Drop Down Buttons

Drop-down buttons are created using <div> markup with the class attribute set to wijmo-wijribbon-dropdownbutton. Nest a <button> element and an unordered list <ul> inside the main drop-down button <div> to create the button text and the drop-down items for the list. Each line item <li> contains an <input> element with the type attribute set to "radio" and a <label> element with the text to use. The markup for two drop-down buttons inside a group looks like this.

Sample markup for creating drop down buttons

Sample Markup
Copy Code 
<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" name="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameCourier" name="fontname"/>
                            <label for="fontNameCourier" name="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="fontNameTimes" name="fontname"/>
                            <label for="fontNameTimes" name="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" name="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeMedium" name="fontsize"/>
                            <label for="fontSizeMedium" name="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="fontSizeLarge" name="fontsize"/>
                            <label for="fontSizeLarge" name="large" title="Large">Large</label>
                        </li>
                    </ul>
                </div>
                <div>First Group Title</div>
            </li>
        </ul>
    </div>
</div>

Split Buttons

Split buttons are created using a main <div> element with the class attribute set to wijmo-wijribbon-splitbutton. Nest two <button> elements in the main <div> to create both halves of the split button. Also inside the main <div>, nest an unordered list, <ul>, to add the sub-items for the drop-down button on the right half. The markup for a split button inside a group looks like this.

Sample markup for creating a split button

Sample Markup
Copy Code 
<div id="ribbon">
    <ul>
        <li><a href="#FirstTab">First Tab</a></li>
    </ul>
    <div id="FirstTab">
        <ul>
            <li id="FirstGroup">
                    <div title="Table" class="wijmo-wijribbon-splitbutton">
                        <button title="Table" name="tablebutton" class="wijmo-wijribbon-bigbutton">
                            <div class="wijmo-wijribbon-table"></div>
                            <span>Table</span>
                        </button>
                        <button class="wijmo-wijribbon-bigbutton"></button>
                        <ul>
                            <li>
                                <button title="Insert Table" name="inserttable">
                                    <span class="wijmo-wijribbon-inserttable"></span>
                                    <span>Insert</span>
                                </button>
                            </li>
                            <li>
                                <button title="Edit Table" name="edittable">
                                    <span class="wijmo-wijribbon-edittable"></span>
                                    <span>Edit</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                <div>First Group Title</div>
            </li>
        </ul>
    </div>
</div>
See Also
Main Ribbon Elements
Button Icons

Reference

wijribbon API

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page