jQuery UI Tabs & Cookie
Уже давно использую библиотеку jQuery и jQuery UI в своих проетах.
На днях, понадобилось установить jQuery UI Tabs. Все отлично, одна проблема – не сохраняет после перезагрузки страницы последнюю открытую вкладку.
В официальной документации jQuery UI Tabs есть параметр cookie (), но он работает с дополнительно подключенным плагином. При переходе на страницу этого плагина мне выдало ошибку – страница не найдена. Пытался найти его из других источников, но так и не нашел.
Зато нашел другой плагин: Javascript Cookie Library with jQuery bindings and JSON support
Пример HTML и JavaScript для работы с jQuery UI Tabs + Cookie:
<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="UTF-8" /> <title>Text.md Tab</title> <link rel="stylesheet" href="../css/jquery-ui/ui-lightness/1.7.2/jquery-ui-lightness.css" media="screen" /> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Tab 1</a></li> <li><a href="#tabs-2">Tab 2</a></li> <li><a href="#tabs-3">Tab 3</a></li> </ul> <div id="tabs-1"> <p>Tab 1 content</p> </div> <div id="tabs-2"> <p>Tab 2 content</p> </div> <div id="tabs-3"> <p>Tab 3 content</p> </div> </div> <script type="text/javascript" src="../jquery/core/1.4.1/jquery.js"></script> <script type="text/javascript" src="../jquery/ui/1.7.2/jquery-ui.js"></script> <script type="text/javascript" src="../cookies/jquery.cookies.js"></script> <script type="text/javascript"> $( function() { var cookieName, $tabs, textmdTab; cookieName = 'textmdTab'; $tabs = $( '#tabs' ); $tabs.tabs( { select: function( e, ui ) { $.cookies.set( cookieName, ui.index ); } } ); textmdTab = $.cookies.get( cookieName ); if(!isNaN( textmdTab )){ $tabs.tabs( 'select', textmdTab ); } } ); </script> </body> </html>Не забудьте подключить все библиотеки JS (jQuery, jQuery UI и JavaScript Cookie). Все должно работать с первого раза.
Читайте ещё похожие статьи на этом сайте:
Sursa
2010-10-01 16:44:35