What I try to do is remember the rule of Javascript is that its for Bells and whistles – it makes the page a bit more enjoyable, it shouldn’t be the Core functionality.
So taking that in mind I will show you how I did it, the idea of out front page was for a Showcase that shows off their current products.
What I use is two ‘pages’ one of them being the frame (index.php) and the second being the contents (index_include.php).
On the index I put a PHP include to the ‘index_include’, the index page contains :
<!-- The JQuery (later explained) --->
<script src="/common/js/contentswitcher.js" type="text/javascript"></script>
<div>
<div id="contentstochange">
<?php require_once($_SERVER['DOCUMENT_ROOT'] . '/index_include.php'); ?>
</div>
</div>
<a href="index.cfm?tab=FR" class="stayblack bigtabs <?php if($tab=='FR') echo ' selected' ; ?>">
<h2>
<img src="/images/fr_box_front.png" alt="FR" border="0" />FusionReactor
</h2>
</a>
The <A> tag is the key here : as you can see it calls the href to itself with a URL string of tab=FR
the Class tag contains modification for PHP to add selected when that tab is selected.
Index_include page contains: A Simple Switch statement.
<?php
$tab = 'FR';
if(isset($_GET['tab'])){
$tab = $_GET['tab'];
}
switch($tab) { case 'FR' : ?>
THE HTML CONTENTS GO IN HERE
<?php
break;
case 'n' :
break;
?>
So what we have done here is Really simple. We have an index page with a PHP include of the page ‘index_include’. when the <a href> is pressed it will load the correct case statement into the ‘index’ page.
So, where is the JQuery ?
all what we need to do now is to stop the Page moving as we want the user to remain on the same page so it looks like the tabs are fading in and out nicely.
so add this to the <a href>
onClick="runcontent('FR');return false;" id="FR"
Then we go make the JQuery
function runcontent(selection){
$("#contentstochange").fadeOut('fast');
// Now make the request
this.timer = setTimeout(function () {
$.ajax({
url: "/index_include.php?tab=" + selection,
dataType: 'html',
success: function (response) {
runme(response)
}
});
}, 150);
function runme(response) {
$("#contentstochange").fadeIn('slow').html(response);
}
$(".bigtabs").removeClass("selected");
$("#"+selection).addClass("selected");
}
What it does is Fade out the container div – Requests the index_include page with the Sent variable, it responds then Fades in the new page – it also sends through data to the ‘index’ page to change the style on the Tab so it looks selected.
So what we have now is a Tab that when clicked will open a new tab with new content with a nice fade in fade out effect.
