Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.07.2013, 18:03
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

Помогите создать вторые табы
Здравствуйте!
Есть у меня такие табы:
JS
$(function(){var tabContainers=$("div.tabs-container > div");tabContainers.hide().filter(":first").show();$("div.tabs ul.tabNavigation a").click(function(){tabContainers.hide();$(this.hash).fadeIn("slow",function(){tabContainers.filter(this.hash).show()});
$("div.tabs ul.tabNavigation a").removeClass("selected");$(this).addClass("selected");return false}).filter(":first").click();$("div.tabs ul.tabNavigation a").append("<em></em>")}));

HTML
<div class="games-gallery">		
                        <div class="title-fs">
                            <p>ФИЛЬМЫ</p>
                        </div>
                        <div class="tabs">
                            <!-- Это сами вкладки -->
                            <ul class="tabNavigation">
			    <li><a class="" href="#1_tab">Все поступления</a></li>
                            <li><a class="" href="#2_tab">Новые фильмы 2013</a></li>   
			    <li><a class="" href="#3_tab">Популярные фильмы</a></li>  
                            </ul> 
                            <div class="tabs-container">			
                                <div id="1_tab" class="tab-block">
                                <ul>       	
<div class="text2">{custom category="23,2,22,3,4,5,6,7,8,9,10,11,12,14,15,16,17,18,19,20,21" template="shortstory" aviable="global" from="0" limit="12" cache="yes"}</div> <!-- контент-->

				</ul>
                                </div>

<!-- end tab-block -->                                
                             

                                <div id="2_tab" class="tab-block">
                                    <ul>
<div class="text2">{custom category="drg" template="shortstory" aviable="global" from="0" limit="6" cache="no"}</div> <!-- новые сериалы-->
<center><a href="#">Все сериалы</a></center>
				    </ul>
                                    </div>

<!-- end tab-block -->

                                 <div id="3_tab" class="tab-block">
                                    <ul>
<div class="text2"></div>
				    </ul>
                                    </div>     
 
								
</div>
</div>
</div>

CSS
Код:
.games-gallery {
        width: 100%;
        float: left;
        padding-top: 15px;
}
        
.games-gallery .tabs-container {
        width: 100%;
        float: left;
        padding: 3px 0;
        background: #36353b url("../images/tabs_bg.png") repeat;
}

.tab-block {
        width: 100%;
        float: left;
        overflow: hidden;
}
            
.tab-block ul {
	list-style: none;
}
                
.tab-block li {
        /*width: 160px;*/
        height: 240px;
        float: left;
        margin: 7px 1px 7px 9px;
        padding: 3px;
        background: #edd606;
}
                
.tab-block li:hover {
	background: #0bb8e8;
}
                
.tab-block ul .img-b {
        width: 160px;
        height: 205px;
        float: left;
}
                    
.tab-block ul .img-b img {
	max-width: 160px;
	max-height: 200px;
}
                        
.tab-block ul .text-b {
        width: 100%;
        float: left;
        padding-top: 2px;
        font-size: 14px;
        color: #1d1d1d;
        text-align: center;
}
                    
.tab-block ul .text-b a {
	color: #1d1d1d;
	text-decoration: none;
}
        
div.tabs {
	float: left;
	width: 100%;
}
        
