Tuesday, August 17, 2010

HOW TO Create a tabbed interface in SharePoint using HTML/jQuery

The code below shows how to create a tabbed interface in SharePoint using HTML/jQuery.

 

Embed the entire code in a Content Editor Web Part.

 

<link href="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-ui.css" rel="stylesheet"

type="text/css"/>

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-1.3.2.min.js"></script>

 

 

<script type="text/javascript"

src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-ui.min.js"></script>

 

<script>

  $(document).ready(function() {

    $("#divCountries_NEW").tabs();

  });

 

</script>

 

 

<style type="text/css">

       .outerTable

        {

            width: 90%;

        }

        .innerTable

        {

            width: 90%;

        }

        .innerBlankTD

        {

            width: 1px;

        }

</style>

 

 

 

 

<div id="divCountries_NEW">

    <ul>

        <li><a href="#divUS_NEW"><span>US based employees</span></a></li>

        <li><a href="#divCanada_NEW"><span>Canada based employees</span></a></li>

        <li><a href="#divPuertoRico_NEW"><span>Puerto Rico based employees</span></a></li>

    </ul>

 

 

 

<DIV id="divUS_NEW">

<TABLE>

<TR>

<TD valign="middle"><IMG alt="" border="0"

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/United_States-32.png"></TD>

<TD style="vertical-align:middle"><FONT size="4">Booking & Reservations: United States based

employees</FONT></TD>

</TR>

</TABLE>

 

<TABLE class="outerTable" align="middle">

<TR>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/local_reservations.jpg">

</TD></TR>

<TR>

<TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Online

Reservations</SPAN></TD></TR>

<TR>

<TD align="middle">

<P align="left"><SPAN><SPAN class=ms-rteCustom-Kraft_Body><STRONG>Cliqbook</STRONG> is our online

booking tool for US based employees. <STRONG>Cliqbook</STRONG> must be used for all

<STRONG>US</STRONG> and <STRONG>Canadian</STRONG> reservations.</SPAN></P>

<UL>

<LI>

<DIV align="left"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN></SPAN></SPAN></SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff><A title=""

href="https://e-travelmanagement1.amadeus.com/login/kraftus"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook online booking

tool</FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></S

PAN></A></FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN

></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><A

href="http://intranet.na.kraft.com/sites/Travel/Old%20Documentsto%20be%20held/Miscellaneous%20Doc

uments/V7Training-Krafttutorial.ppt" target=_blank><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook  user

training</FONT></U></STRONG></SPAN></A></SPAN></SPAN></SPAN></SPAN></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN><A

href="http://hr.kraft.com/workplace/travel/e-travel/etravelFAQ.doc"

target=_blank><STRONG><U><SPAN class=ms-rteCustom-Kraft_Body><FONT color=#0000ff>Cliqbook

FAQs</SPAN></FONT></SPAN></U></STRONG></A></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></DIV>

</LI></UL></TD></TR></TBODY></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TBODY>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/international_reservations.j

pg"> </TD></TR>

<TR>

<TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>International

Reservations</SPAN></TD></TR>

<TR>

<TD align="middle">

<P align="left"><SPAN class=ms-rteCustom-Kraft_Body><SPAN>BCD will make business reservations for

individual travel and group events that do not require meeting support.</SPAN></SPAN></P>

<P align="center"></SPAN><SPAN><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Business Hours

Phone<BR></SPAN><STRONG>1-888-391-6785<BR></STRONG><SPAN class=ms-rteCustom-Kraft_Body>(hours

7:00 a.m. to 6:00 p.m. CST)

</SPAN><BR><BR>

<SPAN class=ms-rteCustom-Kraft_Minor_Headline>After Hours Help Hotline</SPAN><BR>

<STRONG>1-888-635-5223<BR></STRONG><SPAN class=ms-rteCustom-Kraft_Body>(Toll-Free in the US and

Canada)</SPAN><BR><P align="left">Note: Fees apply for non-emergency calls made to this line and

will be billed to traveler’s credit card.</P>

<STRONG>1-313-271-7887</STRONG><BR><SPAN class=ms-rteCustom-Kraft_Body>(Collect outside the US

and Canada)</SPAN><BR></P>

<P align="left">Identify yourself as a Kraft employee by using the access code AOR1.</P><BR>

<P align="left"><I>The cost for calls made to the hotline during Omaha's business hours, and for

non-emergencies will be charged back to the traveler's cost center.</I> </P>

<P align=left></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><STRONG><BR>&nbsp;</P></STRONG></SPAN></SPAN></TD></TR></TBOD

Y></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align=middle><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/group_reservations.jpg">

</TD></TR>

