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



 

Здравствуйте, гость ( Вход | Регистрация )

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


ДЕТАЛИ В ПРОФИЛЕ
******

Группа: Active User
Сообщений: 1005
Регистрация: 16.12.2009
Поблагодарили: 178 раз
Репутация:   54  


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

Пробую вывести вкладки в профиле вертикального типа. Частично подшаманил код, выводит хотя бы блоки, но не скрывает обратно. Где зарыта собака - без понятия. Ссылка страницы с табами 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


Участник
***

Группа: User
Сообщений: 122
Регистрация: 25.4.2008
Поблагодарили: 63 раза
Репутация:   19  


первый кусочек кода замени вот на это:
Код
(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);


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Веб-разработка (HTML5, CSS3, JavaScript, jQuery, Ajax, PHP)
18 qpPeW 3334 Сегодня, 13:32
автор: qpPeW
Открытая тема (нет новых ответов) Frontend услуги (верстка, подключение jquery плагинов, кастомизация, написание скриптов)
услуги по frontend-разработке
15 FrontMaster 3201 25.11.2017, 13:46
автор: Stom
Открытая тема (нет новых ответов) Несколько вопросов о переезде на https
Как влияет на сайт и стоит ли оно того?
16 PostBrigada 2998 23.11.2017, 13:49
автор: SergeiVL
Открытая тема (нет новых ответов) Пара вопросов по iphone
10 kesn 1172 22.11.2017, 16:25
автор: wertu
Открытая тема (нет новых ответов) Ишем верстальшика - bootstrap
с опытом работы в bootstrap
13 AWARO 981 3.11.2017, 22:07
автор: vadosseo


 



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