SharePoint: Wiki Bookmarks Part 2 – Tabs

In Part 1 I discussed some of the issues and a possible work around for the limitations a SharePoint Wiki offers. When I received the original request I had no idea of the amount of content they were dealing with. What was discussed in Part 1 is a reasonable good practice, but not something we want to go back and rework. I knew there could be a simple script solution that when implemented would fix the issue, but my skills are limited in that area so I reached out to Alexander again. Sure enough a few lines of code later and it worked like a champ.
The request was asking for a top navigation with simple alpha characters that linked throughout the page. Today’s post will discuss how we went about setting this up and implementing it.
Let’s start with the navigational structure. I looked over this several times. Each time I was drawn back to a tab navigational structure. They are much cleaner and perform fairly well. I used an existing theme from jqueryUI. This would make it easier to apply a different theme with little to no maintenance. The theme in this demonstration is “Smoothness”. I made two adjustments to the CSS and that was only for the active tab. I also incorporated cookies and rounded corners. I will discuss each part and how to implement it. Here is a preview:

There are several files you will need before you begin. I use a Scripts library to store them.

• jquery.1.4.2.js – http://jquery.com/
• jquery.corner.js – http://www.malsup.com/jquery/corner/
• jquery.cookie.js – http://plugins.jquery.com/project/cookie

In a sub folder “jqueryUI-1.8.2″ I store the UI files and images. A theme can be found and downloaded from here.

• jquery-ui-1.8.2.custom.min.js
• jquery-ui-1.8.2.custom.css
• images, included with the theme

In addition to the files will also be a few lines of code to pull everything together.

To start we need a basic template that can be added to the Wiki page. This template will make it easier to add or modify content. Below is the basic HTML code that can be utilized as a starting template. It is broken into to two parts, the tab navigation and the content. The tabs should remain similar with little to no change. Your content will be plugged into the div areas they fit according to your requirements. This code should be added to your wiki page source. This is the foundation of each wiki page in your library.

Adding HTML to your wiki source

1. create a wiki page
2. edit the wiki page
3. edit the HTML source
   
4. remove existing HTML source
   
5. paste the HTML template into the source
6. Click OK

Results will be a wiki template

Wiki HTML source code template

<!-- Begin Tab Navigation -->
<div id="tabs">
	<ul>
		<li><a href="#tab-a">A</a></li>
		<li><a href="#tab-b">B</a></li>
		<li><a href="#tab-c">C</a></li>
		<li><a href="#tab-d">D</a></li>
		<li><a href="#tab-e">E</a></li>
		<li><a href="#tab-f">F</a></li>
		<li><a href="#tab-g">G</a></li>
		<li><a href="#tab-h">H</a></li>
		<li><a href="#tab-i">I</a></li>
		<li><a href="#tab-j">J</a></li>
		<li><a href="#tab-k">K</a></li>
		<li><a href="#tab-l">L</a></li>
		<li><a href="#tab-m">M</a></li>
		<li><a href="#tab-n">N</a></li>
		<li><a href="#tab-o">O</a></li>
		<li><a href="#tab-p">P</a></li>
		<li><a href="#tab-q">Q</a></li>
		<li><a href="#tab-r">R</a></li>
		<li><a href="#tab-s">S</a></li>
		<li><a href="#tab-t">T</a></li>
		<li><a href="#tab-u">U</a></li>
		<li><a href="#tab-v">V</a></li>
		<li><a href="#tab-w">W</a></li>
		<li><a href="#tab-x">X</a></li>
		<li><a href="#tab-y">Y</a></li>
		<li><a href="#tab-z">Z</a></li>
	</ul>
