In deze handleiding gaan we u uitleggen hoe je gebruik kunt maken van tabbladen met behulp van jQuery. JQuery biedt u de mogelijkheid om meer content kwijt te kunnen op één SharePoint pagina. De volgende hulpmiddelen worden in deze handleiding gebruikt:
- Microsoft SharePoint Designer 2007;
- SharePoint Teamsite;
- Documentbibliotheek jQuery (optioneel);
- SPforum_tabbladen.aspx (HIER te downloaden);
- Web part 'inhoudseditor'.
Stap 1: Aanmaken Teamsite
Voordat we de SharePoint pagina gaan maken met de tabbladen, hebben we eerst een Teamsite nodig.
1. Open u SharePoint omgeving (in ons geval http://spforum/)
2. Klik op Siteacties -> Maken -> Sites en werkruimten
3. Op de pagina Nieuwe ShaerPoint-site pagina vult u de gegevens in en kiest u voor Maken
Stap 2: Importeren SPforum_tabbladen.aspx
De SPforum_tabbladen.aspx is een .NET pagina die voorzien is van alle code die u nodig heeft. Tevens is de pagina al ingedeeld in verschillende zones. U zult straks zien waarvoor deze zones dienen.
1. Open SharePoint Designer en importeer de SPforum_tabbladen.aspx in de zojuist aangemaakt Teamsite
2. Het bestand kunt u HIER vinden
Stap 3: Inhoudseditor voor de navigatie invoegen
In de zojuist ingevoegde pagina vindt u een aantal zones; Koptekst, Tab, Zone Tab 1 t/m 8 en voettekst.
1. Open de pagina in uw teamsite. (in ons geval http://spforum/tabbladen/SPforum_tabbladen.aspx)
2. Klik op Sitesacties -> Pagina bewerken
3. Als het goed is ziet u het volgende scherm:
4. Klik onder Tab op Een webonderdeel toevoegen
5. Selecteer het webonderdeel inhoudseditor en klik op toevoegen
6. Kies voor bewerken -> gedeelde webonderdeel wijzigen
7. Klik in rechterscherm op broneditor en voeg de volgende code toe:
8. Klik op OK. U ziet het volgende:
Stap 4: Inhoudseditor voor de content invoegen
Nu de navigatie is geregeld kunnen we de tabbladen gaan koppelen aan de content. De volgende stappen dient u te herhalen afhankelijk van het aantal tabs die u wilt gebruiken.
1. Klik onder Zone Tab 1 op Een webonderdeel toevoegen
2. Selecteer het webonderdeel inhoudseditor en klik op toevoegen
3. Klik op Opent u het werkvenster en kies voor RTF-editor
4. Voeg wat willekeurig tekst in en kies voor OK -> OK
* Voer de stappen hierboven nogmaals uit om de overige tabbladen ook te gebruiken.
Veel gestelde vragen:
Vraag: Hoe wijzig ik de 8 tabbladen naar bijvoorbeeld 5.
Antwoord:
1. Open uw pagina met de tabbladen en kies voor Siteacties -> Pagina bewerken
2. Kies voor bewerken -> gedeelde webonderdeel wijzigen
3. Klik op Broneditor
4. De code die u eerder zag, verschijnt op uw scherm. U kunt hier tabbladen verwijderen.
5. Hierboven ziet u een voorbeeld van 5 tabbladen. De overige zijn verwijderd.
Vraag: Hoe pas ik het uiterlijk van de tabbladen aan.
Antwoord:
1. Open SharePoint Designer en kies de SPforum_tabbladen.aspx pagina
2. Klik op Code om de paginacode te wijzigen
3. Vanaf regel 17 ziet u de CSS stylesheet
4. Wijzig de stylesheet en sla uw pagina op
5. Controleer hoe de pagina er nu uit ziet
Vraag: Ik zie de zones onder elkaar. Mijn pagina werkt dus niet.
Antwoord:
In de SPforum_tabbladen.aspx vindt u bovenaan de volgende code:
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
Zoals u ziet wordt er verbinding gemaakt met http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/ om jQuery op te halen. Als uw server geen internetverbinding heeft kunt u de jQuery file ook lokaal opslaan.
1. Download jQuery vanaf http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.min.js
2. Maak een documentbibliotheek aan en upload de jQuery-1.3.min.js file
3. Pas het script aan naar bijvoorbeeld:
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://spforum/tabbladen/Gedeelde%20documenten/";
document.write("<script src='",jQPath,"jquery-1.3.2.min.js' type='text/javascript'><\/script>");
}
</script>
Tot zover deze handleiding wat betreft het gebruik van tabbladen in een SharePoint pagina. Mocht je nog vragen hebben dan kun je deze plaatsen op ons FORUM.
** Deze handleiding werd u aangeboden door SharePointForum.nl**