ejmButton

5 Jun 202318 minutes to read

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>