      
� Hello and welcome to my first tutorial! Aims: By the end of this tutorial you will, hopefully, be able to create a simple tabbed content area.� This will allow users of your website to view a wide variety of content from an infinite number of tabs(within reason) all in one content space! � Creating The Database This is probably the easiest part of the tutorial so we might as well do it first!� Open up phpmyadmin and create a new table within an existing database with 3 fields. The fields are:
Now go to insert(tab at the top of phpmyadmin) and enter your content into the content fields, remember to leave the id field blank as that will update itself and to never have tabid twice in the same database!� I would recommend making 4 or 5 rows for the moment. The HTML/CSS Firstly we'll take a look at the CSS/HTML, this is another simple part.� Create a new HTML page within a new folder, call it whatever you want - I called mine "index". Copy and Paste the following code into your new HTML page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabbed AJAX Content Pane</title>
<!-- COPYRIGHT 2010 ASHLEY PEACOCK -->
<style type="text/css">
#wrapper {
width: 600px;
margin: 0 auto;
}
#topnav {
}
#topnav ul {
list-style: none;
padding: 0;
margin: 0;
}
#topnav li {
float: left;
border: 1px solid #000;
margin-right: 10px;
}
#topnav li a {
list-style-image: none;
display: block;
text-align: center;
color: #000;
padding-right: 2px;
padding-top: 12px;
text-decoration: none;
}
#topnav li a:hover {
color: #0F0;
}
.selected {
color: #F00;
border: 1px solid #F00;
}
#contentArea {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topnav">
<ul>
<li><a class="selected" id="tab1" href="javascript:changeTabs('1')">Tab One</a></li>
<li><a id="tab2" href="javascript:changeTabs('2')">Tab Two</a></li>
<li><a id="tab3" href="javascript:changeTabs('3')">Tab Three</a></li>
<li><a id="tab4" href="javascript:changeTabs('4')">Tab Four</a></li>
<li><a id="tab5" href="javascript:changeTabs('5')">Tab Four</a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="contentArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla tortor vel neque porta accumsan. Praesent dolor lorem, consectetur id porttitor in, placerat ut erat. Nulla massa lectus, vehicula non dignissim id, cursus at diam. Praesent facilisis, mi non cursus cursus, sem nisi mattis justo, sed ullamcorper erat eros id tortor. Sed cursus neque at leo viverra ut rutrum sem tempor. Mauris rutrum nisi eget neque consectetur sed porttitor diam elementum. Vivamus vitae est purus, ac venenatis magna. Duis purus sapien, suscipit a varius nec, blandit sit amet justo. Donec volutpat, nulla et fermentum ornare, neque quam imperdiet libero, sit amet ultricies diam quam ut arcu. Sed tristique vulputate pulvinar. Suspendisse ultrices mi quis nibh pulvinar faucibus. Suspendisse potenti. Nunc vulputate consequat risus, nec aliquet quam vestibulum ut. Pellentesque iaculis nulla vitae velit iaculis sit amet porta eros varius.
Mauris nibh nulla, posuere a tempus nec, ultrices in massa. Phasellus pellentesque libero sed arcu mollis eu tincidunt turpis ultricies. Sed velit sapien, tristique eu tempus et, sodales eu ante. Pellentesque feugiat quam cursus erat posuere semper. Duis eget tortor nulla. Donec a orci non erat sollicitudin rhoncus. Mauris tellus justo, dignissim quis ultrices sed, eleifend ac odio. Aenean lobortis tempus tincidunt. Donec ut placerat dolor. Sed sed volutpat nisl. Fusce id turpis vel nibh egestas lobortis ut quis tortor. Praesent quis odio sed massa laoreet auctor. Sed nulla nunc, mollis quis commodo id, rhoncus venenatis mi. Quisque in leo ipsum. Sed ultricies, massa quis varius fringilla, eros massa ultrices nisi, ac bibendum nunc massa id urna. Duis laoreet lectus at dui laoreet mattis. Morbi convallis interdum est, vitae fringilla nisi vulputate eu.
</div>
</div>
</body>
</html>
For anyone that has previous looked at HTML or is familiar with HTML/CSS this will be nothing new, you can customize the look of the page by editing the code between the tags.� For anyone that doesn't know CSS here is a brief overview: The color attribute changes the text colour.� So to change the tab link colours you would change � #topnav li a {
color: YOUR-HEX-COLOR-CODE-HERE;
}
� For a nice list of HTML colour codes check out this page. The AJAX Part If you upload the .html file to your webserver you will now see 5tabs with some waffle in the content area.� Clicking on the tabs will not do anything though! If you take a look at the actual HTML tab code, which is found in the topnav section you'll notice the links refer to a javascript function.� We will now create that function! Add into thepart of your page the following: � � There are a few things you will need to change before the script will work.� If you wish to have less/more than 5 tabs you will need to adjust the script accordingly.� Say you want 8tabs, make sure you change the linke "var totalTabs = 5;" so that the number after the equals sign is the same as the total number of tabs you're using. � When adding in a new tab you must also change the HTML code.� If you want to add in a new tab find the topnav section and add in a new line just before the "" tag.� Make sure the tab numbers keep in a pattern of increasing by 1 every time you add a tab! Finally, the PHP If you were to upload the file and press the tabs you will notice that the tabs now change style slightly when you click them, however nothing changes in the content area.� We now need to grab the information from your database that you entered at the start! Firstly create a new .php file, name it "changeTabs.php" and save it in the same directory as your HTML file above(I named mine index, remember).� Then paste this code into your PHP file: � <?php
$con = mysql_connect("localhost","YOUR-DATABASE-USERNAME-GOES-HERE",
"YOUR-DATABASE-PASSWORD");
if (!$con){
die('Could not connect: ' . mysql_error());
}
mysql_select_db("YOUR-DATABASE-NAME-GOES-HERE", $con);
$selectedTab = $_POST['selectedtab']; //Grabs the data sent from our index page
$tabContentResult = mysql_query("SELECT * FROM ajaxtabs WHERE tabid = '".$selectedTab."'"); //Our MySQL Query
$tabContentRow = mysql_fetch_array($tabContentResult);
$newTabContent = $tabContentRow['content']; //Grab the data
echo $newTabContent; //By echo'ing the data we're able to grab it using our AJAX on the index page!
//All done, simple!
?>
There isn't much to explain, there are comments on the code above explaining what the key lines of the code do.� In short it collects the content from the database, depending on which tab is clicked, and returns the data to our HTML page. � Now upload both files to your webserver, make sure they're in the same directory and then open the .html file, in my case I would open the index.html file. And that concludes the tutorial, you can see a working example by clicking here! Good luck! 
Dig this tutorial?
Thank the author by sending him a few P2L credits!
oscardog
Hey, I am Ashley a young web developer from England! I mainly write tutorials for PHP, CSS, HTML and other web languages :) 
|
