Поддержка Проблемы и решения Табы ; два независимых дизайна

  • Здравствуйте друзья! Продолжаю тему табов…http://ru.forums.wordpress.org/topic/%D0%A2%D0%B0%D0%B1%D1%8B-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D1%81%D0%BE%D1%85%D1%80%D0%B0%D0%BD%D1%8F%D1%8E%D1%82-%D1%81%D0%B2%D0%BE%D0%B5-%D0%BC%D0%B5%D1%81%D1%82%D0%BE%D0%BF%D0%BE%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B2%D0%BA%D0%BB?replies=19 но уже вопрос номер два! проблема такая…создал табы…все работает на ура…но есть проблема…в header.php как говорилось выше поставил код

    <script>
      $(document).ready(function() {
        var cookie = $( "#tabs" ).tabs( "option", "cookie" );
        $( "#tabs" ).tabs( "option", "cookie", { expires: 30 } );
        $( "#tabs" ).tabs({ cookie: { expires: 30 } });
        $("#tabs").tabs();
      });
      </script>

    и в single.php вывел табы

    <div id="<strong>tabs</strong>">
        <ul id="tabs">
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
        </ul>
        <div id="fragment-1">
           ...
        </div>
        <div id="fragment-2">
           ...
        </div>
    </div>

    как видно ID=tabs
    т.е если я вывожу в сайдбаре таб и присвою ему
    ID=tabs1 и пропишу в header.php

    <script>
      $(document).ready(function() {
        var cookie = $( "#tabs1" ).tabs( "option", "cookie" );
        $( "#tabs1" ).tabs( "option", "cookie", { expires: 30 } );
        $( "#tabs1" ).tabs({ cookie: { expires: 30 } });
        $("#tabs1").tabs();
      });
      </script>

    То таб работает но вкладки не запоминают своих мест после перезагруки и эта участь ждет сразу и второй таб т.е два таба перестают запоминать позиции вкладок и после перезагрузки страницы активной становится третья вкладка…Т.е скажите пожалуйста…как создать два таба на сайте выше указанным методом но чтобы они работали отдельно друг от друга! Да кстати если я ставлю тупо тот же код из single.php в сайдбар…то в сайдбаре работает все а на single.php нет! Данная проблема назрела после того как я решил создать два сайдбара + два независимых дизайна табов

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • проблема может быть в том, что функция .tabs() присваивает данные, предназначенные для разных Табов одной и той же куке… то-есть, щелкая сначала по #tabs, Вы заносите в куки инфу, потом щелкая по #tabs1 — Вы эту инфу затираете новой..
    Решением может быть изучение и правка функции .tabs()

    Думаю что вы не правы! я уже писал что после перезагрузки страницы активной становится третья вкладка неважно на какую вкладку я нажимаю и нажимал…куки вообще перестают работать! Может вы хотите сказать что .tabs и .tabs1 это в какой то мере одинаковые названия функции…т.е наверно надо сменить имя второй функции на что нить другое..типо word

    <script>
      $(document).ready(function() {
        var cookie = $( "#word" ).tabs( "option", "cookie" );
        $( "#word" ).tabs( "option", "cookie", { expires: 30 } );
        $( "#word" ).tabs({ cookie: { expires: 30 } });
        $("#word").tabs();
      });
      </script>

    Над проверить!

    Ах вы имели ввиду вот эти места в скрипте!!!

    <script>
      $(document).ready(function() {
        var cookie = $( "#word" )<strong>.tabs</strong>( "option", "cookie" );
        $( "#word" )<strong>.tabs</strong>( "option", "cookie", { expires: 30 } );
        $( "#word" )<strong>.tabs</strong>({ cookie: { expires: 30 } });
        $("#word")<strong>.tabs</strong>();
      });
      </script>

    Вот поточнее
    <script>
    $(document).ready(function() {
    var cookie = $( «#tabs» ).tabs( «option», «cookie» );
    $( «#tabs» ).tabs( «option», «cookie», { expires: 30 } );
    $( «#tabs» ).tabs({ cookie: { expires: 30 } });
    $(«#tabs»).tabs();
    });
    </script>
    А их можно менять интересно?

    $(document).ready(function()
    А почему вы не используете рекомендованный noConflict mode?
    http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    vjpo Хорошая задумка…надо проверить…но в случае куков думаю может не проканать!

    дело в том, что noConflict mode используют, если помимо jQuery на сайте есть другие библиотеки (Mutools, etc.) Тут ситуация мне кажется совсем другой.. можете скинуть ссылку на сайт, где должно быть 2 разных таба?

    а по поводу .tabs — это функция jQuery.ui, думаю есть смысл порыться в документации…

    Буду рыться! А сайт на локалке! Дать ссылку не получится! ХА КАЖИСЬ РАБОТАЕТ!
    вот пример работы первого блока
    в header.php вставил

    <script>
      $(document).ready(function() {
        var cookie = $( "#tabss" ).tabs( "option", "cookie" );
        $( "#tabss" ).tabs( "option", "cookie", { expires: 30 } );
        $( "#tabss" ).tabs({ cookie: { expires: 30 } });
        $("#tabss").tabs();
      });
      </script>

    в сайдбар

    <div id="tabss">
        <ul id="tabz">
            <li  style="border-right:1px solid #fff;padding-right:10px;"><a href="#fragment-1"><span>Последние записи</span></a></li>
            <li style="padding-left:16px;"><a href="#fragment-2"><span>Календарь</span></a></li>
        </ul>
        <div id="fragment-1">
    	<ul class='popular_posts'>
    		<?php tj_tabs_latest(get_theme_mod('tabber_popular_num',5), get_theme_mod('tabber_thumb')); ?>
    	</ul>
        </div>
        <div id="fragment-2">
           <?php get_calendar(); ?>
        </div>
    </div>

    а вот второй таб

    <script>
      jQuery(document).ready(function() {
        var cookie = jQuery( "#bsss" ).tabs( "option", "cookie" );
        jQuery( "#bsss" ).tabs( "option", "cookie", { expires: 30 } );
        jQuery( "#bsss" ).tabs({ cookie: { expires: 30 } });
        jQuery("#bsss").tabs();
      });
      </script>

    и соответственно

    <div id="bsss">
        <ul id="bss">
            <li  style="border-right:1px solid #fff;padding-right:10px;"><a href="#fragment-1"><span>Последние записи</span></a></li>
            <li style="padding-left:16px;"><a href="#fragment-2"><span>Календарь</span></a></li>
        </ul>
        <div id="fragment-1">
    	<ul class='popular_posts'>
    		<?php tj_tabs_latest(get_theme_mod('tabber_popular_num',5), get_theme_mod('tabber_thumb')); ?>
    	</ul>
        </div>
        <div id="fragment-2">
           <?php get_calendar(); ?>
        </div>
    </div>

    катина табов…два таба(календарь и последние записи)…вкладки запоминают местоположение…дизайн соответственно можно делать любой опираясь от div и ul…

    http://i001.radikal.ru/1109/80/654a1d79f895.png
    Всем спасибо за решение вопроса! Огромная благодарность vjpo и andrey_zb за подсказки!

    Красота 🙂

    кстати, для большей красоты обычно

    jQuery(document).ready(function() {
    var cookie = jQuery( «#bsss» ).tabs( «option», «cookie» );
    jQuery( «#bsss» ).tabs( «option», «cookie», { expires: 30 } );
    jQuery( «#bsss» ).tabs({ cookie: { expires: 30 } });
    jQuery(«#bsss»).tabs();
    });

    — эти куски вставляют в файл script.js, а его инклудят в header.php с помощью
    <?php wp_enqueue_script( ‘script’, get_bloginfo(‘template_url’).»/script.js» )?> в секции <head> или с помощью <script type=»text/javascript» src=»script.js»></script> в любом месте страницы

    Andrey Зачем народ путать и добавлять ненужный файл к загрузке! Неправильно однако вы пишите!Надо помнить про оптимизацию кода!Данный код лучше вставить либо в <head> либо на страничку на которой осуществляется данный функционал…но из-за его мелкости…это на скорость не повлияет!

    можно из functions.php

    function load_dom_ready_js() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function() {
        // код
        });
    </script>
    <?php }
    }
    add_action('wp_head', 'load_dom_ready_js');

    vjpo Вот это правильное решение!

    В чем я не прав? Ведь мое решение — это тоже часть оптимизации.. Объясню почему:
    1) Все пользовательские javascript собраны в одном месте, их не нужно искать по всем файлам, где они могут встречаться
    2) Один раз загруженный и сохраненный в кеше файл все же лучше, чем странички, которые больше размером.. Ведь это здесь код занимает 10 строк.. А может ведь занимать и 100

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • Тема «Табы ; два независимых дизайна» закрыта для новых ответов.