tinyScroll не включен - PullRequest
Новая
       10

tinyScroll не включен

1 голос
/ 20 декабря 2011

Я пытаюсь использовать плагин tinyscrollbar http://baijs.nl/tinyscrollbar/

как это: 

$('#nvl2 .content').html( '<div class="scrollbar">'+
                                        '<div class="track">'+
                                            '<div class="thumb"><div class="end"></div></div>'+
                                        '</div>'+
                                  '</div>'+
                                  '<div class="viewport">'+
                                        '<div class="overview">' +$('#nvl2 .content').html()+'</div>'+
                                   '</div></div>'   ).attr('id','sc2');

                $('#sc2').tinyscrollbar();

это вызывается прямо перед вызовом ajax, который загружает новый контент в # nvl2, но tinyscroll не включен и firebug не выдает никаких ошибок

CSS: 

/**************/
/* Tiny Scrollbar */
#nvl1 {   }
#nvl1 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl1 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl1 .disable { display: none; }

/**************/
/* Tiny Scrollbar */
#nvl2{   }
#nvl2 .viewport { ¡overflow: hidden; position: relative; width:100% }
#nvl2 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#nvl2 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#nvl2 .track { background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#nvl2 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#nvl2 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#nvl2 .disable { display: none; }

и это пример содержимого после выполнения вызова ajax 

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
    <div class="content" style="display: block;">
        <div class="scrollbar">
            <div class="track">
                <div class="thumb">
                    <div class="end">
                    </div>
                </div>
            </div>
        </div>
        <div class="viewport">
            <div class="overview">
                <span class="close"></span>
                <div class="contentHeader">
                    <div class="contentHeaderImg">
                        <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
                    </div>
                    <h2>Red Level Glove</h2>
                    <h4>The boutique hotel within the hotel</h4>
                </div>
                <div class="contentImg">
                    <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
                </div>
                <div class="contentTxt">
                    <p>
                        Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
                    </p>
                    <p>
                        The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="extra" style="width: 418px;">
    </div>
</div>

А до вызова ajax и init для tinyscrollbar: 

<div class="level" id="nvl2" style="left: 540px; display: block; height: 663px; z-index: 1;">
        <div class="content" style="display: block;">
                    <span class="close"></span>
                    <div class="contentHeader">
                        <div class="contentHeaderImg">
                            <img alt="redLevel" class="attributeImgLogo" src="img/cnt/redLevel.png">
                        </div>
                        <h2>Red Level Glove</h2>
                        <h4>The boutique hotel within the hotel</h4>
                    </div>
                    <div class="contentImg">
                        <img class="attributeImg" alt="drink" src="img/cnt/redLevelDrink.jpg">
                    </div>
                    <div class="contentTxt">
                        <p>
                            Red Level Lounge: Exclusive VIP Red Level Lounge featuring private check-in with a welcome glass of Veuve Clicquot Grande Dame champagne.
                        </p>
                        <p>
                            The Red Level Family Concierge experience is offered in select resort locations. Luxuries include separate VIP check-in lounge exclusively for Family Concierge clients, designated family pools, premium suite accommodations designed with families in mind, upgraded ensuite amenities.
                        </p>
                    </div>
                </div>

        <div class="extra" style="width: 418px;">
        </div>
    </div>

и можно проверить здесь: http://toniweb.us/gm Есть идеи, что мне не хватает?

Ответы [ 2 ]

2 голосов
/ 20 декабря 2011

Что вы имели в виду под 

...).attr('sc2');

в вашем коде? Функция .attr () с одним параметром является геттером для значения атрибута. Вы хотите установить идентификатор для элемента? Если это была ваша идея, то лучше вставить этот идентификатор в этот HTML-код: 

<div id="sc2" class="scrollbar">

На вашей странице, когда выполнение выходит на линию с инициализацией tinyScrollbar: 

$('#sc2').tinyscrollbar();

Нет элемента с идентификатором 'sc2', и поэтому полоса прокрутки не отображается, а в firebug нет ошибок.

0 голосов
/ 27 декабря 2012

Попробуйте использовать метод tinyscrollbar_update (). Я столкнулся с проблемой, в то время как я должен изменить содержание по запросу ajax. и это работает для меня нормально. Полная документация на http://baijs.nl/tinyscrollbar/

...