Como fazer o meu menu aparecer?
Estou tentando criar esse cadastro mas não consigo fazer o menu aparecer de nenhum jeito. Por favor me ajudem.
<!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
Curtidas 0
Respostas
Jothaz
13/08/2015
Olha é quase impossível dar alguma sugestão por que você faz referência a umas 20 lib´s do jQuery. Então se eu rodar localmente não tenho acesso aos recursos do jQuery e portanto nada vai funcionar mesmo. Então o mais fácil seria você publicar a página em algum host para podermos analisá-la e verificar o que esta acontecendo. Ou fazer referencia as jQuery no link online do produto, assim em qualquer lugar que rodar vai funcionar.
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.
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.
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.
GOSTEI 0
Lara
13/08/2015
Oi 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.
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.
GOSTEI 0
Jothaz
13/08/2015
Oi 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.
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.
GOSTEI 0