Использование BGIFRAME в IE6 с автозаполнением YUI - PullRequest
Новая
       41

Использование BGIFRAME в IE6 с автозаполнением YUI

1 голос
/ 13 апреля 2011

Я пишу простой HTML-код, который использует автозаполнение YUI (для отображения предложения при вводе, как Google). Но блок <select> отображается над списком предложений только в IE6.

Работает нормально в других браузерах.

Я использовал bgiframe , чтобы избежать этого из-за ошибки z-index в IE6 , но безуспешно.

Мой простой код здесь: 

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>

<script type="text/javascript" charset="utf-8">
    $(function() {
        $('#myContainer').bgiframe();
    });
</script>

<style type="text/css">
    #myAutoComplete {
        width:25em; /* set width here or else widget will expand to fit its container */
        padding-bottom:2em;
    }
</style>
</head>
<body>
    <h1>Autocomplete using YUI !</h1>
    <label for="myInput">Search names in our database:</label>
    <div id="myAutoComplete" class="yui-skin-sam">
        <input id="myInput" type="text">
        <div id="myContainer"></div>
    </div>
    <br>
    <div>   
        <form action="#" method="get" accept-charset="utf-8">
            <select>
                <option value="val1">val1</option>
                <option value="val2">val2</option>
            </select>
        </form>
    </div>
</body>

Здесь выбор отображается поверх myContainer (myContainer отображает заполненные предложения). Я знаю, что совершаю грубую ошибку. Пожалуйста, помогите мне разобраться.

Ответы [ 2 ]

2 голосов
/ 13 апреля 2011

Одна вещь, которую вы можете сделать, это скрыть <select> (используйте visibility:hidden, чтобы не испортить раскладку) в начале процесса и показать его в конце.

Кстати: вероятностьнайти другого пользователя StackOverflow с помощью YUI + jQuery + bgiframe + ie6 довольно мало.Большинству пользователей нравится помогать с отладкой кода, а не плагинов.

1 голос
/ 14 апреля 2011

jQuery и YUI живут в отдельных пространствах имен, поэтому теоретически проблем быть не должно. Вы уверены, что нет ошибок JavaScript? Все ли библиотеки загружены правильно?

Может использовать вместо jQuery автозаполнение ?

Редактировать: Вы можете настроить автозаполнение YUI для использования iFrame ! Это работает в том смысле, что скрывает <select>, но не мгновенно. Это, вероятно, лучшее решение, так как оно не требует jQuery или bgiframe .

Редактировать 2: Я не был доволен скоростью, с которой YUI создал <iframe>, так что придумал этот взлом! Вот полное решение, которое, кажется, работает в IE6 для меня. Проблема в том, что YUI контролирует #myContainer, который, кажется, нарушает bgiframe, который устанавливает jQuery. Поэтому я решил просто манипулировать высотой #myContainer с помощью хуков метода YUI. Возможно, вам придется изменить это значение в соответствии с вашим макетом, но я надеюсь, что оно будет работать для вас.

Извините, изменение CSS - это jQuery. Я никогда раньше не использовал YUI и не представляю, как изменить свойства CSS в YUI: -) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        #myAutoComplete {
            width:15em; /* set width here or else widget will expand to fit its container */
            padding-bottom:2em;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/assets/skins/sam/autocomplete.css" />
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/connection/connection-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/animation/animation-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/autocomplete/autocomplete-min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.bgiframe.min.js"></script>
</head>
<body class="yui-skin-sam">
    <div id="myAutoComplete">
        <label for="myInput">Enter a state:</label><br/>
        <input id="myInput" type="text"/>
        <div id="myContainer"></div>
    </div>
    <div>
        <form action="#" method="get" accept-charset="utf-8">
            <p>
                <select>
                    <option value="val1">val1</option>
                    <option value="val2">val2</option>
                </select>
            </p>
        </form>
    </div>
    <script type="text/javascript">
        $(function() {
            $('#myContainer').bgiframe();
        });

        YAHOO.example.Data = {
            arrayStates: [
                'Alabama',
                'Alaska',
                'Arizona',
                'Arkansas',
                'New Hampshire',
                'New Jersey',
                'New Mexico',
                'New York',
                'Wyoming'
            ]
        }

        YAHOO.example.BasicLocal = function() {
            var oDS = new YAHOO.util.LocalDataSource(YAHOO.example.Data.arrayStates);
            var restoreHeight = function(sType, aArgs) {
                $('#myContainer').css({height:'auto'});
            };

            // Instantiate the AutoComplete
            var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
            oAC.prehighlightClassName = "yui-ac-prehighlight";
         //   oAC.useIFrame = true; // works but changes the container into an iFrame a bit too late for my liking
            oAC.doBeforeExpandContainer = function () {
                $('#myContainer').css({height:'50px'}); // might need to play around with this value
                return true;
            }
            // restore height
            oAC.containerCollapseEvent.subscribe(restoreHeight);
            oAC.useShadow = true;

            return {
                oDS: oDS,
                oAC: oAC
            };
        }();
    </script>
</body>
</html>
...