ejmGroupButton

The Essential JavaScript Mobile GroupButton widget helps to display multiple buttons that stack together in a single line and appear as a navigation component.

Custom Design for HTML GroupButton control.

$(element).ejmGroupButton()

Example

  • html
  • <!-- Unobtrusive way of rendering with radio buttons -->    
        <div data-role="ejmgroupbutton">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
  • html
  • <!-- Unobtrusive way of rendering with checkboxes -->
        <div data-role="ejmgroupbutton">
            <label>
                <input type="checkbox" name="options">
                iPod
            </label>
            <label>
                <input type="checkbox" name="options">
                iPad
            </label>
        </div>
  • html
  • <!-- Unobtrusive way of rendering with buttons -->
        <div data-role="ejmgroupbutton">
            <button>iPod</button>
            <button>iPad</button>
        </div>
  • html
  • <!-- Obtrusive way of rendering with radio buttons -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton();
        </script>
  • html
  • <!-- Obtrusive way of rendering with checkboxes -->
        <div data-role="ejmgroupbutton">
            <label>
                <input type="checkbox" name="options">
                iPod
            </label>
            <label>
                <input type="checkbox" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton();
        </script>
  • html
  • <!-- Obtrusive way of rendering with buttons -->
        <div data-role="ejmgroupbutton">
            <button>iPod</button>
            <button>iPad</button>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton();
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    Members

    cssClass string

    Sets the root class for GroupButton theme. This cssClass API helps to use custom skinning option for GroupButton control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value

    • ””

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div data-role="ejmgroupbutton" data-ej-cssclass="customclass">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <style>
            .customclass * {
                color: red;
            }
        </style>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ cssClass: "customclass" });
        </script>
    
        <style>
            .customclass * {
                color: red;
            }
        </style>

    enablePersistence boolean

    Current model value to browser cookies for state maintenance. While refreshing the page, the model value applied from browser cookies retains.

    Default Value

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->    
        <div data-role="ejmgroupbutton" data-ej-enablepersistence="true">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ cssClass: "customclass" });
        </script>

    items string

    Renders the GroupButton using data source which contains array of items.

    Default Value

    • []

    Example

  • html
  • <!-- Unobtrusive way of rendering -->    
        <div data-role="ejmgroupbutton" data-ej-items="[{ text: 'iPod' }, { text: 'iPad' }]">
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn" data-role="ejmgroupbutton"></div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ items: [{ text: "iPod" }, { text: "iPad" }] });
        </script>

    renderMode enum

    Changes the rendering mode of the GroupButton. See RenderMode

    Default Value

    • “auto”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div data-role="ejmgroupbutton" data-ej-rendermode="android">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ renderMode: "android" });
        </script>

    selectedItemIndex number

    Specifies the item which one is to be selected initially.

    Default Value

    • 0

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div data-role="ejmgroupbutton" data-ej-selecteditemindex="1">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ selectedItemIndex: 1 });
        </script>

    Events

    select

    Event triggers when the select happens in the GroupButton

    Name Type Description
    argument Object Event parameters from GroupButton

    Name Type Description
    cancel boolean If the event should be canceled; otherwise, false.
    model boolean Returns the GroupButton model
    type boolean Returns the name of the event
    text boolean Returns the current button text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="grpbtn" data-role="ejmgroupbutton" data-ej-select="select">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            function select(args) { //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ select: "select" });
            function select(args) { //handle the event
            }
        </script>

    touchEnd

    Event triggers when the touchend happens in the GroupButton

    Name Type Description
    argument Object Event parameters from GroupButton

    Name Type Description
    cancel boolean If the event should be canceled; otherwise, false.
    model boolean Returns the GroupButton model
    type boolean Returns the name of the event
    text boolean Returns the selected button text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="grpbtn" data-role="ejmgroupbutton" data-ej-touchend="touchend">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            function touchend(args) { //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ touchEnd: "touchend" });
            function touchend(args) { //handle the event
            }
        </script>

    touchStart

    Event triggers when the touchstart happens in the GroupButton

    Name Type Description
    argument Object Event parameters from GroupButton

    Name Type Description
    cancel boolean If the event should be canceled; otherwise, false.
    model boolean Returns the GroupButton model
    type boolean Returns the name of the event
    text boolean Returns the current button text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div id="grpbtn" data-role="ejmgroupbutton" data-ej-touchstart="touchstart">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            function touchstart(args) { //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div id="grpbtn">
            <label>
                <input type="radio" name="options">
                iPod
            </label>
            <label>
                <input type="radio" name="options">
                iPad
            </label>
        </div>
    
        <script>
            $("#grpbtn").ejmGroupButton({ touchStart: "touchstart" });
            function touchstart(args) { //handle the event
            }
        </script>