Button groups

@@adsense
Group type check (multi state)
Group type radio (one state)
Own style buttons
Declarative style

                <div data-role="group" data-group-type="multi-state" data-button-style="class">
                    <button class="button">1</button>
                    <button class="button">2</button>
                    <button class="button">3</button>
                </div>

                <div data-role="group" data-group-type="one-state">
                    <button class="button">1</button>
                    <button class="button">2</button>
                    <button class="button">3</button>
                </div>
JavaScript style

                <div id="button-group-1">
                    <button class="button">1</button>
                    <button class="button">2</button>
                    <button class="button">3</button>
                </div>

                <div id="button-group-2">
                    <button class="button">1</button>
                    <button class="button">2</button>
                    <button class="button">3</button>
                </div>

                <script>
                    $(function(){
                        $("#button-group-1").group({
                            groupType: 'multi-state'
                        });

                        $("#button-group-2").group({
                            groupType: 'one-state'
                        });
                    });
                </script>

Options

Parameter Data-* Type Default value Description
groupType data-group-type string one-state Type of group: one-state or multi-state
buttonStyle data-button-style string false Class for own style of buttons

Events

Event Data-* Params Description
onChange data-on-change (index, button) The event fired before button is change status. If return false, state not changed
onChanged data-on-change (index, button) The event fired after button change self status