Saturday, February 21, 2009

JavaScript Tabs within the Content Editor Webpart

Copy paste the following code into the 'Source Editor' section in the Content Editor Webpart.
--------------------------------------------------------------------------------
Add the following inside the style node and embed inside the head and html notes. Due to the constraints in the editor can't code exactly.

.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;}

include the following in the body of the hml section after the head section.

div id="topsidebar"
ul class="ui-tabs-nav"
li class="ui-tabs-selected"
a href="#fragment-1

span Office /span /a
/li li class="" a href="#fragment-2" span Email /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://mcafee.com Office /a br / head quarters drive Plano TX 75050 br /
Tel: 1.111.111.1111Fax: 1-111-111-1111 /p /div div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" p email me p Umakanth Nelige br / a href=mailto:umakanth.nelige@gmail.com Umakanth nelige E-mail/a br /111.111.1111 /p /div /div

download the JQuery files and copy paste in the content editor webparrt.

No comments:

Post a Comment