jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Template on jqxButtonGroup

Tagged: , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  pribadip 9 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Template on jqxButtonGroup Posts
  • April 17, 2015 at 5:09 pm Template on jqxButtonGroup #70019

    pribadip
    Participant

    Hi,
    Is it possible to add template on jqxButtonGroup (Button Group)?
    So at the Button Group there are several buttons with different colors (primary, info, success, warning, danger, inverse).
    Thank you.

    April 20, 2015 at 6:54 am Template on jqxButtonGroup #70043

    ivailo
    Participant

    You can access all the buttons via their IDs.
    If the buttons don’t have IDs You must create them.

    Below is shown the way to make the relation betwen IDs and templates.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>

</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButtonGroup.
                $("#jqxWidget").jqxButtonGroup({ mode: 'default' });
                // Add templates to the jqxButtons.
                $("#Left").jqxButton({ template: "info" });
                $("#Center").jqxButton({ template: "success" });
                $("#Right").jqxButton({ template: "warning" });
            });
        </script>
        <div id='jqxWidget'>
            <button style="padding:4px 16px;" id="Left">
                Left
            </button>
            <button style="padding:4px 16px;" id="Center">
                Center
            </button>
            <button style="padding:4px 16px;" id="Right">
                Right
            </button>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Ivaylo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    April 26, 2015 at 3:53 pm Template on jqxButtonGroup #70263

    pribadip
    Participant

    Hi Ivaylo, thanks for your response.
    It’s great example. But perhaps we need to add pressed style for template button. Because it seems template button does not have pressed style. So it looks like there is no difference pressed or not. I mean in case we use mode ‘radio’ or ‘checkbox’.

    Best Regards,
    Pribadi Pamungkas

    April 27, 2015 at 6:14 am Template on jqxButtonGroup #70270

    ivailo
    Participant

    Hi Pribadi Pamungkas,

    You can add some CSS styles to detect when some button is pressed and then change the style.

    Here is an example.

    <!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The jqxButtonGroup widget creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.</title>
    <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttongroup.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>

    <style>
        .jqx-group-button-pressed.jqx-success {
           background-color: #ff0000 !important;
            color: #aaaaaa !important;
            background-image: none !important;
        }
    </style>

</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButtonGroup.
                $("#jqxWidget").jqxButtonGroup({ mode: 'checkbox' });
                // Add templates to the jqxButtons.
                $("#Left").jqxButton({ template: "success" });
                $("#Center").jqxButton({ template: "success" });
                $("#Right").jqxButton({ template: "success" });
            });
        </script>
        <div id='jqxWidget'>
            <button style="padding:4px 16px;" id="Left">
                Left
            </button>
            <button style="padding:4px 16px;" id="Center">
                Center
            </button>
            <button style="padding:4px 16px;" id="Right">
                Right
            </button>
        </div>
    </div>
</body>
</html>

    Best Regards,
    Ivaylo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

    May 3, 2015 at 6:03 am Template on jqxButtonGroup #70551

    pribadip
    Participant

    Thank you

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.