Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Ribbon > Markup and Scripting
Show All
Hide All

The HTML markup for a wijribbon widget using the full ribbon looks like this.

Markup
Copy Code 
<div id="ribbon" >
    <ul>
        <li><a href="#FormatTab">Format</a></li>
        <li><a href="#CustomizeTab">Customize Tab</a></li>
    </ul>
    <div id="FormatTab">
        <ul>
            <li id="actiongroup">
                <button title="Save" class="wijmo-wijribbon-bigbutton" name="save">
                    <div class="wijmo-wijribbon-save"></div>
                    <span>Save</span>
                </button>
                <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>Actions</div>
            </li>
            <li id="fontgroup" >
                <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
                    <button title="Font Name" name="fontname">Font Name</button>
                    <ul>
                        <li>
                            <input type="radio" id="C1Editor1_ctl74" name="fontname"></input>
                            <label for="C1Editor1_ctl74" name="fn1" title="Arial">Arial</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl76" name="fontname"></input>
                            <label for="C1Editor1_ctl76" name="fn2" title="Courier New">Courier New</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl78" name="fontname"></input>
                            <label for="C1Editor1_ctl78" name="fn3" title="Garamond">Garamond</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl80" name="fontname"></input>
                            <label for="C1Editor1_ctl80" name="fn4" title="Tahoma">Tahoma</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl82" name="fontname"></input>
                            <label for="C1Editor1_ctl82" name="fn5" title="Times New Roman">Times New Roman</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl84" name="fontname"></input>
                            <label for="C1Editor1_ctl84" name="fn6" title="Verdana">Verdana</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl86" name="fontname"></input>
                            <label for="C1Editor1_ctl86" name="fn7" title="Wingdings">Wingdings</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="C1Editor1_ctl104" name="fontsize"></input>
                            <label for="C1Editor1_ctl104" name="xx-small" title="VerySmall">VerySmall</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl106" name="fontsize"></input>
                            <label for="C1Editor1_ctl106" name="x-small" title="Smaller">Smaller</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl108" name="fontsize"></input>
                            <label for="C1Editor1_ctl108" name="small" title="Small">Small</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl110" name="fontsize"></input>
                            <label for="C1Editor1_ctl110" name="medium" title="Medium">Medium</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl112" name="fontsize"></input>
                            <label for="C1Editor1_ctl112" name="large" title="Large">Large</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl114" name="fontsize"></input>
                            <label for="C1Editor1_ctl114" name="x-large" title="Larger">Larger</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl116" name="fontsize"></input>
                            <label for="C1Editor1_ctl116"name="xx-large" title="VeryLarge">VeryLarge</label>
                        </li>
                        <li>
                            <input type="radio" id="C1Editor1_ctl117" name="fontsize"></input>
                            <label for="C1Editor1_ctl117" name="40pt" title="40pt">40pt</label>
                        </li>
                    </ul>
                </div>
                <span class="wijmo-wijribbon-list">
                    <button title="Background Color" class="wijmo-wijribbon-bgcolor" name="backcolor"></button>
                    <button title="Font Color" class="wijmo-wijribbon-color" name="fontcolor"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <input type="checkbox" id="C1Editor1_ctl133"></input>
                    <label for="C1Editor1_ctl133" name="bold" title="Bold" class="wijmo-wijribbon-bold"></label>
                    <input type="checkbox" id="C1Editor1_ctl134"></input>
                    <label for="C1Editor1_ctl134" name="italic" title="Italic" class="wijmo-wijribbon-italic"></label>
                    <input type="checkbox" id="C1Editor1_ctl135"></input>
                    <label for="C1Editor1_ctl135" name="underline" title="Underline" class="wijmo-wijribbon-underline"></label>
                    <input type="checkbox" id="C1Editor1_ctl136"></input>
                    <label for="C1Editor1_ctl136" name="strikethrough" title="Strikethrough" class="wijmo-wijribbon-strike"></label>
                    <input type="checkbox" id="C1Editor1_ctl137"></input>
                    <label for="C1Editor1_ctl137" name="subscript" Title="Subscript" class="wijmo-wijribbon-sub"></label>
                    <input type="checkbox" id="C1Editor1_ctl138"></input>
                    <label for="C1Editor1_ctl138" name="superscript" title="Superscript" class="wijmo-wijribbon-sup"></label>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="Template" class="wijmo-wijribbon-template" name="template"></button>
                </span>
                <span class="wijmo-wijribbon-list">
                    <button title="RemoveFormat" class="wijmo-wijribbon-removeformat" name="removeformat"></button>
                </span>
                <div>Font</div>
            </li>
        </ul>
    </div>
    <div id="CustomizeTab">
        <ul>
            <li>
                <div title="Table" class="wijmo-wijribbon-splitbutton">
                    <button title="customize button" name="customcommand">Click Me</button>
                </div>
                <div>Customize Group</div>
            </li>                           
        </ul>
    </div>
