<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" type="text/css" />
	<link rel="stylesheet" href="basic/css/style.css">
	<title>Basic aspLite example</title>
  </head>
  <body>  
  
	<div class="wrapper">
	
		<div class="content">
		
			<h1>Basic aspLite example</h1>
  
			<h3>"Onload"-event triggers aspLite form</h3>
			
			<!-- class="asplForm" triggers a function in aspLite.js that calls this ASP page and replaces basicDiv1 --> 	
			
			<div class="asplForm" id="basicDiv1" style="color:Blue"></div>
				
			
			<h3>Trigger aspLite form</h3>
			<!-- class="ajaxlink" triggers a function in aspLite.js that calls this ASP page 
			and passes asplEvent (clickLink) and  asplTarget (basicDiv2) -->
			<a href="#" class="ajaxLink" data-asplTarget="basicDiv2" data-asplEvent="clickLink">Click here</a>
			
			<div id="basicDiv2" style="color:Red"></div>
		
		</div>
		
	</div>	
	
	<!-- jQuery  & aspLite JS -->
	<script src="asplite/jquery.js"></script>
	<script>
		var aspLiteAjaxHandler='basic.asp'
	</script>
	<script src="asplite/asplite.js"></script>
	
  </body>
</html>