Wijmo UI for the Web
Markup and Scripting
| Wijmo User Guide > Widgets > Ribbon > Markup and Scripting |
The HTML markup for a wijribbon widget using the full ribbon looks like this.
Drop down to view markup
| 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="strike" 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.
Drop down to view 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.
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="strike" 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>
|
|
Show All
Hide All