Como fazer o meu menu aparecer?
13/08/2015
0
<!DOCTYPE html> <html lang="en"> <head> <meta name="keywords" content="jqxValidator, jQuery Validation, jQWidgets, Default Functionality" /> <meta name="description" content="jqxValidator is a plug-in which enables you to validate html forms. It has a set of built-in rules (required inputs, e-mail, SSN, ZIP, max value, min value, interval etc.) for validating the user input. You can also write a custom rule which will fit best to your requirements." /> <title id='Description'>Cadastro</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.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/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.js"></script> <link rel="stylesheet" href="jqwidgets/styles/jqx.energyblue.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.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/jqxexpander.js"></script> <script type="text/javascript" src="jqwidgets/jqxvalidator.js"></script> <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.js"></script> <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxmaskedinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="scripts/demos.js"></script> <style type="text/css"> </style> <script type="text/javascript"> $(document).ready(function() { // initialize validator. $('#testForm').jqxValidator({ rules : [ { input : '#nome', message : 'Coloque o nome!', action : 'keyup, blur', rule : 'required' }, { input : '#email', message : 'Coloque o email!', action : 'keyup, blur', rule : 'required' }, { input : '#email', message : 'Email invalido!', action : 'keyup', rule : 'email' }, { input : '#acceptInput', message : 'You have to accept the terms', action : 'change', rule : 'required', position : 'right:0,0' } ] }); }); </script> <style type="text/css"> .text-input { height: 100%; width: 100%; } .register-table { margin-top: center; margin-bottom: center; } .register-table td, .register-table tr { margin: 0px; padding: 2px; border-spacing: center; border-collapse: center; font-family: Verdana; font-size: 12px; } h3 { display: inline-block; margin: 100%; } </style> </head> <body > <div id='content'> <script type="text/javascript"> $(document) .ready( function() { var data = [ { "id" : "1", "text" : "Inicio", "parentid" : "-1", "subMenuWidth" : '250px' }, { "id" : "2", "text" : "Relatório", "parentid" : "-1", "subMenuWidth" : '250px' }, { "id" : "3", "parentid" : "-1", "text" : "Cadastro" }, ] // prepare the data var source = { datatype : "json", datafields : [ { name : 'id' }, { name : 'parentid' }, { name : 'text' }, { name : 'subMenuWidth' } ], id : 'id', localdata : data }; // create data adapter. var dataAdapter = new $.jqx.dataAdapter( source); // perform Data Binding. dataAdapter.dataBind(); // get the menu items. The first parameter is the item's id. The second parameter is the parent item's id. The 'items' parameter represents // the sub items collection name. Each jqxTree item has a 'label' property, but in the JSON data, we have a 'text' field. The last parameter // specifies the mapping between the 'text' and 'label' fields. var records = dataAdapter .getRecordsHierarchy('id', 'parentid', 'items', [ { name : 'text', map : 'label' } ]); $('#jqxWidget').jqxMenu({ source : records, height : 30, theme : "energyblue", width : '100%' }); $("#jqxWidget") .on( 'itemclick', function(event) { if (event.args.id == 1) { window.location = 'juncao.html'; } else { if (event.args.id == 2) { window.location = 'relatorio.html'; } else { if (event.args.id == 3) { window.location = 'cadastro.html'; } } } }); }); </script> <div id='jqxWidget'></div> <div style="margin-top: 50px; font-size: 13px; font-family: Verdana;" id="eventLog"></div> </div> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: center;"> <div id="jqxgrid"></div> </div> <form name="form1" method="post" action=""> <p> <div id="register" align="center"> <div> <form id="testForm" action="./"> <table class="register-table"> <tr> <td>Nome:</td> <td><input type="text" id="nome" placeholder="Fulano de Tal" class="text-input" /></td> </tr> <tr> <td>E-mail:</td> <td><input type="text" id="email" placeholder="someone@mail.com" class="text-input" /></td> </tr> <tr> <script type="text/javascript"> function Nova() { location.href = "juncao.html" } </script> <td colspan="2" style="text-align: center;"> <input style="background-color: #E0E9F5" name="salvar" type="button" id="sendButton" value="Salvar" /> <input style="background-color: #E0E9F5" name="voltar" type="reset" id="voltar" onClick="Nova()" value="Voltar"></td> </tr> </table> </form> </div> </div> </body> </html>
Lara
Posts
13/08/2015
Jothaz
Bom numa análise superficial vi que você faz referencia a ao Menu no Javascritp, mas não tem nenhum controle HTML para renderizá-los.
Deveria ter, por exemplo uma lista (<li>) com as opções e não somente a referencia no JavaScript.
<li>Services <ul> <li><a href="#">Home</a></li> <li><a href="#">Opção 1</a></li> <li><a href="#">Opção 2</a></li> </ul> </li>
Você baixou este exemplo ou desenvolveu?
Sugiro uma lida no site do produto para fixar os conceitos do uso do em jqxMenu
Espero ter ajudado, mas talvez outros usuários do fórum possam ajudar de forma mais tempestiva.
14/08/2015
Lara
As lib's estão nesse link: http://www.jqwidgets.com/download/.
Esse exemplo eu fiz com uma junção de 2 componentes. Sozinhos eles funcionam sem problemas mas quando junto os 2 o menu não aparece.
14/08/2015
Jothaz
As lib's estão nesse link: http://www.jqwidgets.com/download/.
Esse exemplo eu fiz com uma junção de 2 componentes. Sozinhos eles funcionam sem problemas mas quando junto os 2 o menu não aparece.
Eu sei que é possível baixar as lib´s, mas é um dificultador imenso para ajudar se temos de "criar o ambiente de teste". Se a referência estivesse na Web seria muito mais fácil ajdudar. Outra sugetão é você criar esta página no jsfiddle, pois assim qualquer um aqui do fórum pode acessar ajudar.
Não esta funcionando porque na junção ficou faltando algum detalehe. Como disse no poste anterior, não adianta você fazer referência ao menu sem um controle HTML com as opções do menu, por exemplo uma <LI>.
Reveja e entenda como os dois "componentes" devem funcionar para fazer a junção.
Clique aqui para fazer login e interagir na Comunidade :)