</div>

You can initialize the widget with the following jQuery script.

Script
Copy Code 
<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#ribbon").wijribbon({
            click: function (e, cmd) {
                alert(cmd.commandName);
            }
        })
    });
</script>

The markup and script featured here results in the following live widget. Click the Font Name and Font Size buttons to see the lists of items, and click the Customize tab to see the Click Me button.

Simple Ribbon

The following markup and scripting creates a simple ribbon UI.

Sample Markup and Scripting

Sample Markup
Copy Code 
<div id="ribbon">
    <button title="Background Color" class="wijmo-wijribbon-bgcolor" name="backcolor">
    </button>
    <div title="Font Name" class="wijmo-wijribbon-dropdownbutton">
        <button title="Font Name" name="fontname">
            Font Name</button>
        <ul>
            <li>
                <input type="radio" id="Button74" name="fontname"></input>
                <label for="Button74" name="fn1" title="Arial">
                    Arial</label></li>
            <li>
                <input type="radio" id="Button76" name="fontname"></input>
                <label for="Button76" name="fn2" title="Courier New">
                    Courier New</label></li>
            <li>
                <input type="radio" id="Button78" name="fontname"></input>
                <label for="Button78" name="fn3" title="Garamond">
                    Garamond</label></li>
            <li>
                <input type="radio" id="Button80" name="fontname"></input>
                <label for="Button80" name="fn4" title="Tahoma">
                    Tahoma</label></li>
            <li>
                <input type="radio" id="Button82" name="fontname"></input>
                <label for="Button82" name="fn5" title="Times New Roman">
                    Times New Roman</label></li>
            <li>
                <input type="radio" id="Button84" name="fontname"></input>
                <label for="Button84" name="fn6" title="Verdana">
                    Verdana</label></li>
            <li>
                <input type="radio" id="Button86" name="fontname"></input>
                <label for="Button86" name="fn7" title="Wingdings">
                    Wingdings</label></li>
        </ul>
    </div>
    <input type="checkbox" id="Button133"></input>
    <label for="Button133" name="bold" title="Bold" class="wijmo-wijribbon-bold">
    </label>
    <input type="checkbox" id="Button134"></input>
    <label for="Button134" name="italic" title="Italic" class="wijmo-wijribbon-italic">
    </label>
    <input type="checkbox" id="Button135"></input>
    <label for="Button135" name="underline" title="Underline" class="wijmo-wijribbon-underline">
    </label>
    <input type="checkbox" id="Button136"></input>
    <label for="Button136" name="strikethrough" title="Strikethrough" class="wijmo-wijribbon-strike">
    </label>
    <input type="checkbox" id="Button137"></input>
    <label for="Button137" name="subscript" title="Subscript" class="wijmo-wijribbon-sub">
    </label>
    <input type="checkbox" id="Button138"></input>
    <label for="Button138" name="superscript" title="Superscript" class="wijmo-wijribbon-sup">
    </label>
    <input type="checkbox" id="Button999"></input>
    <label for="Button999" name="blockquote" title="BlockQuote" class="wijmo-wijribbon-blockquote">
    </label>
    <button title="Insert Code" class="wijmo-wijribbon-code" name="insertcode">
    </button>
</div>

You can also add CSS styling. This example specifies the width and the background color of the simple wijribbon.

To add CSS styling

Sample Script
Copy Code 
<style type="text/css">
    #ribbon
    {
        width: 400px;
        background-color: #242122
    }
</style>

Initialize the widget by adding the following script to the project.

To initialize the widget

Sample Script
Copy Code 
<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#ribbon").wijribbon({click: function (e, cmd) {
                alert(cmd.commandName);
                }
            })
        });   
</script>
See Also
Quick Start

Concepts

Main Ribbon Elements

Reference

wijribbon API

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page