ul.tabNavigation {
        width: 100%;
        height: 33px;
        display: table;
        list-style: none;
        background: #f14400; /* Для старых браузров */
        background: -moz-linear-gradient(top, #ff4800, #f14400);
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#ff4800), color-stop(100%,#f14400));
        background: -webkit-linear-gradient(top, #ff4800, #f14400);
        background: -o-linear-gradient(top, #ff4800, #f14400);
        background: -ms-linear-gradient(top, #ff4800, #f14400);
        background: linear-gradient(top, #ff4800, #f14400);
        -pie-background: linear-gradient(#ff4800, #f14400);
        position: relative;
}

ul.tabNavigation li {
        display: table-cell;
        height: 33px;
        font-size: 11px;
        padding-left: 1px;
        text-transform: uppercase;
        text-align: center;
        background: url("../images/tabs_sep.png") left top no-repeat;
}
            
.tabNavigation li:first-child {
	padding-left: 0;
	background: none;
}


ul.tabNavigation a {
        height: 12px;
        display: block;
        padding: 10px 0 11px;
        position: relative;
        text-decoration: none;
        color: #fff;
}

ul.tabNavigation .selected {
        position: relative;
        outline: none; 
        text-decoration: none;
        background: #191919; /* Для старых браузров */
        background: -moz-linear-gradient(top, #404040, #191919);
        background: -webkit-gradient(linear, left top, left bottom,
        color-stop(0%,#404040), color-stop(100%,#191919));
        background: -webkit-linear-gradient(top, #404040, #0191919);
        background: -o-linear-gradient(top, #404040, #191919);
        background: -ms-linear-gradient(top, #404040, #191919);
        background: linear-gradient(top, #404040, #191919);
}
            
ul.tabNavigation em {
        width: 100%;
        height: 5px;
        position: absolute;
        left: 0;
        bottom: -5px;
        background: url("../images/tabs_poi.png") center top no-repeat;
        display: none;
}
            
ul.tabNavigation .selected em {
	display: block;
}
Как создать такие же ниже на странице с минимальными правками и чтобы они не конфликтовали?
Ответить с цитированием
  #2 (permalink)  
Старый 29.07.2013, 20:23
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

форум гуру js, а помочь никто не может
Ответить с цитированием
  #3 (permalink)  
Старый 29.07.2013, 22:15
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 16.12.2011
Сообщений: 4,415

MArtyn911, открою страшную тайну, когда код написан не понятно каким местом, обычно все влом , что то подсказывать .
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #4 (permalink)  
Старый 29.07.2013, 23:16
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 04.06.2009
Сообщений: 1,703

Цитата:
$(function(){var tabContainers=$("div.tabs-container > div");tabContainers.hide().filter(":first").show() ;$("div.tabs ul.tabNavigation a").click(function(){tabContainers.hide();$(this.h ash).fadeIn("slow",function(){tabContainers.filter (this.hash).show()});
$("div.tabs ul.tabNavigation a").removeClass("selected");$(this).addClass("sele cted");return false}).filter(":first").click();$("div.tabs ul.tabNavigation a").append("<em></em>")}));
Нам самим это отформатировать? Или так читать?
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #5 (permalink)  
Старый 29.07.2013, 23:30
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

Сообщение от Tim Посмотреть сообщение
Нам самим это отформатировать? Или так читать?
$(function () {
var tabContainers = $("div.tabs-container > div");
tabContainers.hide().filter(":first").show();
$("div.tabs ul.tabNavigation a").click(function () {
    tabContainers.hide();
    $(this.hash).fadeIn("slow", function () {
        tabContainers.filter(this.hash).show()
    });
    $("div.tabs ul.tabNavigation a").removeClass("selected");
    $(this).addClass("selected");
    return false
}).filter(":first").click();
$("div.tabs ul.tabNavigation a").append("<em></em>")
}));


Так лучше?
да не ругайтесь вы так сильно, что за люди помогают не помогают, а пнуть обязательно надо

Помогите решить вопрос, заранее благодарен за отзывчивость и помощь

Последний раз редактировалось MArtyn911, 29.07.2013 в 23:32.
Ответить с цитированием
  #6 (permalink)  
Старый 29.07.2013, 23:59
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 04.06.2009
Сообщений: 1,703

$(function () {

    function initTabs(tabs) {
        var tabsBox = $("div.tabs-container > div", tabs),
            buttons = $("ul.tabNavigation a", tabs);
        
        tabsBox.hide().filter(":first").show();
        
        buttons.click(function () {
            tabsBox.hide();
            $(this.hash, tabs).fadeIn("slow", function () {
                tabsBox.filter(this.hash).show();
            });
            buttons.removeClass("selected");
            $(this).addClass("selected");
            return false;
        });
        
        buttons.filter(":first").click();
        buttons.append("<em></em>");
    }
    
    $('.tabs').each(function (i, elem) {
        initTabs($(elem));
    });
});
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #7 (permalink)  
Старый 30.07.2013, 00:04
Аватар для Tim
Tim Tim вне форума
Профессор
Отправить личное сообщение для Tim Посмотреть профиль Найти все сообщения от Tim
 
Регистрация: 04.06.2009
Сообщений: 1,703

Цитата:
форум гуру js, а помочь никто не может
половина гуру забила на форум
__________________
Лучше установить FreeBSD, чем потратить 30 лет на Linux'ы и выяснить какой из них хуже.
Самые главные в жизни вещи - не вещи! (было написано на одном гараже =)
Ответить с цитированием
  #8 (permalink)  
Старый 30.07.2013, 13:27
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

Сообщение от Tim Посмотреть сообщение
$(function () {

    function initTabs(tabs) {
        var tabsBox = $("div.tabs-container > div", tabs),
            buttons = $("ul.tabNavigation a", tabs);
        
        tabsBox.hide().filter(":first").show();
        
        buttons.click(function () {
            tabsBox.hide();
            $(this.hash, tabs).fadeIn("slow", function () {
                tabsBox.filter(this.hash).show();
            });
            buttons.removeClass("selected");
            $(this).addClass("selected");
            return false;
        });
        
        buttons.filter(":first").click();
        buttons.append("<em></em>");
    }
    
    $('.tabs').each(function (i, elem) {
        initTabs($(elem));
    });
});
с js очень плохо знаком, как этот код привязать в моему html что бы содать еще однни табы, покажу на примере

нужно чтобы сверху и снизу работали табы
Ответить с цитированием
  #9 (permalink)  
Старый 30.07.2013, 16:36
Интересующийся
Отправить личное сообщение для MArtyn911 Посмотреть профиль Найти все сообщения от MArtyn911
 
Регистрация: 16.07.2013
Сообщений: 12

всем спасибо, все свободны как говорится, ход мыслей у меня был правильный, но по невнимательности добавил лишние
Цитата:
);
и функция не работала, тему можно закрывать
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите создать скрипт, предназначенный для вычисления по формуле sarfin Общие вопросы Javascript 1 22.03.2013 05:28
Помогите создать javascript для ВКонтакте roxana_babay Оффтопик 2 19.01.2011 05:43
Помогите создать скрипт замены картинок при наведении курсора. SantaS Я не знаю javascript 3 05.06.2009 11:59
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Работа 1 13.05.2009 23:41
Пожалуйста, помогите создать Web-страницу, содержащую заданную форму Mikhail Элементы интерфейса 2 13.05.2009 21:57