One of the most under-utilized web parts by designers inside SharePoint has to be the content editor web part. The reason why it's so powerful is because it allows us to embed any markup we want right in the page. We will utilize this web part as well as adding some markup with SharePoint Designer to add some functionality to our SharePoint site.
Using the Content Editor Web Part
Whether you're using MOSS or WSS you can do this tutorial. All you need is a web part zone in a page.
- Simply click to add a web part and choose the content editor web part (I'll be doing so in the right-hand side of the page).
- Then, in the content editor web part, click the link to "open the tool pane."
- Then, click the Source Editor button and paste in the following HTML.
<div id="topsidebar">
<ul class="ui-tabs-nav">
<li class="ui-tabs-selected"><a href="#fragment-1"><span>Hotel</span></a></li>
<li class=""><a href="#fragment-2"><span>Contact</span></a></li>
</ul>
<div id="fragment-1" class="ui-tabs-panel ui-tabs-hide">
<p>Here are details corresponding to the hotel attendees will be staying at:</p>
<p><a href=http://example.com/>Example Hotel</a><br /> One Microsoft Way, Redmond, WA 98052<br /> Tel: 1.555.555.5555 Fax: 1-555-555-5556</p>
</div>
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
<p>Contact the following for details about the conference:</p> <p>Chris Poteet<br /> <a href=mailto:chris.poteet@example.com>Chris Poteet's E-mail</a><br />555.555.5555</p>
</div>
</div>
When you're done, click OK to exit the Tool Pane, and if you're using WSS then click Exit Edit Mode on the page. If you're using a MOSS publishing page then click the Publish button.
Downloading the jQuery Goodness
Then we need to add both the jQuery framework and jQuery UI which is a framework built on top of jQuery for accomplishing common DHTML functionality. I have included a ZIP file for you with the necessary JavaScript files. I suggest unzipping this file to the desktop.
Once you have downloaded the files we need to put them on our site. Open your site in SharePoint Designer and expand the _catalogs -> masterpage folder. Drag both JavaScript files into the masterpage folder. Then you may have to check in both as major versions by right-clicking on the files and Check In. (You might also be prompted for content approval which will take you to the master page library to approve the documents.)
Adding References in Our Master Page
Now we need to add references to our JavaScript files as well as instantiate our tabs. Then you will need to add the following to reference the two libraries in the <head> section of your master page.
<script type="text/javascript" src="/_catalogs/masterpage/jquery.js"></script>
<script type="text/javascript" src="/_catalogs/masterpage/jquery-ui.js"></script>
Then we use the following to instantiate our tabs. The document.ready() function allows jQuery to run after the DOM has rendered, and the next line turns on the tabs for the unordered list right beneath the topsidebar div. I decided to use a nice toggle to switch between tabs. This goes inside the <head> after the references we added above.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#topsidebar > ul").tabs({
fx: {
opacity: "toggle"
}
});
});
</script>
Adding the CSS
Since DHTML is truly the alteration of the DOM through mostly CSS changes we need to use CSS to hide/show elements in the tabs. Check out your custom CSS file, and then add the following. (If you don't have a custom CSS file reference this post by Microsoft on how to do so.)
/* Conference Welcome Page */
.ui-tabs-hide {
display: none;
}
ul.ui-tabs-nav {
margin: 0;
padding: 8px 0 0 0;
}
ul.ui-tabs-nav li {
list-style: none;
margin: 0;
display: inline;
font-size: 12px;
}
ul.ui-tabs-nav li a {
padding: 5px;
margin-right: 3px;
border-bottom: none;
text-decoration: none;
color: #000000;
text-transform:uppercase;
}
ul.ui-tabs-nav li a:hover {
color: #000;
background: #F1EEE7;
text-decoration: none;
}
.ui-tabs-selected a {
background-color: #F1EEE7!important;
}
ul.ui-tabs-nav li.ui-tabs-unselect a {
background-color: #F1EEE7;
}
ul.ui-tabs-nav li.ui-tabs-unselect a:hover {
color: #333;
background-color: #F1EEE7;
}
.ui-tabs-panel {
background-color: #F1EEE7;
padding: 5px;
line-height: 18px;
}
.ui-tabs-panel ul {
margin-left: 0;
}
.ui-tabs-panel ul li {
background-color: #F1EEE7;
border-bottom: 1px solid #fff;
padding: 5px 0 6px 20px;
}
You're Done!
You've now added some slick tabs to your SharePoint site. There are a multitude of options inside the jQuery UI tabs documentation. Also be sure to change the CSS to match whatever color scheme your SharePoint site uses.
No comments:
Post a Comment