[ 2 posts ]

Daniel Kipp

  • Username: dck
  • Joined: Wed Aug 18, 2010 11:40 pm
  • Posts: 12
  • Offline
  • Profile

Animated TabView pannel switching?

Post Posted: Tue May 17, 2011 11:40 pm
+0-
Hi all

I tried to animate the switch between content panels of the tabview widget with the Plugin.WidgetAnim, but I dont understand how i should work nor if this is the way its supposed to work, and luck wasn't on ma side yet.

Here is my code:

Code:
<div id="demo">
   <ul>
      <li><a href="#foo">foo</a></li>
      <li><a href="#bar">bar</a></li>
      <li><a href="#baz">baz</a></li>
   </ul>
   <div>
      <div id="foo">
         <p>foo content</p>
      </div>
      <div id="bar">
         <p>bar content</p>
      </div>
      <div id="baz">
         <p>baz content</p>
      </div>
   </div>
</div>


<script type="text/javascript">
YUI({ filter: 'raw' }).use("yui", "tabview", "plugin", "widget-anim", function(Y) {
   var tabview = new Y.TabView({
      srcNode:'#demo',
      plugins:[
         Y.Plugin.WidgetAnim
      ],
   });
   tabview.render();
});
</script>


ideas or hints?

regards
Daniel

Juan Ignacio Dopazo

YUI Contributor

  • Username: jdopazo
  • Joined: Fri Oct 02, 2009 5:39 am
  • Posts: 620
  • Location: Buenos Aires, Argentina
  • Twitter: juandopazo
  • GitHub: juandopazo
  • Gists: juandopazo
  • Offline
  • Profile

Re: Animated TabView pannel switching?

Post Posted: Wed May 18, 2011 5:15 am
+0-
Y.Plugin.WidgetAnim seems to work when the widget changes its visibility. However, TabView shows/hides tab panels not by changing their visibility, but by changing their 'selected' status. I think if I were you I'd write my own plugin in this case (and maybe use Transition instead of Anim for making sliding panels).
  [ 2 posts ]
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
cron