<TR>

<TD align=middle><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Group Planning &

Reservations</SPAN></TD></TR>

<TR>

<TD align=middle><SPAN><SPAN><SPAN><SPAN><SPAN><SPAN class=ms-rteCustom-Kraft_Body>

<P align=left><SPAN><SPAN><SPAN><SPAN><SPAN><SPAN class=ms-rteCustom-Kraft_Body>Meetings and

Incentives is&nbsp;for travel arrangements on all group events requiring meeting

management.</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN> The Meetings and Incentives link will take

you to Meeting Central, a tool that has been developed exclusively for Kraft Foods to centralize

all meetings. The information collected allows Kraft Foods as a company to have a calendar of all

meetings, leverage meeting and event spend volume with suppliers, identify preferred suppliers

and achieve cost savings and efficiencies company wide while mitigating risk.</P>

<UL>

<LI>

<DIV align=left></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body>Click <A title=""

href="http://www.meetings-incentives.com/meetingcentral/kraft/updated/meetingcentral/"><STRONG><U

><FONT color=#0000ff>Meetings and Incentives</FONT></U></STRONG></A> to make your group

reservations.</SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></DIV></LI></UL>

<P align=left>&nbsp;</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

 

<div id="divCanada_NEW">

<TABLE>

<TR>

<TD><IMG alt="" border="0"

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/Canada-32.png"></TD>

<TD style="vertical-align:middle"><FONT size="4">Booking & Reservations: Canada based

employees</FONT></TD>

</TR>

</TABLE>

<TABLE class="outerTable" align="middle">

<TR>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/local_reservations.jpg">

</TD></TR>

<TR>

<TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Online

Reservations</SPAN></TD></TR>

<TR>

<TD align="middle">

<P align="left"><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><STRONG>Cliqbook</STRONG> is our

online booking tool for Canada based employees. <STRONG>Cliqbook</STRONG> must be used for all

<STRONG>Canadian</STRONG> and <STRONG>US</STRONG> reservations.</SPAN></P>

<UL>

<LI>

<DIV align="left"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN></SPAN></SPAN></SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff><A title=""

href="https://e-travelmanagement1.amadeus.com/login/kraftus"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook online booking

tool</FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></S

PAN></A></FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN

></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><A

href="http://intranet.na.kraft.com/sites/Travel/Old%20Documentsto%20be%20held/Miscellaneous%20Doc

uments/V7Training-Krafttutorial.ppt" target=_blank><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook  user

training</FONT></U></STRONG></SPAN></A></SPAN></SPAN></SPAN></SPAN></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN><A

href="http://hr.kraft.com/workplace/travel/e-travel/etravelFAQ.doc"

target=_blank><STRONG><U><SPAN class=ms-rteCustom-Kraft_Body><FONT color=#0000ff>Cliqbook

FAQs</SPAN></FONT></SPAN></U></STRONG></A></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></DIV>

</LI></UL></TD></TR></TBODY></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TBODY>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/international_reservations.j

pg"> </TD></TR>

<TR>

<TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>International

Reservations</SPAN></TD></TR>

<TR>

<TD align="middle">

<P align="left"><SPAN class=ms-rteCustom-Kraft_Body>BCD can make reservations for individual

travel and group events that do not require meeting support.</SPAN></P><SPAN

class=ms-rteCustom-Kraft_Body>

<P align="center"><SPAN

class=ms-rteCustom-Kraft_Minor_Headline>Reservations<BR></SPAN><STRONG>888-642-8884<BR></STRONG><

BR><SPAN class=ms-rteCustom-Kraft_Body>Travel Agent Supervisor: <br>Faiyaz

Keshvani<BR>Phone:&nbsp;<STRONG>416-507-3022</STRONG><BR>Email: <STRONG><U><FONT color=#0000ff><A

title=""

href="mailto:%20faiyaz.h.keshvani@aexp.com">faiyaz.h.keshvani@aexp.com</A></FONT></U></STRONG></S

PAN></P>

<P><SPAN class=ms-rteCustom-Kraft_Minor_Headline>BCD Emergency Travel Center</SPAN></P>

<P>24 Hour Emergency Services:<BR><STRONG>800-434-2941</STRONG><BR><BR>Where toll free not

accessible:<BR><STRONG>613-237-3263</STRONG> (call collect)&nbsp;<BR>Access code:

<STRONG>S-X2Y0</STRONG><EM>&nbsp;</EM></P>

<P align=left></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><STRONG><BR>&nbsp;</P></STRONG></SPAN></SPAN></TD></TR></TBOD

Y></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align=middle>&nbsp;</TD></TR>

<TR>

