jQWidgets Forums

jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › CHANGE ASPECT BUTTON

Tagged: , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    CHANGE ASPECT BUTTON Posts
  • July 20, 2016 at 2:57 pm CHANGE ASPECT BUTTON #85911

    pepe
    Participant

    Hello, I would like to make the buttons while not having the focus planes look and once pass the mouse over or press the normal button display, such as the jqxtree.

    Thank you

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title>The jqxMenu</title>

    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.web.css” type=”text/css” />

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

    <script type=”text/javascript”>

    $(document).ready(function () {

    $(“#jqxMenu”).jqxMenu({
    width: ‘650’,
    height: ’45px’,
    autoOpen: false,
    autoCloseOnMouseLeave: false,
    showTopLevelArrows: true
    });

    $(“#jqxMenu”).css(‘visibility’, ‘visible’);

    $(“#anadir”).jqxToggleButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    $(“#modificar”).jqxToggleButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    $(“#anterior”).jqxButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    $(“#buscar”).jqxToggleButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    $(“#siguiente”).jqxButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    $(“#eliminar”).jqxToggleButton({
    theme: ‘web’,
    width: 90,
    height: 35,
    textPosition: “center”,
    });

    });

    </script>

    </head>

    <body>
    <div id=’jqxMenu’ style=’visibility: hidden; margin-left: 20px;’>

    <div>
    <input type=”button” id=’anadir’ value=’AÑADIR’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    <div>
    <input type=”button” id=’modificar’ value=’MODIFICAR’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    <div>
    <input type=”button” id=’anterior’ value=’ANTERIOR’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    <div>
    <input type=”button” id=’buscar’ value=’BUSCAR’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    <div>
    <input type=”button” id=’siguiente’ value=’SIGUIENTE’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    <div>
    <input type=”button” id=’eliminar’ value=’ELIMINAR’ style=’margin-top: 3px; margin-left: 3px; padding: 2px; float: left;’>
    </div>

    </div>
    </body>

    </html>

    July 21, 2016 at 11:06 am CHANGE ASPECT BUTTON #85935

    Christopher
    Participant

    Hi pepe,

    have a look at this example:
    https://www.jseditor.io/?key=xb-menu

    Best Regards,
    Christopher

    jQWidgets Team
    http://www.jqwidgets.com

    July 23, 2016 at 9:33 pm CHANGE ASPECT BUTTON #85982

    pepe
    Participant

    thanks for the reply Christopher.

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

You must be logged in to reply to this topic.