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= Office /a br / head quarters drive Plano TX 75050 br /
Tel: 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 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