Marik - 27 авг 2010 11:41 1

Встроенные вкладки на jQuery - UI Tabs

 

Встроенные вкладки на jQuery - UI Tabs

 

Не так давно столкнулся с необходимостью организации вкладок, для профиля. Пересмотрев несколько вариантов, остановился на jQuery UI Tabs.  Потестировал чуть-чуть, очень неплохие вкладки, именно то, что мне было нужно. Сел разбираться подробнее, и в итоге получилось целая подробная статья.

 

ДЕМО 

Скачать [37.5 Kb] (cкачиваний: 245)

Как подключить:

Между <head> и </head> подключаем:


<script type="text/javascript" src="jquery.js">
</script><script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>

Конфигурация вкладок выставляется в следующем коде - 


<SCRIPT type=text/javascript>           
 $(function() {              
 $('#container-1 > ul').tabs();
 });
 </SCRIPT>

Непосредственно сами вкладки имеют следующий вид - 


<DIV id=container-1>
<UL>  
<LI><A   href="#fragment-1"><SPAN>Название 1 вкладки</SPAN></A></LI>   
<LI><A   href="#fragment-2"><SPAN>Название 2 вкладки</SPAN></A></LI>  
<LI><A   href="#fragment-3"><SPAN>Название 3 вкладки</SPAN></A></LI>
</UL>
<DIV id=fragment-1>Контент 1 вкладки</DIV>
<DIV id=fragment-2>Контент 2 вкладки</DIV>
<DIV id=fragment-3>Контент 3 вкладки</DIV>
</DIV>

Другие статьи по теме:

Комментарии

    1. semen74

      10 сен 2012 07:47

      Сильно. Солидно ! Спасибо !

      Жалоба Цитировать Ответить
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
Marik.kz. Блог. При использовании информации, пожалуйста указывайте ссылку на оригинал.