<!-- End Tab Navigation -->
<!-- Begin Content -->
	<div id="tab-a" class="tab_content">
		Content A </div>
	<div id="tab-b" class="tab_content">
		Content B </div>
	<div id="tab-c" class="tab_content">
		Content C </div>
	<div id="tab-d" class="tab_content">
		Content D </div>
	<div id="tab-e" class="tab_content">
		Content E </div>
	<div id="tab-f" class="tab_content">
		Content F </div>
	<div id="tab-g" class="tab_content">
		Content G </div>
	<div id="tab-h" class="tab_content">
		Content H </div>
	<div id="tab-i" class="tab_content">
		Content I </div>
	<div id="tab-j" class="tab_content">
		Content J </div>
	<div id="tab-k" class="tab_content">
		Content K </div>
	<div id="tab-l" class="tab_content">
		Content L </div>
	<div id="tab-m" class="tab_content">
		Content M </div>
	<div id="tab-n" class="tab_content">
		Content N </div>
	<div id="tab-o" class="tab_content">
		Content O </div>
	<div id="tab-p" class="tab_content">
		Content P </div>
	<div id="tab-q" class="tab_content">
		Content Q </div>
	<div id="tab-r" class="tab_content">
		Content R </div>
	<div id="tab-s" class="tab_content">
		Content S </div>
	<div id="tab-t" class="tab_content">
		Content T </div>
	<div id="tab-u" class="tab_content">
		Content U </div>
	<div id="tab-v" class="tab_content">
		Content V </div>
	<div id="tab-w" class="tab_content">
		Content W </div>
	<div id="tab-x" class="tab_content">
		Content X </div>
	<div id="tab-y" class="tab_content">
		Content Y </div>
	<div id="tab-z" class="tab_content">
		Content Z </div>
<!-- End Content -->
</div>

We could circumvent the dynamic tabs and possibly just make them links to bookmarks, but with all the on-line reference material I have developed I have learned that scrolling content in not user friendly and not a best practice. Using this method content can now be chunked into smaller logical pieces. This makes it easier to use and find your specific content as opposed to a wall of text that makes you dizzy to stare at.

Moving on to the code and making this work. There were three pieces I combined to get the functionality. The first piece provided by Alexander from sharepointjavascript.wordpress.com is a small jQuery code that replaces the href up to the “#” with the existing page URL. The reason we needed to do this is when the page is edited the URL is that of the EditForm.aspx. This is not the final URL of your page. This script allows you to now easily create bookmarks in your wiki.

$(".ms-wikicontent a").each(function(){
var thisHref = $(this).attr('href');
var index = thisHref.indexOf('#');
if(index>0){
$(this).attr('href',thisHref.substring(index));
}
});


Add rounded corners and cookies

// Corners
$("#tabs ul li").corner("top 10px");
//$("#tabs ul li").corner("top 8px").parent().css('padding', '4px').corner("round 10px")
// cookies
$(function() {
$("#tabs").tabs({
cookie: {
// store cookie for a day, without, it would be a session cookie
expires: 1
}
});
});


Now to finish this and pull it all together we need to add a CEWP to each wiki page.

1. On the Site Action menu select Edit Page.
2. At the bottom of the wiki is a web part zone, Click add web part
3. Add CEWP
4. Click Source Editor
5. Add the code below
6. Update src reference to match you requirements

What does this mean “Update src reference to match you requirements”? If you look back at the source code for the template you will notice in the Content part Content A, Content B, Content C, etc. Thios text should be replaced with your text.

Content A corresponds to tab A, Content B corresponds to tab B and so on. This layout or structure can be best described as a dictionary or glossary and is only a starting point. The name and labels can be change to fit your requirements.

Add CEWP
This script will be added to the CEWP. Remember to upate your src references to match your paths.

<script type="text/javascript" src="/sites/globalmp/JavaScripts/jquery-latest.min.js"></script>
<link type="text/css" href="jqueryUI-1.8.2/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jqueryUI-1.8.2/jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript">
$(".ms-wikicontent a").each(function(){

	var thisHref = $(this).attr('href');
	var index = thisHref.indexOf('#');
	if(index>0){
		$(this).attr('href',thisHref.substring(index));
	}
});

// Corners
$("#tabs ul li").corner("top 10px");
//$("#tabs ul li").corner("top 8px").parent().css('padding', '4px').corner("round 10px")
// cookies
$(function() {
	$("#tabs").tabs({
		cookie: {
		// store cookie for a day, without, it would be a session cookie
			expires: 1
			}
		});
	});
</script>
 

Each page the script is added to, with the template, will provide tab navigation along with cookies, remembering the user’s last selection. Also including internal or page bookmarks that are fully functionally.

Advertisement

Explore posts in the same categories: jquery