Kiran Kakanur's Blog: 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.

type="text/css"/>

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

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

$(document).ready(function() {

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

});

</script>

.outerTable

{

width: 90%;

}

.innerTable

{

width: 90%;

}

.innerBlankTD

{

width: 1px;

}

</style>

<ul>

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

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

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

</ul>

<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">Booking & Reservations: United States based

employees</TD>

</TR>

</TABLE>

<TR>

<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">Online

Reservations</TD></TR>

<TR>

Cliqbook is our online

booking tool for US based employees. Cliqbook must be used for all

US and Canadian reservations.

<UL>

<LI>

<DIV align="left"><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

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

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

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body>Cliqbook online booking

tool</S

PAN></A></SPAN

></DIV></LI>

<LI>

<DIV align=left><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>Cliqbook user

training</A></DIV></LI>

<LI>

<DIV align=left><A

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

target=_blank>Cliqbook

FAQs</A></DIV>

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

<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">International

Reservations</TD></TR>

<TR>

BCD will make business reservations for

individual travel and group events that do not require meeting support.

<SPAN

class=ms-rteCustom-Kraft_Body>Business Hours

Phone 1-888-391-6785 (hours

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

After Hours Help Hotline

1-888-635-5223 (Toll-Free in the US and

Canada) Note: Fees apply for non-emergency calls made to this line and

will be billed to traveler’s credit card.

1-313-271-7887 (Collect outside the US

and Canada)

Identify yourself as a Kraft employee by using the access code AOR1.

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.

<SPAN

class=ms-rteCustom-Kraft_Body>  </TD></TR></TBOD

Y></TABLE></TD>

<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>Group Planning &

Reservations</TD></TR>

<TR>

Meetings and

Incentives is for travel arrangements on all group events requiring meeting

management. 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.

<UL>

<LI>

<DIV align=left><SPAN

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

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

>Meetings and Incentives</A> to make your group

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

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></DIV>

<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">Booking & Reservations: Canada based

employees</TD>

</TR>

</TABLE>

<TR>

<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">Online

Reservations</TD></TR>

<TR>

Cliqbook is our

online booking tool for Canada based employees. Cliqbook must be used for all

Canadian and US reservations.

<UL>

<LI>

<DIV align="left"><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

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

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

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body>Cliqbook online booking

tool</S

PAN></A></SPAN

></DIV></LI>

<LI>

<DIV align=left><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>Cliqbook user

training</A></DIV></LI>

<LI>

<DIV align=left><A

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

target=_blank>Cliqbook

FAQs</A></DIV>

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

<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">International

Reservations</TD></TR>

<TR>

BCD can make reservations for individual

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

class=ms-rteCustom-Kraft_Body>

<SPAN

class=ms-rteCustom-Kraft_Minor_Headline>Reservations 888-642-8884 <

BR>Travel Agent Supervisor: Faiyaz

Keshvani Phone: 416-507-3022 Email: <A

title=""

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

PAN>

BCD Emergency Travel Center

24 Hour Emergency Services: 800-434-2941 Where toll free not

accessible: 613-237-3263 (call collect)  Access code:

S-X2Y0

<SPAN

class=ms-rteCustom-Kraft_Body>  </TD></TR></TBOD

Y></TABLE></TD>

<TABLE>

<TR>

<TR>

<TR>

</TABLE>

</TD>

</TR>

</TABLE>

</div>

<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">Booking & Reservations: Puerto Rico based

employees</TD>

</TR>

</TABLE>

<TR>

<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">Online

Reservations</TD></TR>

<TR>

Cliqbook is our

online booking tool for Puerto Rico based employees. Cliqbook must be used for

all travel within North America.

<UL>

<LI>

<DIV align="left"><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

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

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

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body><SPAN

class=ms-rteCustom-Kraft_Body>Cliqbook online booking

tool</S

PAN></A></SPAN

></DIV></LI>

<LI>

<DIV align=left><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>Cliqbook user

training</A></DIV></LI>

<LI>

<DIV align=left><A

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

target=_blank>Cliqbook

FAQs</A></DIV>

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

<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">International

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

BCD can make reservations for

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

class=ms-rteCustom-Kraft_Body>

<SPAN

class=ms-rteCustom-Kraft_Body>Business Hours

Phone 1-888-391-6785 (hours

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

After Hours Help Hotline

1-888-635-5223 (Toll-Free in the US and

Canada) 1-313-271-7887 <SPAN

class=ms-rteCustom-Kraft_Body>(Collect outside the US and Canada)

Identify yourself as a Kraft employee by using the access code AOR1.

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.

<SPAN

class=ms-rteCustom-Kraft_Body>  </TD></TR></TBOD

Y></TABLE></TD>

<TABLE>

<TR>

<TR>

<TR>

</TABLE>

</TD>

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

</div>

Kiran Kakanur's Blog

Tuesday, August 17, 2010

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

No comments:

Search This Blog

Blog Archive

About Me