Универсални JQuery азбука блокове с разделите (раздели)

влизане

Тъй като през последните 2 години, събрах известен опит в работата с JQuery, а над сценария се превърна в един напълно нов сценарий. Написала съм напълно от нулата. Преди това е имало и друг вариант на сценария, който аз използвах, може би една година. За него никога не съм писал, а сега няма смисъл да го направя, защото тя загубила своето значение.

Защо ми се обади нов скрипт за JQuery-раздели универсален:

  • тя ви позволява да създавате неограничен брой раздели в рамките на един дял, без да е необходимо да се изброят разделите с помощта на CSS-класове, както е направено в старата версия;
  • Можете да създавате произволен брой такива блокове с разделите отново, без да се налага да се изброят тези блокове чрез CSS класове;
  • съдържанието на JQuery-Script. изпълнява раздела остава непроменена (общо 0.3 Kbytes), т.е. Това не расте в зависимост от броя на блокове или на разделите, както е било в старата версия, новата версия на размера на скрипт на не повече от размера на сценария за една единица със зъбците на старата версия.

Е, достатъчно суха, на прехода към точката.

JQuery скрипт код блокове за превключване със зъбците

Не забравяйте да се свърже първо самата рамка JQuery (ако не е свързан към вашия сайт), например, както следва (поставена между маркерите и ):

Аз предпочитам "отнемане" на това от Google, тъй като на първо място. това е вероятно, че посетителят, който ще отиде в сайта, JQuery вече кеширани в браузъра (което означава, бързо зареждане на страниците), и второ. ускори сървърите ни стабилен и бърз, трета. Google го изпраща в компресиран вид (софтуерна) и, например, версия 1.4.2 размер е само на 24 килобайта, в сравнение с некомпресиран файл (70 KB).

Ето такава ми сценария:

HTML-код, за да бъдат използвани за скрипт

Имайте предвид, че HTML-код структура стриктно свързан към сценария, така че ако искате да промените името, използвано от класовете, не забравяйте да ги промени в сценария.

Необходими CSS стилове за над HTML-кодът

Ако, например, изисква по подразбиране, второто устройство, тогава ще трябва да се движат на класа .active втори блок div.tabs__content. и да се премести .active клас във втория елемент в списъка с раздели.

  • Първият пример.
  • Второ пример. където съхранява активен раздела след презареждането на страницата (като се използва бисквитки).
  • Трети пример. където съхранява активен раздела след презареждането на страницата (като се използва локално хранилище, по-малко от кода на бисквитката).
  • Четвъртия пример. който, когато кликнете върху линка с котвата, се посочва номера на раздела, активирайте съответния раздел.

Послепис Аз туитна веднъж каза, че съм "преоткрива колелото", че този сценарий е вече в JQuery UI. Така че нека да бъде, нека аз "е изобретил колелото", най-важното е, че мога да получа голямо удоволствие от процеса и в същото време да подобри своя опит в JQuery. Толкова ли е лошо? =)

развитието изискват отпечатан каталог от продукти или услуги? Създаване на директория в студиото "Verstaem.ru" е най-доброто решение!

Аз реализира своя код, Dimox, на своята интернет страница с няколко промени. Целият улов е, че всички вие трябва да div.box obtyanut друг Разделение и да определят фиксирана височина за него!

Тъй като аз Tabakh съдържанието на сайта се променя непрекъснато, свързан механизъм Math.max.apply за изчисляване на максималната възможна височина на вградения дива .box. Височината и външната дива ..

За да се осъществи появата използва вместо шоуто () анимирате () с ясни възможности:

И всъщност HTML:

Проверих в IE7> и нормални браузъри - изглежда да се работи.

вместо това:
$ ( "Ul.tabs") делегат ( "Ли: Не (.current) ',' Кликнете върху ', функция ().

място:
$ ( "Ul.tabs ли: не (.current)") на живо (с щракване, функция ().

Проблемът на първия елемент, който правилно общуват събития чрез метод делегат когато преброяване чрез табове товарене Аякс. Втората версия работи добре + 1 път правим проба, а не 2

скокове страница на проблем, когато превключвате между разделите във факта, че в момента на преминаване първо скрива съдържанието на всички раздели, след което показва съдържанието на раздела активна. В момент, когато съдържанието на всички раздели скрити - съдържание на страницата стават по-малки и браузъра страницата се превърта нагоре. Когато се появи нов раздел - за да превъртите останки на същата страница.

Решението - да не се скрие всички раздели, но само ненужно: