ejSplitButton

The Split button allows you to perform an action using clicking the button and choosing extra options from the dropdown button. The Split button also can display both text and images.

Syntax

  • javascript
  • $(element).ejSplitButton()

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    // simple control creation
     $("#splitButton").ejSplitButton({targetID:"target",width:100});
    </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.data.js

    • module:ej.splitbutton.js

    • module:ej.menu.js

    • module:ej.checkbox.js

    NOTE

    jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

    Members

    arrowPosition string|enum

    Specifies the arrowPosition of the Split or Dropdown Button.See arrowPosition

    Name Description
    Left To set Left arrowPosition of the split button
    Right To set Right arrowPosition of the split button
    Top To set Top arrowPosition of the split button
    Bottom To set Bottom arrowPosition of the split button

    Default Value

    • ej.ArrowPosition.Right

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set arrowPosition API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100, contentType: ej.ContentType.TextAndImage,
      buttonMode: ej.ButtonMode.Dropdown, arrowPosition: ej.ArrowPosition.Left, prefixIcon:"e-uiLight e-icon e-handup"});
    </script>

    buttonMode string|enum

    Specifies the buttonMode like Split or Dropdown Button.See ButtonMode

    Name Description
    Split To specify Split mode of the button type
    Dropdown To specify Dropdown mode of the button type

    Default Value

    • ej.ButtonMode.Split

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set buttonMode API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100, contentType: ej.ContentType.TextAndImage,
      buttonMode: ej.ButtonMode.Dropdown, prefixIcon:"e-uiLight e-icon e-handup"});
    </script>

    contentType string|enum

    Specifies the contentType of the Split Button.See ContentType

    Name Description
    TextOnly To specify the text contentType
    ImageOnly To specify the image contentType
    ImageBoth To specify the two images of contentType
    TextAndImage To specify the Text and Image contentType
    ImageTextImage To specify the image text and image contentType

    Default Value

    • ej.ContentType.TextOnly

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script> 
    //To set contentType API value during initialization  
    $("#splitButton").ejSplitButton({ targetID: "target",width:100, contentType:  ej.ContentType.TextOnly}); 
    </script>

    cssClass string

    Set the root class for Split Button control theme

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set cssClass API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100,cssClass: "gradient-lime"});
    </script>

    enabled boolean

    Specifies the disabling of Split Button if enabled is set to false.

    Default Value

    • true

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set enabled API value during initialization  
    $("#splitButton").ejSplitButton({  targetID: "target",width:100,enabled:  true });          
    </script>

    enableRTL boolean

    Specifies the enableRTL property for Split Button while initialization.

    Default Value

    • false

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set enableRTL API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100,enableRTL : true});
    </script>

    height string|number

    Specifies the height of the Split Button.

    Default Value

    • “”

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script> 
    //To set height API value during initialization  
    $("#splitButton").ejSplitButton({  targetID: "target",width:100,height: 28 });                       
    </script>

    htmlAttributes object

    Specifies the HTML Attributes of the Split Button.

    Default Value

    • {}

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script> 
    //To set htmlAttributes API value during initialization  
    $("#splitButton").ejSplitButton({  htmlAttributes : {disabled:"disabled"} });                       
    </script>

    imagePosition string|enum

    Specifies the imagePosition of the Split Button.See imagePositions

    Name Description
    ImageRight To specify Left position of the split button
    ImageLeft To specify Right position of the split button
    ImageTop To specify Top position of the split button
    ImageBottom To specify Bottom position of the split button

    Default Value

    • ej.ImagePosition.ImageRight

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set imagePositions API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100, contentType: ej.ContentType.TextAndImage,
      imagePosition: ej.ImagePosition.ImageRight,prefixIcon:"e-uiLight e-icon e-handup"});
    </script>

    prefixIcon string

    Specifies the image content for Split Button while initialization.

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set prefixIcon API value during initialization  
    $("#splitButton").ejSplitButton({targetID: "target",width:100,contentType: "imageonly",prefixIcon:"e-uiLight e-icon e-handup" });
    </script>

    showRoundedCorner boolean

    Specifies the showRoundedCorner property for Split Button while initialization.

    Default Value

    • false

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set showRoundedCorner API value during initialization  
    $("#splitButton").ejSplitButton({ targetID:"target",width:100,showRoundedCorner: true});
    </script>

    size string|enum

    Specifies the size of the Button. See ButtonSize

    Name Description
    Mini To specify the minimum size of the split button
    Small To specify the small size of the split button
    Medium To specify the medium size of the split button
    Large To specify the large size of the split button
    Normal To specify the normal size of the split button

    Default Value

    • ej.ButtonSize.Normal

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set size API value during initialization  
            $("#splitButton").ejSplitButton({ targetID:"target",width:100, size: ej.ButtonSize.Mini});                  
    </script>

    suffixIcon string

    Specifies the image content for Split Button while initialization.

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set suffixIcon API value during initialization  
    $("#splitButton").ejSplitButton({targetID:"target",width:100,contentType:"imageboth",prefixIcon:"e-uiLight e-icon-handup",suffixIcon:"e-uiLight e-icon-padlockclosed"});
    </script>

    targetID string

    Specifies the list content for Split Button while initialization

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set targetID API value during initialization  
    $("#splitButton").ejSplitButton({targetID:"target",width:100 });
    </script>

    NOTE

    Usage of target API is recommended since targetID API is to be deprecated.

    target string

    Specifies the target of splitbutton menu while initialization with ID or class as a selector.

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set target API value during initialization  
    $("#splitButton").ejSplitButton({target:"#target",width:100 });
    </script>

    text string

    Specifies the text content for Split Button while initialization.

    Default Value

    • ””

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set text API value during initialization  
    $("#splitButton").ejSplitButton({  targetID: "target",width:100, text: "New" });             
    </script>

    width string|number

    Specifies the width of the Split Button.

    Default Value

    • “”

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To set width API value during initialization  
    $("#splitButton").ejSplitButton({  targetID: "target",width:100 });                 
    </script>

    Methods

    destroy()

    Destroy the split button widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Destroy the Split Button control.          
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    var splitObject=$("#splitButton").data("ejSplitButton");
    splitObject.destroy();
    </script>
  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    // to destroy the button                
    $("#splitButton").ejSplitButton({targetID: "target",width:100});    
    $("#splitButton").ejSplitButton("destroy");
    </script>

    disable()

    To disable the split button

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Disable the Split Button control.          
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    var splitObject=$("#splitButton").data("ejSplitButton");
    splitObject.disable();
    </script>
  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Disable the Split Button control.          
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    $("#splitButton").ejSplitButton("disable");
    </script>

    enable()

    To Enable the split button

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Enable the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    var splitObject=$("#splitButton").data("ejSplitButton");
    splitObject.enable();
    </script>
  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Enable the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    $("#splitButton").ejSplitButton("enable");
    </script>

    hide()

    To hide the list content of the split button.

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Hide the list content of the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    var splitObject=$("#splitButton").data("ejSplitButton");
    splitObject.hide();
    </script>
  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To hide the list content of the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    $("#splitButton").ejSplitButton("hide");
    </script>

    show()

    To show the list content of the split button.

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To Show the list content of the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    var splitObject=$("#splitButton").data("ejSplitButton");
    splitObject.show();
    </script>
  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //To show the list content of the Split Button control.           
    $("#splitButton").ejSplitButton({targetID: "target",width:100});
    $("#splitButton").ejSplitButton("show");
    </script>

    Events

    beforeOpen

    Fires before menu of the split button control is opened.

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    // beforeOpen event for menu of split button control
     $("#splitButton").ejSplitButton({targetID: "target",width:100,
      beforeOpen: function (args) {}});
    </script>

    click

    Fires when Button control is clicked successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    target object returns the target of the current object.
    status boolean return the button state

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //click event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         click: function (args) {}
    });
    </script>

    close

    Fires before the list content of Button control is closed

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //close event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         close: function (args) {}
    });
    </script>

    create

    Fires after Split Button control is created.

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //create event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         create: function (args) {}
    });
    </script>

    destroy

    Fires when the Split Button is destroyed successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //destroy event for split button
    $("#splitButton"). ejSplitButton ({
                   targetID: "target",width:100,
         destroy: function (args) {}
    });
    </script>

    itemMouseOut

    Fires when a menu item is Hovered out successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    event object returns the event
    Name Type Description
    ID String return the menu item id
    Text String return the clicked menu item text

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //itemMouseOut event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         itemMouseOut: function (args) {}
    });
    </script>

    itemMouseOver

    Fires when a menu item is Hovered in successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    event object returns the event
    Name Type Description
    ID String return the menu item id
    Text String return the clicked menu item text

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //itemMouseOver event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         itemMouseOver: function (args) {}
    });
    </script>

    itemSelected

    Fires when a menu item is clicked successfully

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event
    element object returns the clicked menu item element
    selectedItem object returns the selected item
    menuId String return the menu id
    menuText String return the clicked menu item text

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //itemSelected event for split button
    $("#splitButton"). ejSplitButton ({
                   targetID: "target",width:100,
         itemSelected: function (args) {}
    });
    </script>

    open

    Fires before the list content of Button control is opened

    Name Type Description
    cancel boolean returns the cancel option value
    model object returns the split button model
    type string returns the name of the event

    Example

  • html
  • <button id="splitButton">File</button>
    <ul id="target">
       <li><a href="#">Open..</a></li>
       <li><a href="#">Save</a></li>
       <li><a href="#">Delete</a></li>
    </ul>
    <script>
    //open event for split button
    $("#splitButton"). ejSplitButton ({
                    targetID: "target",width:100,
         open: function (args) {}
    });
    </script>