X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Парочка вопросов по jQuery и bootstrap (вертикальные табы)
scanread
scanread
Topic Starter сообщение 21.8.2014, 2:35; Ответить: scanread
Сообщение #1


Доброго времени суток, уважаемые форумчане.

Пробую вывести вкладки в профиле вертикального типа. Частично подшаманил код, выводит хотя бы блоки, но не скрывает обратно. Где зарыта собака - без понятия. Ссылка страницы с табами test.scanread.name/users/admin

Если переключать - видно, что выводятся блоки. Но не прячутся обратно. В шаблоне внизу страницы подключены 2 скрипта

<script type='text/javascript' src='/templates/notepad/js/themify.builder.module.plugins.js'></script>
<script type='text/javascript' src='/templates/notepad/js/themify.builder.script.js'></script>

В первом есть вот такой участок кода, имеющий отношение к табам, я его немного пилил... :

Код
;(function ($) {
    $.fn.tabify = function () {
        return this.each(function () {
            var tabs = $(this);
            $('.tab-content', tabs).hide();
            $('ul.tab-nav li:first', tabs).addClass('current');
            $('div:first', tabs).show();
            var tabLinks = $('ul.tab-nav li', tabs);
            $(tabLinks).click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                urlrel = $(this).attr("rel");
                todir = $(this).attr("name");
                $('.tab-content', tabs).show();
                var activeTab = $(this).find('li').attr('name');
                $(activeTab).show();
                
                if (urlrel) {

$('#' + todir).html('Грузим-с...');
$('#' + todir).load(urlrel, {});
}
                return false;
            });
        });
    };
})(jQuery);


Во втором:

Код
tabs: function() {
            $(".module.module-tab").each(function(){
                $height = $(".tab-nav", this).outerHeight();
                if($height > 200) {
                    $(".tab-content", this).css('min-height', $height);
                }
            });
            $(".module.module-tab").tabify();
        },

        tabsDeepLink: function() {
            if($(window.location.hash).length > 0){
                $('a[href=' + window.location.hash + ']').click();
                $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
            }
        },


Здесь ничего не пилил.

Хтмл код самих табов у меня такой вот:

Код
<ul class="tab-nav">
                <li href="#upr_profile" name="upr_profile"><span>Промиль</span></li>
                <li rel="/actions/my_friends" name="upr_feed"><span>Лента</span></li>
                <li rel="/clubs/by_user_1" name="tab-clubs"><span>Клубы</span></li>
                                <li href="#upr_awards" name="upr_awards"><span>Награды</span></li>              
            </ul>


Т.е., поскольку ссылка является якорем, пришлось немного переписать код в том плане, чтобы убрать ссылку и попробовать вывести корректно табы через li rel= name= или li href, где name указывает на див с id=name, который должен отображаться, когда активный выбранный li. В общем, через инспектрацию элементов на странице с помощью браузера можно увидеть полный код и что на что указывает.

Кто разбирается, пожалуйста, помогите припудрить в рабочий вид. Заранее благодарю.

з.ы. по bootstrap вопрос будет после решения данного вопроса. Он аналогичный, в принципе, изменять надо будет сам скрипт бутстрепа, чтобы считывался пункт меню li по name или rel. Листал код, но не понял совсем в нем ничего.

з.ы.з.ы. прошу сильно не пинать и не гнать в шею) что поделать, люблю я красивости всякие куда-то цеплять. Кое-что выходит, делаю сам, а кое что, увы, еще не шарю. :pardon:


--------------------
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Karlasan
Karlasan
сообщение 21.8.2014, 12:00; Ответить: Karlasan
Сообщение #2


первый кусочек кода замени вот на это:
Код
(function ($) {
    $.fn.tabify = function () {
        return this.each(function () {
            var tabs = $(this);
            $('.tab-content', tabs).hide();
            $('ul.tab-nav li:first', tabs).addClass('current');
            $('div:first', tabs).show();
            var tabLinks = $('ul.tab-nav li', tabs);
            $(tabLinks).click(function () {
if($(activeTab))$(activeTab).hide();
                $(this).addClass('current').siblings().removeClass('current');
                urlrel = $(this).attr("rel");
                todir = $(this).attr("name");
                $('.tab-content', tabs).hide();
                var activeTab = $(this).closest('li').attr('name');

                $('#'+activeTab).show();
                
                if (urlrel) {

$('#' + todir).html('Подождите. Загружаю данные...');
$('#' + todir).load(urlrel, {});
}
                return false;
            });
        });
    };
})(jQuery);


Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Услуги по созданию и доработке скриптов PHP, MySQL, JavaScript, jQuery
Разработка сайтов и сервисов под-ключ
0 alexey 1174 24.11.2023, 14:46
автор: alexey
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВеб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
56 qpPeW 44776 19.7.2023, 10:03
автор: qpPeW
Открытая тема (нет новых ответов) Наполнение сайтов вопросов и ответов
1 Solonik 1362 3.2.2022, 0:31
автор: Vitelius900
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыWeb-разработка (C++/PHP/SQL/JS/Bootstrap). HighLoad проекты.
0 DF™ 1420 28.7.2020, 13:24
автор: DF™
Открытая тема (нет новых ответов) 1C-Bitrix, JavaScript\jQuery, Верстка HTML5 CSS3
1 byteeightlab 1459 2.7.2019, 7:37
автор: ychervov


 



RSS Текстовая версия Сейчас: 29.3.2024, 18:22
Дизайн