Join Chris Converse for an in-depth discussion in this video About the exercise files, part of Create a Sliding Tabbed Panel with jQuery and Dreamweaver.
- View Offline
These are empty but are hooked into the index.html file. Then finally, there's an images folder. So in case you want to skip the Photoshop part where we customize these graphics, you can just skip that chapter and move on. Now inside of folder 2, we have two snippet files. These files have some placeholder text and some CSS rules that we can cut and paste later in the course. Inside of folder 3 is a source Photoshop file. You can use this file to create custom background graphics. Inside folder 4 is a copy of the generic version of the project.
As we go through this course, we're going to be creating a sliding tab panel which is going to have very little styling in it but will be fully functional. If you want to stop the project there and use that as the project to implement into your website, you can use this one. Then inside of folder 5 is the fully styled one that has backgrounds and different graphic colors and so forth. So now that we're familiar with the exercise files, we can start building our project in the next movie.
- 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