javascript - jquery ui tabs blind effect not working -
i'm trying effects work jquery ui version 1.10.2 html page shown below. tabs work blind effect doesn't happen. doing wrong?
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>tabs</title> <link rel="stylesheet" href="css/smoothness/jquery-ui-1.10.2.custom.css"> </head> <body> <div id="mytabs"> <ul> <li><a href="#a">tab 1</a></li> <li><a href="#b">tab 2</a></li> </ul> <div id="a">this content panel linked first tab, shown default.</div> <div id="b">this content panel linked second tab, shown when tab clicked.</div> </div> <script type="text/javascript" src="development-bundle/jquery-1.9.1.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.widget.js"></script> <script type="text/javascript" src="development-bundle/ui/jquery.ui.tabs.js"></script> <script type="text/javascript"> (function($) { var tabopts = { hide: { effect: "blind", duration: 2000 }, show: { effect: "blind", duration: 2000 } }; $("#mytabs").tabs(tabopts); })(jquery); </script> </body> </html>
the reason because including partial jquery ui version.
in jquery ui tabs let show/hide effect blind
works have include jquery ui effects
component http://api.jqueryui.com/category/effects/
see page http://api.jqueryui.com/tabs/ , read section dependencies
ui core
widget factory
effects core (optional; use show , hide options)
if include entire jquery ui, in last comment, works because contains libraries.
Comments
Post a Comment