although i managed to create the tabs i needed in an isolated page,
i'm struggling to implement it in my application.
It really seems the tabs() is not fired because if i look at hte
generated source, the classes added by the plugin aren't there. They
used to in the pre - ui version of the tabs i was using.
Now, it may be due to jquery1.3.2 because i know it played on a
livequery similar function live() and i'm setting up the tabs() inside
a livequery function.
Can you tell me if this is correct?
var $this = $("#leftCol");
var href = UI.APP_URL + UI.sectionFolder + '/' + UI.item + '/' +
UI.menu + '/' + UI.content + '/';
UI.goLivequery = true;
$this.livequery(function()
{
if (UI.goLivequery === true)
{
UI.goLivequery = false;
$this.load(href, function()
{
$this.removeClass('loading');
UI.goLivequery = false;
// bunch of other stuffs that all
work correctly
$('#tabbedTextContent').tabs();
$('#tabbedTextContent img.albumImage')
.css('cursor', 'pointer')
.click(function()
{ // in image albums, clicking on an
image brings the user to the next image
var currentTab = $tabs.data
('selected.tabs');
$('#imageLegend').text($(this).attr
('title'));
var nextTab = (currentTab <
$tabs.length - 1) ? currentTab + 1 : 0;
$tabs.tabs('select', nextTab);
return false;
});
});
}
});
And the markup is:
<div id="tabbedTextContent">
<div id="fragment0"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
00_cover_arca_sonic_space_labau00s.jpg" class="albumImage"
title="00_cover_arca_sonic_space_labau00s.jpg" /></div>
<div id="fragment1"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
01_arca_sonic_space_labau01_left_s.jpg" class="albumImage"
title="01_arca_sonic_space_labau01_left_s.jpg" /></div>
<div id="fragment2"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
02_arca_sonic_space_labau02_right_s.jpg" class="albumImage"
title="02_arca_sonic_space_labau02_right_s.jpg" /></div>
<div id="fragment3"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
03_arca_sonic_space_labau03_left_s.jpg" class="albumImage"
title="03_arca_sonic_space_labau03_left_s.jpg" /></div>
<div id="fragment4"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
04_arca_sonic_space_labau04_right_s.jpg" class="albumImage"
title="04_arca_sonic_space_labau04_right_s.jpg" /></div>
<div id="fragment5"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
05_arca_sonic_space_labau05_left_s.jpg" class="albumImage"
title="05_arca_sonic_space_labau05_left_s.jpg" /></div>
<div id="fragment6"><img src="http://localhost/lab-au.com/dev/theory/
article_sonic-space/images/album_images/
06_arca_sonic_space_labau06_right_s.jpg" class="albumImage"
title="06_arca_sonic_space_labau06_right_s
.jpg" /></div>
<ul class="tab-nav-menu">
<li><a href="#fragment0">0</a></li>
<li><a href="#fragment1">1</a></li>
<li><a href="#fragment2">2</a></li>
<li><a href="#fragment3">3</a></li>
<li><a href="#fragment4">4</a></li>
<li><a href="#fragment5">5</a></li>
<li><a href="#fragment6">6</a></li>
<li id="imageLegend">Arca 180</li>
</ul>
</div>
if you want to see it for yourself:
http://m2.lab-au.com
clickpath to reproduce the error: theory > writings > articles > Any
of the 3 items > Visuals. There, the images should be tabbified. they
are not, and if u check the generated source code; no ui classes have
been injected.
Thanks in advance for your help _ i'm getting desperate.
On Feb 25, 10:30 pm, pixeline <[email protected]> wrote:
> OK, i made a separate implementation, only having the uitabs in the
> codeflow. turns out its the tab nav ul list inside the h3 is a no-go.
> to have the tabs displayed underneath only needs to have your markup
> reflect that: the ul after the tabbed divs. Would have assumed that
> should be set via css, not html but why not. At least it's possible so
> i'm happy. nice one, well done ui team !
>
> if i may ask: would it be possible to be able to locate the tabs
> navigator anywhere in the markup, instead of right before or right
> next to the tab divs ?
>
> On Feb 24, 5:15 pm, pixeline <[email protected]> wrote:
>
> > Thanks for the feedback i was in fact already using rc6 (that's a typo
> > of mine on my first post, sorry). Can you explain me how should my
> > markup/css be so that the tabs can be displayed underneath the tabs ?
>
> > On Feb 24, 5:07 am, Steven Black <[email protected]> wrote:
>
> > > First thing I would do, Alexandre, is get yourself jquery UI 1.6.rc6,
> > > an upgrade from rc5.
>
> > > You might also venture to the latest version of Tabs in the svn trunk.
> > > http://jquery-ui.googlecode.com/svn/trunk/ui/
>
> > > It's unusual that your <ul>...</ul> isn't first in your
> > > #tabbedTextContent, which is probably OK in theory but might be a
> > > problem in practice.
>
> > > Also your <ul>...</ul> is nested in an <h3> and that's asking for
> > > trouble too since your #fragments aren't siblings of <ul>. Mine are
> > > siblings, and my tabs work, but I'm guessing.
>
> > > That said, I had all sorts of problems with rc5 that disappeared with
> > > rc6. Make sure you've got the latest CSS files too.
>
> > > **--** Steve
>
> > > On Feb 23, 5:40 am, pixeline <[email protected]> wrote:
>
> > > > Hello!
>
> > > > I'm upgrading ui tabs from the old standalone 2007 version to the
> > > > jquery ui implementation so bear with me :)
>
> > > > jquery 1.3.2.min
> > > > jquery UI 1.6.rc5 personalized (only core + tabs)
>
> > > > The markup generated and to be tabbified:
>
> > > > <div id="tabbedTextContent">
> > > > <div id="fragment0">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 00_cover_arca_sonic_space_labau00s.jpg"
> > > > class="albumImage"
> > > > title="00_cover_arca_sonic_space_labau00s.jpg" /></div>
> > > > <div id="fragment1">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 01_arca_sonic_space_labau01_left_s.jpg"
> > > > class="albumImage"
> > > > title="01_arca_sonic_space_labau01_left_s.jpg" /></div>
> > > > <div id="fragment2">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 02_arca_sonic_space_labau02_right_s.jpg"
> > > > class="albumImage"
> > > > title="02_arca_sonic_space_labau02_right_s.jpg" /></div>
> > > > <div id="fragment3">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 03_arca_sonic_space_labau03_left_s.jpg"
> > > > class="albumImage"
> > > > title="03_arca_sonic_space_labau03_left_s.jpg" /></div>
> > > > <div id="fragment4">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 04_arca_sonic_space_labau04_right_s.jpg"
> > > > class="albumImage"
> > > > title="04_arca_sonic_space_labau04_right_s.jpg" /></div>
> > > > <div id="fragment5">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 05_arca_sonic_space_labau05_left_s.jpg"
> > > > class="albumImage"
> > > > title="05_arca_sonic_space_labau05_left_s.jpg" /></div>
> > > > <div id="fragment6">
> > > > <img src="http://localhost/lab-au.com/dev/theory/
> > > > article_sonic-space/images/album_images/
> > > > 06_arca_sonic_space_labau06_right_s.jpg"
> > > > class="albumImage"
> > > > title="06_arca_sonic_space_labau06_right_s.jpg" /></div>
> > > > <h3>
> > > > <ul class="tab-nav-menu">
> > > > <li><a href="#fragment0">0</a></li>
> > > > <li><a href="#fragment1">1</a></li>
> > > > <li><a href="#fragment2">2</a></li>
> > > > <li><a href="#fragment3">3</a></li>
> > > > <li><a href="#fragment4">4</a></li>
> > > > <li><a href="#fragment5">5</a></li>
> > > > <li><a href="#fragment6">6</a></li>
> > > > </ul>
> > > > <span id="imageLegend">Arca 180</span></h3>
> > > > </div>
>
> > > > the call is a simple:
>
> > > > var $tabs = $("#tabbedTextContent").tabs({ show: function() { alert
> > > > ('hi'); } });
>
> > > > but the tabbiffication does not occur.
>
> > > > if i do $tabs.length it returns 0.
>
> > > > Any hint as to where to look at the culprit would be *much* welcome !
>
> > > > Thank you,
>
> > > > Alexandre
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
