Permalink
Browse files

Fixes #879: tab panel links now change panels

  • Loading branch information...
patheard committed Feb 2, 2013
1 parent f1bded8 commit 7e3423f473636c67ecca97d222a6ff7b89415f2d
Showing with 33 additions and 13 deletions.
  1. +6 −6 demos/tabs/tabs-eng.html
  2. +6 −6 demos/tabs/tabs-fra.html
  3. +1 −1 src/js/pe-ap.js
  4. +20 −0 src/js/workers/tabbedinterface.js
View
@@ -193,17 +193,17 @@ <h1 id="wb-cont">Tabbed interface</h1>
<div class="tabs-panel">
<div id="tab1"><section><h4>Tab 1</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br /><br />
<p><a href="#tab2"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br /><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
</section></div>
<div id="tab2"><section><h4>Tab 2</h4>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
<p><a href="#tab3"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#">fake link</a></p>
</section></div>
<div id="tab3"><section><h4>Tab 3</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
<p><a href="#tab1"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<div class="clear"></div>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
@@ -312,20 +312,20 @@ <h2 class="margin-top-none">Tab 9</h2>
</ul>
<div class="tabs-panel">
<div id="tab10" class="tabs-content-pad"><section><h4>Tab 10</h4>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
<p><a href="#tab11"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
</section></div>
<div id="tab11" class="tabs-content-pad"><section><h4>Tab 11</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
<p><a href="#tab12"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
</section></div>
<div id="tab12" class="tabs-content-pad"><section><h4>Tab 12</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
<p><a href="#tab10"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
View
@@ -189,17 +189,17 @@ <h1 id="wb-cont">Interface à onglets</h1>
<div class="tabs-panel">
<div id="tab1"><section><h4>Onglet 1</h4>
<p><a href="#">lien fictif</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br /><br />
<p><a href="#tab2"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br /><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
</section></div>
<div id="tab2"><section><h4>Onglet 2</h4>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
<p><a href="#tab3"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
<p><a href="#">lien fictif</a></p>
</section></div>
<div id="tab3"><section><h4>Onglet 3</h4>
<p><a href="#">lien fictif</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
<p><a href="#tab1"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
<div class="clear"></div>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
@@ -308,20 +308,20 @@ <h2 class="margin-top-none">Onglet 9</h2>
</ul>
<div class="tabs-panel">
<div id="tab10" class="tabs-content-pad"><section><h4>Onglet 10</h4>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
<p><a href="#tab11"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
<p><a href="#">lien fictif</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
</section></div>
<div id="tab11" class="tabs-content-pad"><section><h4>Onglet 11</h4>
<p><a href="#">lien fictif</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
<p><a href="#tab12"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
</section></div>
<div id="tab12" class="tabs-content-pad"><section><h4>Onglet 12</h4>
<p><a href="#">lien fictif</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
<p><a href="#tab10"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Titre X</a><br />
Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
View
@@ -176,7 +176,7 @@
pe.document.on('pageinit', function () {
// On click, puts focus on and scrolls to the target of same page links
hlinks_same.off('click vclick').on('click vclick', function () {
hlinks_same.off('click vclick').on('click.hlinks vclick.hlinks', function () {
$this = $('#' + pe.string.jqescape($(this).attr('href').substring(1)));
$this.filter(':not(a, button, input, textarea, select)').attr('tabindex', '-1');
if ($this.length > 0) {
@@ -335,6 +335,26 @@
}
});
// Trigger panel change if a link within a panel is clicked and matches a tab
$panels.find('a').filter('[href^="#"]').each(function () {
var $tab,
$this = $(this),
href = $this.attr('href'),
hash = href.substring(href.indexOf('#'));
if (hash.length > 1) {
$tab = $tabs.filter('[href="' + hash + '"]');
if ($tab.length) {
$this.off('click.hlinks vclick.hlinks').on('click vclick', function (e) {
$tab.trigger('click');
if (opts.cycle) {
stopCycle();
}
return false;
});
}
}
});
return elm.attr('class', elm.attr('class').replace(/\bwidget-style-/, "style-"));
}, // end of exec

0 comments on commit 7e3423f

Please sign in to comment.