A ribbon bar is a user-friendly interface for desktop environments when users can utilize a mouse to navigate. On tablets or smart-phones, another, more touch-enabled, interface might be required. This sample shows how to implement your own button bar based on the Javascript API of Web.TextControl, the HTML5 based web editor.

Building a touch-enabled button bar with Javascript

The new button bar itself is a simple DIV element with CSS-styled HTML INPUT elements:

[from index.aspx]

<div id="iOSUXBar">
        <input type="button" id="fontbold" title="Bold" class="btniOSUX" />
        <input type="button" id="fontitalic" title="Italic" class="btniOSUX" />
        <input type="button" id="listbullet"
                title="Bulleted List" class="btniOSUX separator" />
        <input type="button" id="liststructured"
                title="Structured List" class="btniOSUX" />

The CSS for the DIV and the INPUT elements looks like this:

#iOSUXBar {
    border-top: 1px #bbbbbb solid;
    border-bottom: 1px #bbbbbb solid;
    padding: 5px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

.btniOSUX {
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    background-color: transparent;
    width: 50px;
    height: 50px;
    border: 1px solid #c2c2c2;
    border-radius: 2px;

#fontbold {
    background-image: url('images/fontbold.png');

.btniOSUX:hover {
    background-color: #d5e1f2;

.btniOSUX-selected {
    background-color: #c2d5f2;

The following Javascript adds the click event to the newly inserted bold button:

[from index.aspx]

        if ($(this).hasClass('btniOSUX-selected')) {
                        TXTextControl.InputFormatProperty.Bold, 0);
                        TXTextControl.InputFormatProperty.Bold, 1);


Web.TextControl will raise the inputFormatReceived event, if the InputFormat at the current input position has been changed. The following Javascript attaches the event handler inputFormatReceivedHandler to the event:

[from index.aspx]

document.addEventListener("inputFormatReceived", inputFormatReceivedHandler);

function inputFormatReceivedHandler(e) {
        var msg = e.detail;
        if (msg.hasOwnProperty("Bold"))
                inputFormatChanged(TXTextControl.InputFormatProperty.Bold, msg.Bold);

The function inputFormatChanged changes the state of the buttons to reflect the input format at the current input position:

[from index.aspx]

function inputFormatChanged(id, value, stringValue) {
        var btns = null;

        switch (id) {
                case TXTextControl.InputFormatProperty.Bold:
                        btns = [$("#fontbold")];

        if (btns) {
                btns.forEach(function (btn) {
                        if (value) btn.addClass('btniOSUX-selected');
                        else btn.removeClass('btniOSUX-selected');

Download the sample from GitHub and test it on your own.


Download and Fork This Sample on GitHub

We proudly host our sample code on github.com/TextControl.

Please fork and contribute.

Requirements for This Sample

  • Visual Studio 2012 or better
  • TX Text Control .NET Server for ASP.NET (trial sufficient)