выбранный базовый интерфейс плагина jquery не работает

Я хочу использовать выбранный плагин jquery так же, как тот же пример, который они используют на официальном сайте: http://harvesthq.github.io/chosen/

введите здесь описание изображения

Это мои файлы:

введите здесь описание изображения

Это index.html:

<html>
    <body>
        <head>
            <script src="jquery-1.9.1.js"></script>
            <script src="chosen.jquery.js"></script>
            <link rel="stylesheet" href="chosen.css">
        </head>
        <body>
            <script type="text/javascript">
                $(".chosen-select").chosen()
            </script>


            <select class="chosen-select" tabindex="8" multiple="" style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected="">Sloth Bear</option>
                <option disabled="">Sun Bear</option>
                <option selected="">Polar Bear</option>
                <option disabled="">Spectacled Bear</option>
            </select>
        </body>
    </body>
</html>

Результат выглядит следующим образом:

введите здесь описание изображения

Неправильно? Я видел html-код, сгенерированный официальной страницей, и это было не то же самое. Когда я изменил свой код на этот:

<html>
    <head>
        <script src="jquery-1.9.1.js"></script>
        <script src="chosen.jquery.js"></script>
        <link rel="stylesheet" href="chosen.css">

        <script type="text/javascript">
            $(".chosen-select").chosen()
        </script>
    </head>
    <body>
        <select data-placeholder="Your Favorite Types of Bear" style="width:350px; display:none" multiple class="chosen-select" tabindex="-1">
            <option value=""></option>
            <option>American Black Bear</option>
            <option>Asiatic Black Bear</option>
            <option>Brown Bear</option>
            <option>Giant Panda</option>
            <option selected>Sloth Bear</option>
            <option disabled>Sun Bear</option>
            <option selected>Polar Bear</option>
            <option disabled>Spectacled Bear</option>
        </select>

        <div class="chosen-container chosen-container-multi" style="width: 350px;" title="">
            <ul class="chosen-choices">
                <li class="search-field">
                    <input class="default" type="text" style="width: 183px;" autocomplete="off" value="Your Favorite Types of Bear" tabindex="8">
                </li>
            </ul>

            <div class="chosen-drop">
                <ul class="chosen-results">
                    <li class="active-result" data-option-array-index="1" style="">American Black Bear</li>
                    <li class="active-result" data-option-array-index="2" style="">Asiatic Black Bear</li>
                    <li class="active-result" data-option-array-index="3" style="">Brown Bear</li>
                    <li class="active-result" data-option-array-index="4" style="">Giant Panda</li>
                    <li class="active-result" data-option-array-index="5" style="">Sloth Bear</li>
                    <li class="disabled-result" data-option-array-index="6" style="">Sun Bear</li>
                    <li class="active-result" data-option-array-index="7" style="">Polar Bear</li>
                    <li class="disabled-result" data-option-array-index="8" style="">Spectacled Bear</li>
                </ul>
            </div>
        </div>          
    </body>
</html>

Я получил это:

введите здесь описание изображения

Нужно ли мне делать что-то еще, чтобы получить тот же результат, что и в официальном примере?


javascript html jquery jquery-chosen
person Zinov    schedule 28.12.2013    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Попробуйте это в index.html

$(window).load(function(){
$(".chosen-select").chosen()
});

ДЕМО

person Sridhar R    schedule 28.12.2013

arrow_upward
8
arrow_downward

Причина, по которой этот код не работал, заключается в том, что он появлялся перед элементом select в исходном порядке — таким образом, когда скрипт запускался, в DOM (объектной модели документа) не было соответствующих элементов, к которым можно было бы применить выбранные методы плагина.

Многие разработчики теперь размещают свои скрипты внизу страницы — прямо перед закрывающим тегом элемента body — что помогает гарантировать, что элементы, с которыми вы хотите взаимодействовать, в данный момент находятся в DOM, и повышает производительность, поскольку браузер перестает загружаться. DOM или любые другие активы (они обычно загружаются параллельно/одновременно), когда он достигает скрипта, возобновляя работу только после его выполнения. Это в основном связано с устаревшими причинами, когда разработчики использовали document.write для динамического добавления контента на страницу — ожидалось, что этот контент должен появиться там, где находится скрипт, а не там, где браузер достиг построения DOM, когда оператор записи был называется.

Я бы изменил ваш первый пример следующим образом:

<!doctype html>
<html>
    <body>
        <head>
            <title>Add a title</title>
            <link rel="stylesheet" href="chosen.css">
        </head>
        <body>
            <select class="chosen-select" tabindex="8" multiple style="width:350px;" data-placeholder="Your Favorite Types of Bear">
                <option value=""></option>
                <option>American Black Bear</option>
                <option>Asiatic Black Bear</option>
                <option>Brown Bear</option>
                <option>Giant Panda</option>
                <option selected>Sloth Bear</option>
                <option disabled>Sun Bear</option>
                <option>Polar Bear</option>
                <option disabled>Spectacled Bear</option>
            </select>

            <script src="jquery-1.9.1.js"></script>
            <script src="chosen.jquery.js"></script>
            <script>
                $(document).ready(function() {
                    $(".chosen-select").chosen();
                 });
             </script>
    </body>
</html>

Это работает двумя способами. Во-первых, скрипты размещаются в конце страницы, поэтому при запуске элемент select уже должен находиться в DOM. Во-вторых, обработчик события готовности документа гарантирует, что созданная нами анонимная функция не будет запущена до тех пор, пока браузер полностью не загрузит/построит DOM. Код находится в функции, иначе он будет немедленно выполнен браузером (и возникнет синтаксическая ошибка, поскольку готовый метод ожидает функцию в качестве параметра). Событие готовности документа (известное в современных браузерах как DOMContentLoaded) предпочтительнее, чем window.onload, поскольку оно срабатывает до события загрузки окна, возможно, пока браузер все еще загружает изображения или другие большие ресурсы, необходимые странице. . Это означает, что ваша страница с меньшей вероятностью внезапно изменится после того, как пользователь начал с ней взаимодействовать.

Некоторые другие моменты-

  • Вам обязательно нужен тип документа в ваших документах
  • Старайтесь всегда помещать таблицы стилей перед скриптами
  • У вас было два закрывающих тега элемента body
  • В любой момент времени может быть выбран только один вариант выбора — иметь выбранный атрибут.
  • Атрибуты Multiple, selected и disabled являются булевыми атрибутами, значения не требуются (можно удалить ="")

См. http://learn.jquery.com/using-jquery-core/document-ready/ узнать больше

person pwdst    schedule 01.01.2014