Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

вкладки с помощью CSS3 и Jquery

Обсуждение темы вкладки с помощью CSS3 и Jquery в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Ребят помогите разобраться в чем дело! Хотел поставить - вкладки с помощью CSS3 http://www.rudebox.org.ua/sozdaniya-vkladok-css3/ там его демо Но при добавлении на сайт вышло ...


Закрытая тема
 
Опции темы
Старый 15.11.2011, 00:22   #1
Ребят помогите разобраться в чем дело!

Хотел поставить - вкладки с помощью CSS3

http://www.rudebox.org.ua/sozdaniya-vkladok-css3/
там его демо

Но при добавлении на сайт
вышло так!!!
1.png

и я не знаю что делать! помогите
 
Старый 15.11.2011, 00:22
Ссылки
Старый 15.11.2011, 08:57   #2
где-то фоновые картинки потеряли для вкладок
проверьте, лежат ли у вас следующие изображения там, где прописаны
Цитата:
ul a.green{background:url(img/green_mid.png) repeat-x top center; color:#7f0900;}
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;}
ul a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#487a00;}
ul a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
ul a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}
ul a.orange{background:url(img/orange_mid.png) repeat-x top center;color:#828600;}
ul a.orange span.left{ background:url(img/orange_left.png) no-repeat left top;}
ul a.orange span.right{ background:url(img/orange_right.png) no-repeat right top;}
ul a.red{background:url(img/red_mid.png) repeat-x top center; color:#46006a;}
ul a.red span.left{ background:url(img/red_left.png) no-repeat left top;}
ul a.red span.right{ background:url(img/red_right.png) no-repeat right top;}
 
Старый 15.11.2011, 20:07   #3
да, проверил! все есть!
сайт на Joomla
Может навсякий прописать абсолютный адрес!
url(http://domen.ru/img/red_right.png)

Добавлено через 4 минуты

хотя даже если так... все равно! на демо вкладки стоят выше, а у меня они стремяться к контенту.... и все же показ preload.gif - из img ведь показывается при переключении вкладок

Добавлено через 2 минуты

ой простите!

прописал абсолютный вид ссылок в CSS файле и все заработало!!! )))

Только осталось - вкладки ниже, чем в демо

Последний раз редактировалось maxefect; 15.11.2011 в 20:07.. Причина: Добавлено сообщение
 
Старый 15.11.2011, 20:44   #4
допишите сюда
Код:
.tabContainer{
float:right;
padding-right:13px;
margin-top: нужное вам число отступа px;
}
 
Старый 16.11.2011, 23:46   #5
Код HTML:
// JavaScript Document
$(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 = {
		'Школа'	: 'pages/page1.html',
		'Кадеты'	: 'pages/page2.html',
		'Фото'	: 'pages/page3.html',
		'Лицензия'	: '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:'#72be06',
		green:'#d30f00',
		red:'#8900d0',
		orange:'#d0d800'
	}
	
	/* 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 = $('<li><a href="#" class="tab '+colors[(z++%4)]+'">'+i+' <span class="left" /><span class="right" /></a></li>');
		
		/* Setting the page data for each hyperlink: */
		tmp.find('a').data('page',j);
		
		/* Adding the tab to the UL container: */
		$('ul.tabContainer').append(tmp);
	})

	/* 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 line with jQuery 1.4 by passing a second parameter: */
		$('<div>',{
			id:'overLine',
			css:{
				display:'none',
				width:element.outerWidth()-2,
				background:topLineColor[bg] || 'white'
			}}).appendTo(element).fadeIn('slow');
		
		/* Checking whether the AJAX fetched page has been cached: */
		
		if(!element.data('cache'))
		{	
			/* If no cache is present, show the gif preloader and run an AJAX request: */
			$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

			$.get(element.data('page'),function(msg){
				$('#contentHolder').html(msg);
				
				/* After page was received, add it to the cache for the current hyperlink: */
				element.data('cache',msg);
			});
		}
		else $('#contentHolder').html(element.data('cache'));
		
		e.preventDefault();
	})
	
	/* Emulating a click on the first tab so that the content area is not empty: */
	the_tabs.eq(0).click();
});
Вот там код скрипта - которые подключают те самые page страницы! но я вставил код в эти самые страницы и теперь - при обновлении главной отображаеться старый текст который был в той самой pageN.html странице... Хотя на сервере загружены обновленные с кодом pageN.html страницы
 
Старый 16.11.2011, 23:46
Закрытая тема




Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фреймы и вкладки над фоном Falconintel HTML, CSS, JavaScript 1 10.08.2014 14:28
Как сделать "замедленную реакцию" при наведении на блок в css3? Владимир2 HTML, CSS, JavaScript 3 20.07.2014 06:29
Декорация подменю CSS3 inc1uder Кальянная 2 15.03.2012 08:24
как вернуть название атрибута с помощью jquery Ola123 HTML, CSS, JavaScript 1 01.06.2009 22:08
Как сделать таймер с помощью jquery? Rembrandt HTML, CSS, JavaScript 10 16.07.2008 00:16


Текущее время: 08:59. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум