ejButton

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>