Tutorial: Blank Application

In this example a Blank application will be created, using for example jquery code to create an accordion menu.

Creating a Blank application

1. Create a new Blank application and enter a name and finish the creation.

2. In the onExecute event, place the following code.

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

?>
	<html>
		<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. Click on the “Run application” button on the toolbar.

Tutorials in the same category

Integration with WhatsApp

To integrate WhatsApp with ScriptCase, we will be using a specific API called Chat-API, it is a...

Using the Paypal and Pagseguro API

1 - We create an application of the grid type 2 - We edit the following fields and create a ...

Send multiple SMS with the sc_send_sms macro

In this example we will be seeing how we can create an application that helps us send multiple mess...

Send SMS with the sc_send_sms macro

Creating a Control application 1 - We create an application of type Control. 2 - Once the...

Comment this post