<TD align=middle>&nbsp;</TD></TR>

<TR>

<TD align=middle>&nbsp;</TD></TR>

</TABLE>

</TD>

</TR>

</TABLE>

</div>

<div id="divPuertoRico_NEW">

<TABLE>

<TR>

<TD><IMG alt="" border="0"

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/Puerto_Rico-32.png"></TD>

<TD style="vertical-align:middle"><FONT size="4">Booking & Reservations: Puerto Rico based

employees</FONT></TD>

 

</TR>

</TABLE>

 

    <TABLE class="outerTable" align="middle">

<TR>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/local_reservations.jpg">

</TD></TR>

<TR>

<TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Online

Reservations</SPAN></TD></TR>

<TR>

<TD align="middle">

<P align="left"><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><STRONG>Cliqbook</STRONG> is our

online booking tool for Puerto Rico based employees. <STRONG>Cliqbook</STRONG> must be used for

all travel within North America.</SPAN></P>

<UL>

<LI>

<DIV align="left"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN></SPAN></SPAN></SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff><A title=""

href="https://e-travelmanagement1.amadeus.com/login/kraftus"><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook online booking

tool</FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></S

PAN></A></FONT></U></STRONG></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN

></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><A

href="http://intranet.na.kraft.com/sites/Travel/Old%20Documentsto%20be%20held/Miscellaneous%20Doc

uments/V7Training-Krafttutorial.ppt" target=_blank><SPAN

class=ms-rteCustom-Kraft_Body><STRONG><U><FONT color=#0000ff>Cliqbook  user

training</FONT></U></STRONG></SPAN></A></SPAN></SPAN></SPAN></SPAN></SPAN></DIV></LI>

<LI>

<DIV align=left><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN><SPAN><SPAN><SPAN><SPAN><A

href="http://hr.kraft.com/workplace/travel/e-travel/etravelFAQ.doc"

target=_blank><STRONG><U><SPAN class=ms-rteCustom-Kraft_Body><FONT color=#0000ff>Cliqbook

FAQs</SPAN></FONT></SPAN></U></STRONG></A></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></DIV>

</LI></UL></TD></TR></TBODY></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TBODY>

<TR>

<TD align="middle"><IMG alt=""

src="http://intranet.na.kraft.com/sites/TC/Travel%20Central%20Images/international_reservations.j

pg"> </TD></TR>

<TR><TD align="middle"><SPAN class=ms-rteCustom-Kraft_Minor_Headline>International

Reservations</SPAN></TD></TR><TR>

<TD align="middle">

<P align="left"><SPAN class=ms-rteCustom-Kraft_Body><SPAN>BCD can make reservations for

individual travel and group events that do not require meeting support.</SPAN></SPAN></P><SPAN

class=ms-rteCustom-Kraft_Body><SPAN></SPAN></SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN>

<P align="center"></SPAN><SPAN><SPAN><SPAN class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><SPAN class=ms-rteCustom-Kraft_Minor_Headline>Business Hours

Phone<BR></SPAN><STRONG>1-888-391-6785<BR></STRONG><SPAN class=ms-rteCustom-Kraft_Body>(hours

7:00 a.m. to 6:00 p.m. CST)

</SPAN><BR><BR>

<SPAN class=ms-rteCustom-Kraft_Minor_Headline>After Hours Help Hotline</SPAN><BR>

<STRONG>1-888-635-5223<BR></STRONG><SPAN class=ms-rteCustom-Kraft_Body>(Toll-Free in the US and

Canada)</SPAN><BR><BR><STRONG>1-313-271-7887</STRONG><BR><SPAN

class=ms-rteCustom-Kraft_Body>(Collect outside the US and Canada)</SPAN><BR></P>

<P align="left">Identify yourself as a Kraft employee by using the access code AOR1.</P><BR>

<P align="left"><I>The cost for calls made to the hotline during Omaha's business hours, and for

non-emergencies will be charged back to the traveler's cost center.</I> </P>

<P align=left></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN><SPAN

class=ms-rteCustom-Kraft_Body><SPAN><STRONG><BR>&nbsp;</P></STRONG></SPAN></SPAN></TD></TR></TBOD

Y></TABLE></TD>

<TD class="innerBlankTD">&nbsp; </TD>

<TD width="33%" align="middle" valign="top">

<TABLE>

<TR>

<TD align=middle>&nbsp;</TD></TR>

<TR>

<TD align=middle>&nbsp;</TD></TR>

<TR>

<TD align=middle>&nbsp;</TD></TR>

</TABLE>

</TD>

</TR></TABLE></TD></TR></TABLE>

 

    </div>

</div>

No comments: