ejSplitButton

11 Jul 201824 minutes to read

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>

ejSplitButton

Syntax

Example

Requires

Members

arrowPosition string|enum

Default Value

Example

buttonMode string|enum

Default Value

Example

contentType string|enum

Default Value

Example

cssClass string

Default Value

Example

enabled boolean

Default Value

Example

enableRTL boolean

Default Value

Example

height string|number

Default Value

Example

htmlAttributes object

Default Value

Example

imagePosition string|enum

Default Value

Example

prefixIcon string

Default Value

Example

showRoundedCorner boolean

Default Value

Example

size string|enum

Default Value

Example

suffixIcon string

Default Value

Example

targetID string

Default Value

Example

target string

Default Value

Example

text string

Default Value

Example

width string|number

Default Value

Example

Methods

destroy()

Example

disable()

Example

enable()

Example

hide()

Example

show()

Example

Events

beforeOpen

Example

click

Example

close

Example

create

Example

destroy

Example

itemMouseOut

Example

arrowPosition `string|enum`

buttonMode `string|enum`

contentType `string|enum`

cssClass `string`

enabled `boolean`

enableRTL `boolean`

height `string|number`

htmlAttributes `object`

imagePosition `string|enum`

prefixIcon `string`

showRoundedCorner `boolean`

size `string|enum`

suffixIcon `string`

targetID `string`

target `string`

text `string`

width `string|number`