ejToolbar

The Toolbar control supports displaying a list of tools within a web page. This control is capable of customizing toolbar items with any functionality by using enriched client-side methods. This control is composed of collection of unordered lists containing text and images contained into a div.

Syntax

  • javascript
  • $(element).ejToolbar()

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // Create Toolbar
     $("#toolbar1").ejToolbar();    
    </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.toolbar.js

    Members

    cssClass string

    Sets the root CSS class for Toolbar control to achieve the custom theme.

    Default Value

    • ””

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // Sets the root class for Toolbar control theme on initialization. 
            //To set the cssClass API value.
            $("#toolbar1").ejToolbar({cssClass: "gradient-lime"});
    </script>

    dataSource object

    Specifies dataSource value for the Toolbar control during initialization.

    Default Value

    • null

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // to set dataSource value during initialization. 
            //To set dataSource  API value 
            items = [{ id: "1", spriteCssClass: "editTools cursor", text: "Cursor" },
    { id: "2", spriteCssClass: "editTools select", text: "Select" },
    { id: "3", spriteCssClass: "editTools move", text: "Move" },
    { id: "4", spriteCssClass: "editTools rectangle select", text: "Rectangle Select" }];
    $("#toolbar1").ejToolbar({ dataSource:  items}); 
    </script>

    disabledItemIndices array

    Disables an Item or set of Items that are enabled in the Toolbar

    Default Value

    • []

    Example

  • html
  • <div id="toolbar1">
        <ul>
        <li id="Left" title="Left">
            <div class="ToolbarItems LeftAlign_tool"></div>
        </li>
        <li id="Center" title="Center">
            <div class="ToolbarItems CenterAlign_tool"></div>
        </li>
        <li id="Right" title="Right">
            <div class="ToolbarItems RightAlign_tool"></div>
        </li>
        <li id="Justify" title="Justify">
            <div class="ToolbarItems Justify_tool"></div>
        </li>
        </ul>
        <ul>
        <li id="Bold" title="Bold">
            <div class="ToolbarItems Bold_tool"></div>
        </li>
        <li id="Italic" title="Italic">
            <div class="ToolbarItems Italic_tool"></div>
        </li>
        <li id="StrikeThrough" title="Strike Through">
            <div class="ToolbarItems StrikeThrough_tool"></div>
        </li>
        <li id="UndeLine" title="UnderLine">
            <div class="ToolbarItems Underline_tool"></div>
        </li>
        </ul>
        </div>
        <script>
        // Disable Toolbar Items on initialization. 
                //To set disabledItemIndices API value 
                $("#toolbar1").ejToolbar({ 
                    disabledItemIndices: [1, 2]  
                });                   
        </script>

    enabled boolean

    Specifies the Toolbar control state.

    Default Value

    • true

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // Enable Toolbar on initialization. 
            //To set enabled API value 
            $("#toolbar1").ejToolbar({ enabled:  true });                   
    </script>

    enabledItemIndices array

    Enables an Item or set of Items that are disabled in the Toolbar

    Default Value

    • []

    Example

  • html
  • <div id="toolbar1">
        <ul>
        <li id="Left" title="Left">
            <div class="ToolbarItems LeftAlign_tool"></div>
        </li>
        <li id="Center" title="Center">
            <div class="ToolbarItems CenterAlign_tool"></div>
        </li>
        <li id="Right" title="Right">
            <div class="ToolbarItems RightAlign_tool"></div>
        </li>
        <li id="Justify" title="Justify">
            <div class="ToolbarItems Justify_tool"></div>
        </li>
        </ul>
        <ul>
        <li id="Bold" title="Bold">
            <div class="ToolbarItems Bold_tool"></div>
        </li>
        <li id="Italic" title="Italic">
            <div class="ToolbarItems Italic_tool"></div>
        </li>
        <li id="StrikeThrough" title="Strike Through">
            <div class="ToolbarItems StrikeThrough_tool"></div>
        </li>
        <li id="UndeLine" title="UnderLine">
            <div class="ToolbarItems Underline_tool"></div>
        </li>
        </ul>
        </div>
        <script>
        // Enable Toolbar Items on initialization. 
                //To set enabledItemIndices API value 
                $("#toolbar1").ejToolbar({ 
                    disabledItemIndices: [0, 1, 2, 3],
                    enabledItemIndices: [1, 2]  
                });                   
        </script>

    enableRTL boolean

    Specifies enableRTL property to align the Toolbar control from right to left direction.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // to set enableRTL Toolbar on initialization. 
            //To set enableRTL API value 
            $("#toolbar1").ejToolbar({ enableRTL: false });                  
    </script>

    enableSeparator boolean

    Allows to separate the each UL items in the Toolbar control.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //specifies enableSeparator Toolbar on initialization. 
            //To set enableSeparator API value 
            $("#toolbar1").ejToolbar({enableSeparator:true});                        
    </script>

    fields string

    Specifies the mapping fields for the data items of the Toolbar

    Default Value

    • null

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // To set fields API value during initialization. 
            //To set the fields API value.
            items = [{ id: "1", spriteCssClass: "editTools cursor", text: "Cursor" },
     { id: "2", spriteCssClass: "editTools select", text: "Select" },
     { id: "3", spriteCssClass: "editTools move", text: "Move" },
     { id: "4", spriteCssClass: "editTools rectangle select", text: "Rectangle Select"
     }];
    $("#toolbar1").ejToolbar(
                    {
                            dataSource:  items,
              fields:  { id: "id",spriteCssClass: "spriteCss"}
            });
    </script>

    fields.group string

    Defines the group name for the item.

    fields.htmlAttributes object

    Defines the HTML attributes such as id, class, styles for the item to extend the capability.

    fields.id string

    Defines id for the tag.

    fields.imageAttributes string

    Defines the image attributes such as height, width, styles and so on.

    fields.imageUrl string

    Defines the imageURL for the image location.

    fields.spriteCssClass string

    Defines the sprite CSS for the image tag.

    fields.text string

    Defines the text content for the tag.

    fields.tooltipText string

    Defines the tooltip text for the tag.

    fields.template string

    Allows you to add template as toolbar item

    height number|string

    Specifies the height of the Toolbar.

    Default Value

    • 28

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //To set height API value during initialization  
            $("#toolbar1").ejToolbar({ height: 30 });                                        
    </script>

    htmlAttributes object

    Specifies the list of HTML attributes to be added to toolbar control.

    Default Value

    • {}

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //To set htmlAttributes API value during initialization  
            $("#toolbar1").ejToolbar({ htmlAttributes: { title: "Demo" } });                                        
    </script>

    hide boolean

    Specifies whether the Toolbar control is need to be show or hide.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // Hide Toolbar on initialization. 
            //To set hide API value 
            $("#toolbar1").ejToolbar({  hide: true });                      
    </script>

    isResponsive boolean

    Enables/Disables the responsive support for Toolbar items during the window resizing time.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // to set isResponsive Toolbar on initialization. 
            //To set isResponsive API value 
            $("#toolbar1").ejToolbar({ isResponsive: true });                        
    </script>

    Items object

    Specifies the items of Toolbar

    Default Value

    • null

    Example

  • html
  • <div id="toolbar1"></div>
        <script>
       // To set Items API value during initialization. 
            //To set the Items API value.
           $(function () {
                // declaration
                
    
                 $("#toolbar1").ejToolbar({
    			         Items: [
                                { id: "button1", text: "Button1" ,group:"group1", tooltipText:"button1" , height:"20px", spriteCssClass: "editTools cursor",htmlAttributes: {class:"e-item "} },
    							{ id: "button2",group:"group1",text:"Button2",spriteCssClass: "editTools select",tooltipText:"button2"},
    							{ id: "button3", group:"group1",template:"<input type='text' id='dropdown1' />"},
    							{ id: "button4", text: "Button4" ,group:"group2",spriteCssClass: "editTools rectangle select",tooltipText:"button4"},
                                { id: "button5", text: "Button5",group:"group2",spriteCssClass: "editTools round select",tooltipText:"button5",imageUrl:"content/images/toolbar/Check.png",imageAttributes:{width: 20, height: 20}}],
    
                   
               });
            });
           </script>

    Items.group string

    Defines the group name for the item.

    Items.htmlAttributes object

    Defines the HTML attributes such as id, class, styles for the item .

    Items.id string

    Defines id for the tag.

    Items.imageAttributes string

    Defines the image attributes such as height, width, styles and so on.

    Items.imageUrl string

    Defines the imageURL for the image location.

    Items.spriteCssClass string

    Defines the sprite CSS for the image tag.

    Items.text string

    Defines the text content for the tag.

    Items.tooltipText string

    Defines the tooltip text for the tag.

    Items.template string

    Allows to add template as toolbar item.

    orientation enum|string

    Specifies the Toolbar orientation. See orientation

    Name Description
    Horizontal To set the horizontal orientation for toolbar control
    Vertical To set the vertical orientation for toolbar control

    Default Value

    • Horizontal

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // Specifies orientation of  Toolbar on initialization. 
            //To set orientation API value 
            $("#toolbar1").ejToolbar({ orientation: ej.Orientation.Horizontal }); 
    </script>

    query object

    Specifies the query to retrieve the data from the online server. The query is used only when the online dataSource is used.

    Default Value

    • null

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // To set query API value on initialization. 
            //To set query API value.
            // DataManager creation.
    var dataManger = ej.DataManager({
    url: "http://mvc.syncfusion.com/Services/Northwnd.svc/"
    });
     // Query creation.
    var query = ej.Query()
                    .from("Orders").take(6);
                            $("#toolbar1").ejToolbar(
                   {
                 dataSource: dataManger,
                  query: query
            });
    </script>

    responsiveType enum|string

    Specifies the Toolbar responsive type.

    Name Description
    Popup To display the toolbar overflow items as popup
    Inline To display the toolbar overflow items as inline toolbar

    Default Value

    • Popup

    Example

  • html
  • <div id="toolbar1">
        <ul>
           <li id="Left" title="Left">
               <div class="ToolbarItems LeftAlign_tool"></div>
          </li>
           <li id="Center" title="Center">
               <div class="ToolbarItems CenterAlign_tool"></div>
           </li>
           <li id="Right" title="Right">
               <div class="ToolbarItems RightAlign_tool"></div>
           </li>
           <li id="Justify" title="Justify">
               <div class="ToolbarItems Justify_tool"></div>
           </li>
        </ul>
        <ul>
           <li id="Bold" title="Bold">
               <div class="ToolbarItems Bold_tool"></div>
           </li>
           <li id="Italic" title="Italic">
               <div class="ToolbarItems Italic_tool"></div>
           </li>
           <li id="StrikeThrough" title="Strike Through">
               <div class="ToolbarItems StrikeThrough_tool"></div>
           </li>
           <li id="UndeLine" title="UnderLine">
               <div class="ToolbarItems Underline_tool"></div>
           </li>
        </ul>
        </div>
        <script>
        // Specifies responsiveType of  Toolbar on initialization. 
                //To set responsiveType API value 
                $("#toolbar1").ejToolbar({ responsiveType:"inline" }); 
        </script>

    showRoundedCorner boolean

    Displays the Toolbar with rounded corners.

    Default Value

    • false

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    // to set showRoundedCorner for Toolbar on initialization. 
            //To set showRoundedCorner API value 
            $("#toolbar1").ejToolbar({ showRoundedCorner: true });                   
    </script>

    width number|string

    Specifies the width of the Toolbar.

    Default Value

    • ””

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //To set width API value during initialization  
            $("#toolbar1").ejToolbar({ width: 300 });                                        
    </script>

    Methods

    deselectItem(element)

    Deselect the specified Toolbar item.

    Parameter Type Description
    element object The element need to be deselected

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("selectItem",$("li")[3]);//Select the Toolbar item.
    $("#toolbar1").ejToolbar("deselectItem",$("li")[3]); //Deselect the Toolbar item.
    </script>

    deselectItemByID(ID)

    Deselect the Toolbar item based on specified id.

    Parameter Type Description
    ID string The ID of the element need to be deselected

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("selectItemByID","left");//Select the Toolbar item by id.
    $("#toolbar1").ejToolbar("deselectItemByID","left"); // To Deselect the Toolbar item by id.
    </script>

    destroy()

    Allows you to destroy the Toolbar widget.

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    <script>
    //Initialize the Toolbar object.
    $("#toolbar1").ejToolbar();
    var toolbarObj = $("#toolbar1").data("ejToolbar");
     toolbarObj.destroy();       //Calls the destroy method of the Toolbar.
    </script>

    disable()

    To disable all items in the Toolbar control.

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("disable"); //Disable all item in the Toolbar
    </script>

    disableItem(element)

    Disable the specified Toolbar item.

    Parameter Type Description
    element object The element need to be disabled

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("disableItem",$("li")[3]);// to disable the third item in the toolbar
    </script>

    disableItemByID(ID)

    Disable the Toolbar item based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be disabled

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("disableItemByID","left"); //Disable the Toolbar item by item id
    </script>

    enable()

    Enable the Toolbar if it is in disabled state.

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("enable"); //enable all item in the Toolbar
    </script>

    enableItem(element)

    Enable the Toolbar item based on specified item.

    Parameter Type Description
    element object The element need to be enabled

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("enableItem",$("li")[3]);// to enable the third item in the toolbar
    </script>

    enableItemByID(ID)

    Enable the Toolbar item based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be enabled

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("enableItemByID","left"); //Disable the Toolbar item by item id
    </script>

    hide()

    To hide the Toolbar

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar("hide");// to hide the toolbar
    </script>

    removeItem(element)

    Remove the item from toolbar, based on specified item.

    Parameter Type Description
    element object The element need to be removed

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("removeItem",$("li")[3]); // Remove the Toolbar item
    </script>

    removeItemByID(ID)

    Remove the item from toolbar, based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be removed

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("removeItemByID","left"); // Remove the Toolbar item by id
    </script>

    selectItem(element)

    Selects the item from toolbar, based on specified item.

    Parameter Type Description
    element object The element need to be selected

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("selectItem",$("li")[3]);//Select the Toolbar item.
    </script>

    selectItemByID(ID)

    Selects the item from toolbar, based on specified item id in the Toolbar.

    Parameter Type Description
    ID string The ID of the element need to be selected

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("selectItemByID","left");//Select the Toolbar item by id.
    </script>

    show()

    To show the Toolbar.

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
            </ul>
            <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
            $("#toolbar1").ejToolbar();
    $("#toolbar1").ejToolbar("show");// to show the toolbar
    </script>

    Events

    click

    Fires after Toolbar control is clicked.

    </tr>
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    event object return the event object
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //create event for Toolbar
     $("#toolbar1").ejToolbar({
     click: function (args) {}
    });
    </script>

    create

    Fires after Toolbar control is created.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //create event for Toolbar
     $("#toolbar1").ejToolbar({
     create: function (args) {}
    });
    </script>

    focusOut

    Fires after Toolbar control is focused.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //focusOut event for Toolbar
     $("#toolbar1").ejToolbar({
     focusOut: function (args) {}
    });
    </script>

    destroy

    Fires when the Toolbar is destroyed successfully.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //destroy event for Toolbar
    $("#toolbar1").ejToolbar({
       destroy: function (args) {}
    });
    </script>

    itemHover

    Fires after Toolbar control item is hovered.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //itemHover event for Toolbar
     $("#toolbar1").ejToolbar({
     itemHover: function (args) {}
    });
    </script>

    itemLeave

    Fires after mouse leave from Toolbar control item.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    target object returns the target of the current object.
    currentTarget object returns the target of the current object.
    status boolean return the Toolbar state

    Example

  • html
  • <div id="toolbar1">
    <ul>
       <li id="Left" title="Left">
           <div class="ToolbarItems LeftAlign_tool"></div>
      </li>
       <li id="Center" title="Center">
           <div class="ToolbarItems CenterAlign_tool"></div>
       </li>
       <li id="Right" title="Right">
           <div class="ToolbarItems RightAlign_tool"></div>
       </li>
       <li id="Justify" title="Justify">
           <div class="ToolbarItems Justify_tool"></div>
       </li>
    </ul>
    <ul>
       <li id="Bold" title="Bold">
           <div class="ToolbarItems Bold_tool"></div>
       </li>
       <li id="Italic" title="Italic">
           <div class="ToolbarItems Italic_tool"></div>
       </li>
       <li id="StrikeThrough" title="Strike Through">
           <div class="ToolbarItems StrikeThrough_tool"></div>
       </li>
       <li id="UndeLine" title="UnderLine">
           <div class="ToolbarItems Underline_tool"></div>
       </li>
    </ul>
    </div>
    <script>
    //itemLeave event for Toolbar
     $("#toolbar1").ejToolbar({
     itemLeave: function (args) {}
    });
    </script>

    overflowOpen

    Fires when the overflow popup of toolbar is opened.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    clientX number Returns the current X position of the target .
    clientY number Returns the current Y position of the target .
    currentTarget object returns the target of the current object.

    Example

  • html
  • <div id="toolbar1">
        <ul>
           <li id="Left" title="Left">
               <div class="ToolbarItems LeftAlign_tool"></div>
          </li>
           <li id="Center" title="Center">
               <div class="ToolbarItems CenterAlign_tool"></div>
           </li>
           <li id="Right" title="Right">
               <div class="ToolbarItems RightAlign_tool"></div>
           </li>
           <li id="Justify" title="Justify">
               <div class="ToolbarItems Justify_tool"></div>
           </li>
        </ul>
        <ul>
           <li id="Bold" title="Bold">
               <div class="ToolbarItems Bold_tool"></div>
           </li>
           <li id="Italic" title="Italic">
               <div class="ToolbarItems Italic_tool"></div>
           </li>
           <li id="StrikeThrough" title="Strike Through">
               <div class="ToolbarItems StrikeThrough_tool"></div>
           </li>
           <li id="UndeLine" title="UnderLine">
               <div class="ToolbarItems Underline_tool"></div>
           </li>
        </ul>
        </div>
        <script>
        //overflowOpen event for Toolbar
         $("#toolbar1").ejToolbar({
         overflowOpen: function (args) {}
        });
        </script>

    overflowClose

    Fires when the overflow popup of toolbar is closed.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the Toolbar model
    type string returns the name of the event
    clientX number Returns the current X position of the target .
    clientY number Returns the current Y position of the target .
    currentTarget object returns the target of the current object.

    Example

  • html
  • <div id="toolbar1">
        <ul>
           <li id="Left" title="Left">
               <div class="ToolbarItems LeftAlign_tool"></div>
          </li>
           <li id="Center" title="Center">
               <div class="ToolbarItems CenterAlign_tool"></div>
           </li>
           <li id="Right" title="Right">
               <div class="ToolbarItems RightAlign_tool"></div>
           </li>
           <li id="Justify" title="Justify">
               <div class="ToolbarItems Justify_tool"></div>
           </li>
        </ul>
        <ul>
           <li id="Bold" title="Bold">
               <div class="ToolbarItems Bold_tool"></div>
           </li>
           <li id="Italic" title="Italic">
               <div class="ToolbarItems Italic_tool"></div>
           </li>
           <li id="StrikeThrough" title="Strike Through">
               <div class="ToolbarItems StrikeThrough_tool"></div>
           </li>
           <li id="UndeLine" title="UnderLine">
               <div class="ToolbarItems Underline_tool"></div>
           </li>
        </ul>
        </div>
        <script>
        //overflowClose event for Toolbar
         $("#toolbar1").ejToolbar({
         overflowClose: function (args) {}
        });
        </script>