jQWidgets Forums
jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › CHANGE ASPECT BUTTON
Tagged: Angular menu, bootstrap menu, JavaScript Menu, jQuery Menu, jqwidgets menu, jqxMenu with dropdowns
This topic contains 2 replies, has 2 voices, and was last updated by pepe 8 years, 7 months ago.
-
AuthorCHANGE ASPECT BUTTON Posts
-
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>
Hi pepe,
have a look at this example:
https://www.jseditor.io/?key=xb-menuBest Regards,
ChristopherjQWidgets Team
http://www.jqwidgets.comthanks for the reply Christopher.
-
AuthorPosts
You must be logged in to reply to this topic.