jQWidgets Forums

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 #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>

    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

    CHANGE ASPECT BUTTON #85982

    pepe
    Participant

    thanks for the reply Christopher.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.