jQWidgets Forums

jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › focus on the toggle button

Tagged: , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    focus on the toggle button Posts
  • July 26, 2016 at 2:13 pm focus on the toggle button #86072

    pepe
    Participant

    the buttontoggles to receive focus not show it visually?.

    I use the tab key to move from button to button to receive focus that shows visually but not so with the buttontoggle .

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>jQuery Button Sample1</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.bootstrap.css” type=”text/css” />

    <script type=”text/javascript” src=”../../scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>

    </head>
    <body class=’default’>
    <div id=’content’>
    <script type=”text/javascript”>
    $(document).ready(function () {

    $(“#jqxButton1”).jqxButton({
    theme: ‘bootstrap’,
    width: ‘150’,
    height: ’25’
    });

    $(“#jqxButton2”).jqxToggleButton({
    theme: ‘bootstrap’,
    width: ‘150’,
    height: ’25’,

    });

    $(“#jqxButton3”).jqxButton({
    theme: ‘bootstrap’,
    width: ‘150’,
    height: ’25’
    });

    $(“#jqxButton1”).on(‘click’, function () {
    alert(‘Button1 Clicked’);
    });

    $(“#jqxButton2”).on(‘click’, function () {
    alert(‘Button2 Clicked’);
    });

    $(“#jqxButton3″).on(‘click’, function () {
    alert(‘Button3 Clicked’);
    });

    $(‘#jqxButton1′).focus();

    });
    </script>
    <div style=’width: 150px;’ id=’jqxWidget’>
    <div>
    <input type=”button” id=’jqxButton1′ value=”Button1″ />
    </div>
    <div>
    <input style=’margin-top: 20px;’ type=”button” id=’jqxButton2′ value=”Button2″ />
    </div>
    <div>
    <input style=’margin-top: 20px;’ type=”button” id=’jqxButton3′ value=”Button3″ />
    </div>
    </div>
    </div>
    </body>
    </html>

    a greeting.

    July 27, 2016 at 7:22 am focus on the toggle button #86086

    Christopher
    Participant

    Hi pepe,

    In order to see the ToggleButton’s outline when being focused you can apply the property “border-color” to the element’s “focus” state in your CSS. Here is an example of how to do it:
    https://www.jseditor.io/?key=jqx-togglebutton

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    July 29, 2016 at 1:54 pm focus on the toggle button #86190

    pepe
    Participant

    Thank you very much Christopher

    a greeting

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

You must be logged in to reply to this topic.