|
вкладки с помощью CSS3 и JqueryОбсуждение темы вкладки с помощью CSS3 и Jquery в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Ребят помогите разобраться в чем дело! Хотел поставить - вкладки с помощью CSS3 http://www.rudebox.org.ua/sozdaniya-vkladok-css3/ там его демо Но при добавлении на сайт вышло ... |
|
Опции темы |
15.11.2011, 08:57 | #2 | |
|
где-то фоновые картинки потеряли для вкладок
проверьте, лежат ли у вас следующие изображения там, где прописаны Цитата:
|
|
|
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(); }); |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Фреймы и вкладки над фоном | 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 |
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|