ejButton

11 Jul 201821 minutes to read

Custom Design for HTML Button control.

Syntax

JAVASCRIPT

$(element).ejButton(options)

Name	Type	Description
options	object	settings for button

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Create Button
        $('#button1').ejButton();       
        </script>

Requires

• module:jQuery

• module:ej.core.js

• module:ej.button.js

Members

contentType enum

Specifies the contentType of the Button. See below to know available ContentType

Name	Description
TextOnly	To display the text content only in button
ImageOnly	To display the image only in button
ImageBoth	Supports to display image for both ends of the button
TextAndImage	Supports to display image with the text content
ImageTextImage	Supports to display image with both ends of the text

Default Value

• ej.ContentType.TextOnly

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the button contentType on initialization.                        
                $("#button1").ejButton({  contentType : ej.ContentType.ImageOnly,prefixIcon: "e-icon e-handup" });                    
        </script>

cssClass string

Sets the root CSS class for Button theme, which is used customize.

Default Value

• ””

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the cssClass during initialization.                      
                $("#button1").ejButton({  cssClass : "gradient-lime" });                        
        </script>

enabled boolean

Specifies the button control state.

Default Value

• true

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Disable Button on initialization. 
                $("#button1").ejButton({ enabled:false });       
        </script>

enableRTL boolean

Specify the Right to Left direction to button

Default Value

• false

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the enableRTL during initialization.                     
                $("#button1").ejButton({ enableRTL : true });        
        </script>

height number

Specifies the height of the Button.

Default Value

• 28

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //To set height API value during initialization  
                $("#button1").ejButton({ height:"30px" });      
        </script>

htmlAttributes object

It allows to define the characteristics of the Button control. It will helps to extend the capability of an HTML element.

Default Value

• {}

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set HtmlAttributes to Button on initialization. 
                $("#button1").ejButton({htmlAttributes : {disabled:"disabled"}});       
        </script>

imagePosition enum

Specifies the image position of the Button. This image position is applicable only with the textandimage contentType property. The images can be positioned in both imageLeft and imageRight options. See below to know about available ImagePosition

Name	Description
ImageRight	support for aligning text in left and image in right
ImageLeft	support for aligning text in right and image in left
ImageTop	support for aligning text in bottom and image in top.
ImageBottom	support for aligning text in top and image in bottom

Default Value

• ej.ImagePosition.ImageLeft

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the image position for button during initialization.                     
                $("#button1").ejButton(
        {
        contentType: ej.ContentType.TextAndImage,
        imagePosition: ej.ImagePosition.ImageRight,
                prefixIcon: "e-icon e-handup" //Specifies the primary icon for Button
        });     
        </script>

prefixIcon string

Specifies the primary icon for Button. This icon will be displayed from the left margin of the button.

NOTE

This is applicable for the content type’s imageonly, textandimage, imagetextimage and imageboth.

Default Value

• null

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the primary icon during initialization.                  
                $("#button1").ejButton(
        {
            contentType: "imageonly",
            prefixIcon: "e-icon e-handup"
        });            
        </script>

repeatButton boolean

Convert the button as repeat button. It raises the ‘Click’ event repeatedly from the it is pressed until it is released.

Default Value

• false

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Create repeat button during initialization.                  
                $("#button1").ejButton({  repeatButton : true });
        </script>

showRoundedCorner boolean

Displays the Button with rounded corners.

Default Value

• false

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the showRoundedCorner during initialization.                     
                $("#button1").ejButton({  showRoundedCorner : true });                  
        </script>

size enum

Specifies the size of the Button. See below to know available ButtonSize

Name	Description
Normal	Creates button with Built-in default size height, width specified
Mini	Creates button with Built-in mini size height, width specified
Small	Creates button with Built-in small size height, width specified
Medium	Creates button with Built-in medium size height, width specified
Large	Creates button with Built-in large size height, width specified

Default Value

• ej.ButtonSize.Normal

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //To set size API value during initialization  
                $("#button1").ejButton({  size: ej.ButtonSize.Mini});   
        </script>

suffixIcon string

Specifies the secondary icon for Button. This icon will be displayed from the right margin of the button.

NOTE

This is applicable for the content type’s imagetextimage and imageboth.

Default Value

• null

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the secondary icon during initialization.                        
                $("#button1").ejButton(
        {
            contentType: "imageboth",
            suffixIcon: "e-icon e-file-html",
            prefixIcon: "e-icon e-search",
            text: "FileSearch"
        });            
        </script>

text string

Specifies the text content for Button.

Default Value

• null

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set the button text on initialization.                       
                $("#button1").ejButton({  text: "Hello Word" });
        </script>

timeInterval string

Specified the time interval between two consecutive ‘click’ event on the button.

NOTE

This is applicable for while the button in repeat button mode.

Default Value

• “150”

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Set interval during initialization.                  
                $("#button1").ejButton({  
                                repeatButton : true,
                                timeInterval : "100" });
        </script>

type enum

Specifies the Type of the Button. See below to know available ButtonType

Name	Description
Button	Creates button with Built-in button type specified
Reset	Creates button with Built-in reset type specified
Submit	Creates button with Built-in submit type specified

Default Value

• ej.ButtonType.Submit

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //To set type API value during initialization  
                $("#button1").ejButton({type: ej.ButtonType.Submit});   
        </script>

width string | number

Specifies the width of the Button.

Default Value

• “100px”

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //To set width API value during initialization  
                $("#button1").ejButton({width: "150px"});       
        </script>

Methods

destroy()

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

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Create Button
        $("#button1").ejButton();
        var btnObj = $("#button1").data("ejButton");
        btnObj.destroy(); // destroy the button
        </script>

HTML

<button id="button1">Button</button> 
        
        <script>
        // enable the button
        $("#button1").ejButton();
        $("#button1").ejButton("destroy");      
        </script>

disable()

To disable the button

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Create Button
        $("#button1").ejButton();
        var btnObj = $("#button1").data("ejButton");
        btnObj.disable(); // disable the button
        </script>

HTML

<button id="button1">Button</button> 
        
        <script>
        // disable the button
        $("#button1").ejButton();
        $("#button1").ejButton("disable");      
        </script>

enable()

To enable the button

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        // Create Button
        $("#button1").ejButton();
        var btnObj = $("#button1").data("ejButton");
        btnObj.enable(); // enable the button
        </script>

HTML

<button id="button1">Button</button> 
        
        <script>
        // enable the button
        $("#button1").ejButton();
        $("#button1").ejButton("enable");       
        </script>

Events

click

Fires when Button control is clicked successfully.Consider the scenario to perform any validation,modification of content or any other operations click on button,we can make use of this click event to achieve the scenario.

Name	Type	Description
cancel	boolean	if the event should be canceled; otherwise, false.
model	object	returns the button model
type	string	returns the name of the event
status	boolean	return the button state
e	object	return the event model for sever side processing.

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //click event for button
        $("#button1").ejButton({
        click: function (args) {
        // Write a code block to perform operation while click on button.
        }
        });
        </script>

create

Fires after Button control is created.If the user want to perform any operation after the button control creation then the user can make use of this create event.

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

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //create event for button
        $("#button1").ejButton({
        create: function (args) {
        // Write a code block to perform operation after creating the button.
        }
        });
        </script>

destroy

Fires when the button is destroyed successfully.If the user want to perform any operation after the destroy button control then the user can make use of this destroy event.

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

Example

HTML

<button id="button1">Button</button> 
        
        <script>
        //destroy event for button
        $("#button1").ejButton({
        destroy: function (args) {
        // Write a code block to perform operation after destroy the button.
        }
        });
        </script>