ejmButton

Custom Design for HTML Button control.

$(element).ejmButton();

Example

Button:

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" />
    
        <script>
    
            $("#button").ejmButton();
        </script>

    ActionLink:

  • html
  • <!-- Unobtrusive way of rendering -->
        <a id="button" data-role="ejmactionlink" ></a>
  • html
  • <!-- Obtrusive way of rendering -->
        <a id="button"></a>
    
        <script>
    
            $("#button").ejmActionLink();
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.touch

    Members

    color

    Section for color specific functionalities.

    color.border string

    Specifies the color border to Button outer border.

    Default value

    • “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-color-border="red" />
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input id="button" type="button" />
        <script>
            $("#button").ejmButton({ color: { border: "red" } })
        </script>

    color.fill string

    Specifies the color fill to Button background color.

    Default value

    • “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-color-fill="red" />
  • html
  • <!-- Obtrusive way of rendering --> 
        <input id="button" type="button" />
        <script>
            $("#button").ejmButton({ color: { fill: "red" } })
        </script>

    color.text string

    Specifies the color text to Button text

    Default value

    • “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-color-text="red" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" />
    
        <script>
            $("#button").ejmButton({ color: { text: "red" } })
        </script>

    contentType enum

    Specifies the contentType of the Button. See ButtonContentType

    Default Value

    • ej.mobile.Button.ContentType.Text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <button id="button1" type="button" data-role="ejmbutton" data-ej-contenttype="image" data-ej-imageclass="e-m-icon-settings"></button>
  • html
  • <!-- Obtrusive way of rendering -->
        <button id="button1" type="button"></button>
    
        <script>
    
            $("#button1").ejmButton({ contentType: ej.mobile.Button.ContentType.Image, imageClass: "e-m-icon-settings" });
    
        </script>

    cssClass string

    The root class for the Button widget to customize the existing theme

    Default value

    “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <style>
            .customize {
                width: 300px;
            }
        </style>
        <input id="button" type="button" data-role="ejmbutton" data-ej-cssclass="customize" />
  • html
  • <!-- Obtrusive way of rendering --> 
    
        <style>
            .customize {
                width: 300px;
            }
        </style>
        <input id="button" type="button" />
        <script>
            $("#button").ejmButton({ cssClass: "customize" })
        </script>

    enabled boolean

    Specifies whether to enable or disable the control.

    Default value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-enabled="false" />
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input id="button" type="button"/>
        <script>
    
            $("#button").ejmButton({ enabled: false })
        </script>

    enablePersistence boolean

    Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true. While refreshing the page, it retains the model value from browser cookies or local storage.

    NOTE

    Local storage is supported only in Html5 supported browsers. If the browsers don’t have support for local storage, browser cookies will be used to maintain the state.

    Default value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    
        <input id="button" type="button" data-role="ejmbutton" data-ej-enablepersistence="true" />
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input type="button" id="button" />
    
        <script>
    
            $("#button").ejmButton({ enablePersistence: true });
    
        </script>

    enableRippleEffect boolean

    Specifies whether to enable or disable ripple effect.

    Default value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    
        <div style="width:auto;height:auto;position:absolute;">
            <input id="button" type="button" data-role="ejmbutton" data-ej-enablerippleeffect="true" />
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
    
        <div style="width:auto;height:auto;position:absolute;">
            <input id="button" type="button" />
        </div>
        <script>
    
            $("#button").ejmButton({ enableRippleEffect: true })
        </script>

    href string

    Specifies the href of action link Button

    NOTE

    This property is only applicable to ejmActionLink

    Default value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <a id="button" data-role="ejmactionlink" data-ej-text="MicroSoft" data-ej-href="https://www.microsoft.com"></a>
  • html
  • <!-- Obtrusive way of rendering -->
        <a id="button"></a>
    
        <script>
            $("#button").ejmActionlink({ href: "https://www.microsoft.com", text: "MicroSoft" })
        </script>

    imageClass string

    Specifies the css class of image.

    NOTE

    This property is only applicable when Button control is render with HTML button tag.

    Default value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <button id="button" data-role="ejmbutton" data-ej-contenttype="image" data-ej-imageclass="e-m-icon-settings"></button>
  • html
  • <!-- Obtrusive way of rendering -->
    
        <button id="button"></button>
    
        <script>
            $("#button").ejmButton({ contentType: ej.mobile.Button.ContentType.Image, imageClass: "e-m-icon-settings" })
        </script>

    imagePosition enum

    Specifies the position of image. See ButtonImagePosition

    NOTE

    This property is only applicable when render the Button control with HTML button tag and contentType property set as “both”

    Default value

    • ej.mobile.Button.ImagePosition.Left

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    
        <style>
            .chat {
                background-image: url(chat.png);
            }
        </style>
    
        <button id="button" data-role="ejmbutton" data-ej-contenttype="both" data-ej-imageclass="chat" data-ej-imageposition="right"></button>
  • html
  • <!-- Obtrusive way of rendering -->
        <style>
            .chat {
                background-image: url(chat.png);
            }
        </style>
    
        <button id="button"></button>
    
        <script>
            $("#button").ejmButton({ contentType: ej.mobile.Button.ContentType.Both, imageClass: "chat",imagePosition:ej.mobile.Button.ImagePosition.Right })
        </script>

    locale string

    Set the localization culture for Button Widget.

    Default value

    • “en-US”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-locale="en-US" />
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input id="button" type="button" />
        <script>
            $("#button").ejmButton({ locale: "en-US" })
        </script>

    renderMode enum

    Specifies the rendering mode of the control. See RenderMode

    Default value

    • auto

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" />
        <script>
    
            $("#button").ejmButton({ renderMode: "android" })
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input id="button" type="button" data-role="ejmbutton" data-ej-rendermode="android" />

    showBorder boolean

    Displays the Button with outer border.

    Default value

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-showborder="false" />
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" />
    
        <script>
    
            $("#button").ejmButton({ showBorder: false })
        </script>

    style enum

    Specifies the style of the control. See ButtonStyle

    Default value

    • normal

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" />
        <script>
            $("#button").ejmButton({ style: "large" })
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-style="large" />

    text string

    Specifies the text to Button

    Default value

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-text="Download"/>
  • html
  • <!-- Obtrusive way of rendering -->
    
        <input id="button" type="button" />
        <script>
    
            $("#button").ejmButton({ text: "Download" })
        </script>

    Methods

    disable()

    To disable the button.

    Example

  • html
  • <input id="button" type="button" data-role="ejmbutton" />
    
        <script>
    
            $(function () {
    
                var button = $("#button").data("ejmButton");
    
                button.disable(); 
    
            });
    
        </script>
  • html
  • <input id="button" type="button" data-role="ejmbutton" />
    
        <script>
    
            $(function () {
    
                var button = $("#button").ejmButton("disable"); 
    
            });
    
        </script>

    enable()

    To enable the Button.

    Example

  • html
  • <input id="button" type="button" data-role="ejmbutton"  />
    
        <script>
    
            $(function () {
    
                var button = $("#button").data("ejmButton");
    
                button.enable(); 
    
            });
    
        </script>
  • html
  • <input id="button" type="button" data-role="ejmbutton" />
    
        <script>
    
            $(function () {
    
                var button = $("#button").ejmButton("enable"); 
    
            });
    
        </script>

    Events

    touchEnd

    Event triggers when touch end happens on the control.

    Name Type Description
    arguments object Event parameters from Button.

    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 Returns the Button state.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-touchend="touchend" />
    
        <script>
            
            function touchend(args) {
                //handle the event
            }
    
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" />
    
        <script>
    
            $("#button").ejmButton({
    
                touchEnd: function (args) {
                    //handling the event
                }
    
            });
    
        </script>

    touchStart

    Event triggers when touch start happens on the control.

    Name Type Description
    arguments object Event parameters from Button.

    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 Returns the Button state.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <input id="button" type="button" data-role="ejmbutton" data-ej-touchstart="touchstart" />
        <script>
            function touchstart(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="button" type="button" />
    
        <script>
    
            $("#button").ejmButton({
    
                touchEnd: function (args) {
                    //handling the event
                }
    
            });
        </script>