ejToolbar

11 Jul 201824 minutes to read

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>