Применение функции readmore.js внутри содержимого вкладки

Question

Применение функции readmore.js внутри содержимого вкладки

0

Пожалуйста помоги. Мне не удалось вызвать функцию.readmore(), используя плагин readmore.js jquery внутри страницы tab'd, в то время как он хорошо работает на первой вкладке, но не на вкладках, которые неактивны. Вот моя проблема. У меня есть страница с 4 вкладками, и каждая вкладка имеет свой собственный контент. Я читал об этом readmore.js, который обрезает длинный текст с возможностью его расширения для чтения. Ниже приведен фрагмент jsp -

    <div class="tabbable">
        <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
            <li class="active project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#details">Project Details</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab1">Tab 1</a>
            </li>

            <li class=" project_li_Tabs">
                <a class="anchorTabs bolder" data-toggle="tab" href="#tab2">Alpha</a>
            </li>

        </ul>

        <div class="tab-content">
            <div id="details" class="tab-pane in active">

            <article> long text here..... </article>

            </div>

            <div id="tab1" class="tab-pane">

            <article> another long text here..... </article>

            </div>

            <div id="tab2" class="tab-pane">

            <article> another long text here..... </article>

            </div>

        </div> <!-- tab-content div ends here.. -->

        </div> <!-- tabbable div ends here.. -->

        <script src="../assets/js/jquery-2.0.3.min.js"></script>
        <script src="../assets/js/readmore.min.js"></script>

        <script type="text/javascript">


        jQuery(function($) {

        $('article').readmore({maxHeight: 100}); // This function applies good for the first tab, but when navigated to the next tab, the text is not trimmed..

        });

        </script>

Оцените свою помощь и предложения здесь. Я попытался применить эту функцию, привязавшись к событию щелчка на вкладке, но без помощи. Я также связал это с событием div-click, он работает только тогда, когда пользователь нажимает на вкладку div (содержимое внутри вкладки), что не так, как ожидалось.

Пожалуйста помоги...

Sirish 30 апр. 2014, в 19:55

Источник

Теги:

jquery

tabs

jquery-plugins

2 ответа

1

Я сделал это с этим кодом. Помещение функции "readmore" перед "вкладкой"

<script type="text/javascript">
    jQuery(document).ready(function($){
       $('.article').readmore();
       $('#tabs').tabs();

    });
</script>

Jhon 02 авг. 2014, в 00:59

Ещё вопросы

kpentchev · Accepted Answer · 2014-05-19T12-15-00.000Z

Мне удалось заставить его работать, используя следующий код:

$(function() {
    $(document).on( 'shown.bs.tab', 'a[data-toggle=\'tab\']', function (e) {
           $('.article').readmore({
                moreLink: '<a href="#">Expand</a>',
                maxHeight: 100
            });
        })
});

Это работает.! Спасибо, что поделились своим кодом.