Кнопка jQuery UI не перемещается при прокрутке div в IE6 и IE7 (и иногда исчезает) - PullRequest
Новая
       53

Кнопка jQuery UI не перемещается при прокрутке div в IE6 и IE7 (и иногда исчезает)

4 голосов
/ 30 марта 2011

У меня есть div, который прокручивает (главная страница не имеет полос прокрутки) и кнопку пользовательского интерфейса jQuery в контенте, который можно прокручивать. В IE6 и IE7 кнопка не прокручивается вместе с содержимым div, и она делает забавные вещи, если над ней навести курсор мыши, когда она не в правильном положении.

Вот пример (jQuery 1.5 включен в заголовок): 

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test'>test button</a>
    </div>
</div>
<script>
    $('#test').button();
</script>

Я нашел обходной путь, но он не идеален; Я ловлю событие прокрутки и вызываю .button('enable') на элементе кнопки (по какой-то причине .button('refresh') ничего не сделал). Это заставляет кнопку прокручиваться правильно, но теперь при прокрутке кнопка отображается за пределами элемента div (она прокручивается выше верхней части элемента div и все еще видна). Вот код: 

<link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" />
<script type="text/javascript" src="Lib/jquery-1.5.min.js"></script>
<script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"></script>

<div class='scrollingDiv' style="width: 400px; height: 300px; overflow: scroll;">
    <div style="width: 400px; height: 1200px;">
        Hello world<br /><br />
        <a href='#' id='test' class='scrollingButton'>test button</a>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('#test').button();

        $('.scrollingDiv').scroll(function() {
            $('.scrollingButton').button('enable');
        });
    });
</script>

Ответы [ 3 ]

4 голосов
/ 06 мая 2011

Похоже, что это связано с ошибкой в ​​jQuery http://bugs.jqueryui.com/ticket/5281

Обходной путь должен установить position:relative; для контейнера прокрутки.

Как прокомментировал fracmak в этом билете jQuery:IE7 имеет проблемы с переполнением div (как прокрутки, так и скрытых).Это не то, что пользовательский элемент управления может реально контролировать / обнаруживать.

0 голосов
/ 13 июля 2011

Обходной путь # 2 добавлен для аккордеона, вкладок, ввода [type = submit] и т. Д .: http://bugs.jqueryui.com/ticket/5281#comment:10

0 голосов
/ 30 марта 2011

Я думаю, вам нужно добавить в начале тега script следующее предложение: 

    $(function(){

ваш код здесь

});

thisозначает, что скрипт будет загружен, когда dom (страница) будет готова.

Вы также можете добавить к тегу атрибут type = "text / javascript"

Я думаю, что это сработает!

...