Tutorial: Aplicação Blank

Neste exemplo irá ser criado uma aplicação do tipo Blank, onde nele será utilizado um código jquery, de exemplo, para criar um menu accordion.

Criando a aplicação Blank

1. Crie uma nova aplicação do tipo Blank, informe um nome e finalize a criação.

2. Dentro do evento onExecute, coloque o seguinte código.

$sSQL = "SELECT CategoryName,Description FROM categories";
sc_lookup(dataset,$sSQL);



?>
<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Accordion 1</title>
<script type="text/javascript" src="<?php echo $this->Ini->path_prod; ?>/third/jquery/js/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(../_lib/img/grp__NM__arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
</head>

<body>

<div class="accordion">
<?php

foreach({dataset} as $aCategory){

?>
<h3><?php echo $aCategory[0]; ?></h3>
<p><?php echo $aCategory[1]; ?></p>
<?php
}
?>

</div>

</body>

</html>
<?php

3. Clique no botão Executar da barra de ferramentas.

Tutoriais na mesma categoria

Editor HTML

Neste exemplo utilizaremos um campo do tipo de dados HTML Editor. 1. Crie um novo formul...

Temas dinâmicos

Neste exemplo será criada uma aplicação de consulta, onde será habilitado a possibilidade de ...

Parâmetros no Container

Neste exemplo veremos como passar parâmetros PHP de uma aplicação em um widget do Container para ...

Ligação modal

Neste exemplo serão criadas duas aplicações (uma consulta e um formulário). Na aplicação de co...

Comente este post