Hello,
I'm trying to achieve vertical tabs inside a facebox popup. I am able
to get it almost working with jquery-ui-1.8.1 but the problem is that
once the popup has loaded and the tabs are displayed, i cannot click
on them to change the content and tabs. I have also been reading about
facebox + ui tabs from jquery i believe but I've been having some
issues implementing that. If someone could please provide a simple
example where I could click on a link, facebox would popup and there
would be some clickable vertical tabs in it with content changing on
click, that would be super great. Or maybe someone could take a look
at what I've got so far please. The UI file is here:
http://jqueryui.com/download
my code is as follows:
<head>
<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="jquery-ui-1.8.1.custom.min.js"></
script>
<script language="javascript" src="facebox.js"></script>
<link type="text/css" href="jquery-ui-1.8.1.custom.css"
rel="stylesheet" />
<link rel="stylesheet" href="facebox.css" media="screen" />
<link href="facebox.css" media="screen" rel="stylesheet" type="text/
css" />
<style>
#facebox {
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 100;
text-align: left;
margin-top: 50px;
}
</style>
<style type="text/css">
/* Vertical Tabs
----------------------------------*/
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em;
float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-
bottom-width: 1px !important; border-right-width: 0 !important;
margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
0; padding-right: .1em; border-right-width: 1px; border-right-width:
1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right;
width: 40em;}
</style>
<script language="javascript">
$(document).bind('reveal.facebox', function(){
$('#facebox').draggable();
})
</script>
<script language="javascript">
$(document).ready(function(){
$('#drag').hide();
$('a[rel*=facebox]').facebox();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs li").removeClass('ui-corner-top').addClass('ui-corner-
left');
});
</script>
</head>
<body>
<a href="#drag" rel="facebox">Click</a>
<a href="#drag2" rel="facebox">Click</a>
<div id="drag2">something here</div>
<div id="drag">
<!-- Tabs -->
<h2 class="demoHeaders">Tabs</h2>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna,
blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque
sem non nisl. Fusce sed lorem in enim dictum bibendum.</div>
<div id="tabs-3">Nam dui erat, auctor a, dignissim quis,
sollicitudin eu, felis. Pellentesque nisi urna, interdum eget,
sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper
augue.</div>
</div>
</div>
</body>
Thanks so much!!!
--
You received this message because you are subscribed to the Google Groups "facebox" group.
To post to this group, send email to
fac...@googlegroups.com.
To unsubscribe from this group, send email to
facebox+u...@googlegroups.com.
For more options, visit this group at
http://groups.google.com/group/facebox?hl=en.