JQuery & AJAX’s Sweet Tab

Вступление

В то время как мир превращается в новую эру веб-дизайна, важно организовать контент страницы интуитивно понятным и броским способом. Единственный принцип разработчика в разделении текстов — использовать вкладку. Вкладка позволяет вам использовать больше контента в ограниченном пространстве и предоставить способ доступа к нему. Сегодня мы поговорим о том, как создать вкладку с поддержкой AJAX с помощью CSS3 и jQuery.

XHTML

Начните с разметки XHTML.

  Как вы заметили, разметка выглядит слишком простой, чтобы быть правдой.  Это потому, что нам не хватает кода для вкладок, он динамически вставляется в jQuery при загрузке страницы.  Это позволяет очень легко добавлять новые вкладки, так как вам нужно добавить их на стороне JavaScript. 

	 Вкладка два 
		
		
	
  Это код, который вставляется jQuery для каждой вкладки.  Он состоит из элемента LI, расположенного внутри неупорядоченного списка .tabContainer выше. 
  CSS 
  Теперь пришло время для CSS-стиля вкладки. 
 .tabContainer{ /* The UL */ float:right; padding-right:13px; } #contentHolder{ background-color:#EEEEEE; border:2px solid #FFFFFF; height:300px; margin:20px; color:#444444; padding:15px; } #tabContent{ background-color:#333; border:1px solid #444; margin-top:-15px; width:100%; } #tabContent, .tabContainer li a,#contentHolder{ -webkit-box-shadow:0 0 2px black; -moz-box-shadow:0 0 2px black; box-shadow:0 0 2px black; } .tabContainer li{ /* This will arrange the LI-s next to each other */ display:inline; } .tabContainer li a,.tabContainer li a:visited{ /* Styling the hyperlinks of the tabs as colorful buttons */ float:left; font-size:18px; /* display:block allows for additinal CSS rules to take effect, such as paddings: */ display:block; padding:7px 16px 1px; margin:4px 5px; height:29px; /* Giving positioning */ position:relative; /* CSS3 text-shadow */ text-shadow:1px 1px 1px #CCCCCC; } 
  Приведенный выше стиль использует новейшие правила CSS3, которые дополняют общий вид страницы.  Свойство box-shadow добавляет тень под вкладками, когда #tabContent div и #contentHolder. 
 #overLine{ /* The line above the active button. */ position:absolute; height:1px; background-color:white; width:90px; float:left; left:1px; top:-5px; overflow:hidden; } #main{ margin:0 auto; position:relative; width:700px; } ul .left{ /* The left span in the hyperlink */ height:37px; left:0; position:absolute; top:0; width:10px; } ul .right{ /* The right span in the hyperlink */ height:37px; right:0; position:absolute; top:0; width:10px; } /* Styling the colors individually: */ ul a.green{ background:url(img/green_mid.png) repeat-x top center; color:#24570f;} ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;} ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;} /* .. Analogical styles for the red, blue and orange color .. */ /* The hover states: */ ul a:hover{ background-position:bottom center; text-decoration:none;} ul a:hover span.left{ background-position:left bottom;} ul a:hover span.right{ background-position:right bottom;} .preloader{ display:block; margin:120px auto; } направо #overLine{ /* The line above the active button. */ position:absolute; height:1px; background-color:white; width:90px; float:left; left:1px; top:-5px; overflow:hidden; } #main{ margin:0 auto; position:relative; width:700px; } ul .left{ /* The left span in the hyperlink */ height:37px; left:0; position:absolute; top:0; width:10px; } ul .right{ /* The right span in the hyperlink */ height:37px; right:0; position:absolute; top:0; width:10px; } /* Styling the colors individually: */ ul a.green{ background:url(img/green_mid.png) repeat-x top center; color:#24570f;} ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;} ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;} /* .. Analogical styles for the red, blue and orange color .. */ /* The hover states: */ ul a:hover{ background-position:bottom center; text-decoration:none;} ul a:hover span.left{ background-position:left bottom;} ul a:hover span.right{ background-position:right bottom;} .preloader{ display:block; margin:120px auto; } 
  Как видите, для гиперссылки и левого / правого промежутков определены разные фоны, которые зависят от назначенного цветового класса.  Мы можем успешно изменить ряд стилей CSS, и у нас будет совершенно другой дизайн вкладки. 
  JQuery 
  Здесь начинается магия. 
 

 
 
  Мы использовали знаменитый Google CDN и добавляем наш собственный файл script.js, который содержит все наши скрипты. 
  Вот подробное объяснение того, что именно делает jQuery: 
  * Библиотека jQuery автоматически загружается из сети депозитариев контента Google. 
  * $ (document) .ready () ставится в очередь на выполнение, а также функция, предоставляемая в качестве параметра, запускается после завершения загрузки DOM. 
  * Объект tabs зацикливается с помощью метода $ .each (), и отдельные элементы создаются и добавляются в .tabContainer (рассматривается в первом шаге). 
  * Слушатели событий для события click. 
 $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ /* Defining an array with the tab text and AJAX pages: */ var Tabs = { 'Tab one' : 'pages/page1.html', 'Tab two' : 'pages/page2.html', 'Tab three' : 'pages/page3.html', 'Tab four' : 'pages/page4.html' } /* The available colors for the tabs: */ var colors = ['blue','green','red','orange'];   /* The colors of the line above the tab when it is active: */ var topLineColor = { blue:'lightblue', green:'lightgreen', red:'red', orange:'orange' } /* Looping through the Tabs object: */ var z=0; $.each(Tabs,function(i,j){ /* Sequentially creating the tabs and assigning a color from the array: */ var tmp = $(' 
  ‘+ я +  
  «);
		 / * Настройка данных страницы для каждой гиперссылки: * /
		 tmp.find ( ‘а’) данные ( ‘страница’, J).
		 / * Добавление вкладки в контейнер UL: * /

		 $ ( ‘Ul.tabContainer’) Append (TMP).

	 }) 
  Приведенный выше источник является первой частью script.js.  Вы можете добавить свои собственные вкладки на страницу, вставив новое свойство в объект Tabs.  Левая часть содержит имя вкладки в одинарных кавычках, тогда как правая часть содержит URL-адрес AJAX, который будет выбран и отображен в div #content Holder. 
 /* Caching the tabs into a variable for better performance: */ var the_tabs = $('.tab'); the_tabs.click(function(e){ /* "this" points to the clicked tab hyperlink: */ var element = $(this);   /* If it is currently active, return false and exit: */ if(element.find('#overLine').length) return false;   /* Detecting the color of the tab (it was added to the class attribute in the loop above): */ var bg = element.attr('class').replace('tab ','');   /* Removing the line: */ $('#overLine').remove();   /* Creating a new div element with jQuery 1.4 by passing an additional object parameter: */ $(' 
  », {
			 ID: 'Оверлайн',
			 CSS: {
				 Не показывать: «Нет»,
				 ширина: element.outerWidth () - 2,
				 background: topLineColor [bg] ||  «Белый»
			 }}) AppendTo (элемент) .fadeIn ( 'медленные').

 & NBSP;  / * Проверка, была ли кэшированная AJAX-страница кэширована: * /

		 если (! element.data ( 'кэш'))
		 {
			 / * Если кеша нет, покажите предварительный загрузчик gif и выполните AJAX-запрос: * /
			 $ ( '# ContentHolder'). HTML (»  «);

 & NBSP;  $ .Get (element.data ( 'страница'), функция (МСГ) {
				 $ ( '# ContentHolder') HTML (МСГ).

 & NBSP;  / * После получения страницы добавьте ее в кеш для текущей гиперссылки: * /
				 element.data ( 'кэш', сообщ);
			 });
		 }
		 иначе $ ('# contentHolder'). html (element.data ('cache'));

 & NBSP;  e.preventDefault ();
	 })

	 / * Эмуляция щелчка на первой вкладке, так что область содержимого не пуста: * /
	 the_tabs.eq (0) .click ();

 }); 
  Метод jQuery data () многократно использовался в коде.  Он отправляет данные элементу, вызывая метод с двумя параметрами $ (‘# selector’). Data (‘label’, “String Data”). Это присваивает «String Data», которая является строкой для элемента, и предоставляет доступ позже. к нему, вызывая метод данных без другого параметра. 
  Используя их, мы имеем нашу собственную простую систему кэширования для запросов AJAX. 
  Вывод 
  Выполнив шаги, описанные выше, у вас должны получиться красивые красочные вкладки с поддержкой AJAX с jQuery и CSS3.  Это не так сложно, верно? 
  Если вам понравился этот урок, не забывайте часто посещать jQuery4u.com, чтобы узнать больше полезных уроков и уловок! 
  Посмотреть демо 
  Скачать