Join Chris Converse for an in-depth discussion in this video Creating the main panel and the tab containers, part of Creating a Sliding Tabbed Panel with jQuery.
Now, to begin editing our HTML file, we're going to open up index.html up in a text editor. Now, if you'd prefer to take this course in a more design-oriented tool, we're offering the same course in the lynda.com library using Adobe Dreamweaver instead of a text editor. Now, inside this file I want to show you a few things that I have set up. On line 6 here we have a link into our includes directory, to a file called sliding_panels.css. This has a few CSS rules to just dial the type, but we're going to be writing all of the CSS rules for the panels inside of here.
And then lastly, we have a sliding_panels_ie.css file, where we can respecify some CSS3 properties that aren't supported in IE 7 and 8. Now, inside of the body area of the HTML file, you'll see I have a comment here, Sliding Panels go here. This is where we're going to start putting our HTML. So I'll just scroll up here a little bit. So the containers we want to create are going to be one for the overall sliding panels itself and then one for the tabs and one for the panels. So let's start by creating a div element. Let's add a class, and the outermost class we're going to create is going to be sp.
Let's end the div element. Let's split that open. Inside of here we're going to create two more divs. The first one we're going to set a class of tabs. End that element, and then another div with a class of panel_container, so panel_container, and then end that div as well. So now that we have our outermost HTML containers created, next we'll create elements inside of the tabs container for the individual tabs.
- Creating the main panel and tab containers
- Adding content to the containers
- Adding CSS styles to the text and tabs
- Adding the jQuery $(document).ready() function
- Assigning click events to the tabs
- Setting an autostart on page load
- Creating custom graphics for the panels
- Assigning custom classes to the HTML elements