jQuery UI Tabs & Cookie

jQuery UI Tabs Cookies Уже давно использую библиотеку 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). Все должно работать с первого раза.

Share/Bookmark

Читайте ещё похожие статьи на этом сайте:

  1. Как установить и получить cookie на JavaScript?
  2. Полезные примеры JavaScript на jQuery
  3. jqGrid (jQuery Grid Plugin) – табличное представление работы с данными
  4. Доработка HTML Form при помощи jQuery
  5. 6 способов сломать Internet Explorer


Sursa
2010-10-01 16:44:35



Comenteaza





Ultimele 25 posturi adăugate

11:36:34Cricova își extinde plantațiile cu soiuri locale —» Fine Wine
12:59:22Fără Titlu —» Путепроводные Заметки
00:26:55Fără Titlu —» Путепроводные Заметки
20:14:25Fără Titlu —» Путепроводные Заметки
16:43:47Fără Titlu —» Путепроводные Заметки
15:26:11Fără Titlu —» Путепроводные Заметки
14:28:07RomStoria: Singura femeie Romă nominalizată la Nobelul pentru pace —» Curaj.TV | Media alternativă
09:19:46Nou: Maestro Cuvée Blanc brut nature —» Fine Wine
04:20:42Fără Titlu —» Путепроводные Заметки
20:31:54Fără Titlu —» Путепроводные Заметки
18:29:45Fără Titlu —» Путепроводные Заметки
15:13:06Fără Titlu —» Путепроводные Заметки
12:41:04Țambalul —» CHIŞINĂU MUZICAL | Blogul Bibliotecii de Arte "Tudor Arghezi"
09:06:43Vinul de casă – băutura preferată în R.Moldova. Apoi berea și spumantul —» Fine Wine
04:34:00PROLOG PASCAL —» Leo Butnaru
04:02:39Semnificatia fiecarei zile din Saptamana Patimilor —» Portalul Tineretului Ortodox din Moldova
15:57:53Fără Titlu —» Путепроводные Заметки
23:08:58Fără Titlu —» Путепроводные Заметки
20:51:33Fără Titlu —» Путепроводные Заметки
16:15:34Fără Titlu —» Путепроводные Заметки
13:30:23Fără Titlu —» Путепроводные Заметки
04:58:00VĂ INTERESEAZĂ TRADUCEREA? —» Leo Butnaru
00:57:09Fără Titlu —» Путепроводные Заметки
20:33:49Fără Titlu —» Путепроводные Заметки
18:19:08Fără Titlu —» Путепроводные Заметки