Материализовать CSS - выберите, чтобы не отображать

В настоящее время я работаю над материализацией CSS, и кажется, что я получил привязку к полям выбора.

Я использую пример, предоставленный со своего сайта, но, к сожалению, он визуализируется в представлении. Мне было интересно, сможет ли кто-то другой помочь.

То, что я пытаюсь сделать, это создать строку с двумя концевыми прокладками, которые обеспечивают заполнение - тогда внутри внутренних двух элементов строки должен быть введен поиск текста и выпадающее меню выбора.

Вот пример, над которым я работаю: http://materializecss.com/forms.html

Спасибо заранее.

Вот фрагмент кода, о котором идет речь.

<div class="row">
<form class="col s12">
    <div class="row">
        <div class="input-field col s2"></div>
        <div class="input-field col s5">
            <input id="icon_prefix" type="text" class="validate" />
            <label for="icon_prefix">Search</label>
        </div>
        <div class="input-field col s3">
            <label>Materialize Select</label>
            <select>
                <option value="" disabled="disabled" selected="selected">Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>
        <div class="input-field col s2"></div>
    </div>
</form>

ОТВЕТЫ

Ответ 1

Поскольку они переопределяют браузер по умолчанию, для выбора стиля требуется запуск Javascript. Вам нужно включить файл Materialize Javascript, а затем вызвать

$(document).ready(function() {
    $('select').material_select();
});

после того, как вы загрузили этот файл.

Ответ 2

Дизайн функциональности select для материализации CSS - это, на мой взгляд, довольно веская причина не использовать его.

Вы должны инициализировать элемент select с помощью material_select(), как упоминает @littleguy23. Если вы этого не сделаете, поле выбора даже не отображается! В старомодном приложении jQuery я могу инициализировать его в функции готовности документа. Угадайте, что ни я, ни многие другие люди не используют jQuery в наши дни, и мы не инициализируем наши приложения в готовом к работе документе.

Динамически созданный выбор. Что делать, если я создаю выбор динамически, например, происходит в рамках, например, Ember, который генерирует представления "на лету"? Я должен добавить логику в каждом представлении, чтобы инициализировать поле выбора каждый раз, когда создается представление, или написать представление mixin для обработки этого для меня. И это хуже того: когда создается представление, а в выражениях Ember выражается didInsertElement, привязка к списку параметров для поля выбора может еще не разрешиться, поэтому мне нужна специальная логика, наблюдающая список опций, чтобы подождите, пока он не заселен, прежде чем делать вызов material_select. Если параметры меняются, как легко могут, material_select не имеет понятия об этом и не обновляет выпадающий список. Я могу вызвать material_select снова, когда параметры меняются, но кажется, что это ничего не делает (игнорируется).

Другими словами, кажется, что предположение о дизайне за материализующими блоками выбора CSS заключается в том, что они все находятся там при загрузке страницы, и их значения никогда не меняются.

Реализация. С эстетической точки зрения, я также не сторонник того, как материализует CSS реализует свои выпадающие списки, а это создает параллельный теневой набор элементов где-то еще в DOM. Конечно, альтернативы, такие как select2, делают одно и то же, и не может быть другого способа добиться некоторых визуальных эффектов (на самом деле?). Для меня, однако, когда я проверяю элемент, я хочу видеть элемент, а не какую-то теневую версию где-то еще, что кто-то волшебным образом создал.

Когда Ember срывает представление, я не уверен, что материализует CSS, срывает созданные теневые элементы. На самом деле, я был бы очень удивлен, если это произойдет. Если моя теория верна, поскольку представления генерируются и срываются, ваш DOM в конечном итоге загрязняется десятками наборов теневых выпадающих списков, не связанных ни с чем. Это относится не только к Ember, но и к любой другой интерфейсной платформе OPA на основе MVC/шаблонов.

Наручники. Я также не смог понять, как получить значение, выбранное в диалоговом окне, для привязки к чему-либо полезному в такой структуре, как Ember, которая вызывает поля выбора через интерфейс типа {{view 'Ember.Select' value=country}}. Другими словами, когда что-то выбрано, country не обновляется. Это разбойник.

Волны. Кстати, те же самые проблемы касаются эффекта "волны" на кнопках. Вы должны инициализировать его каждый раз, когда создается кнопка. Я лично не забочусь о волновом эффекте и не понимаю, о чем идет речь, но если вам нужны волны, имейте в виду, что вы потратите большую часть своей жизни, беспокоясь о том, как инициализируйте каждую кнопку при ее создании.

Я ценю усилия, предпринятые материализованными ребятами из CSS, и там есть некоторые приятные визуальные эффекты, но он слишком велик и имеет слишком много исправлений, таких как выше, чтобы быть тем, что я использовал бы. Теперь я планирую вырвать материализацию CSS из своего приложения и вернуться либо к Bootstrap, либо к слою поверх Suit CSS. Ваши инструменты должны сделать вашу жизнь проще, а не сложнее.

Ответ 3

@littleguy23 Это правильно, но вы не хотите делать это для выбора multi. Так что просто небольшое изменение кода:

$(document).ready(function() {
    // Select - Single
    $('select:not([multiple])').material_select();
});

Ответ 4

Решение, которое сработало для меня, - это вызов функции "material_select" после загрузки данных параметров. Если вы распечатаете значение параметра OptionsList.find(). Count() в консоли, оно сначала 0, затем через несколько миллисекунд список будет заполнен данными.

Template.[name].rendered = function() {
this.autorun(function() {
    var optionsCursor = OptionsList.find().count();
    if(optionsCursor > 0){
         $('select').material_select();
    }
});

};

Ответ 5

Если вы используете Angularjs, вы можете использовать angular -materialize plugin, который предоставляет некоторые удобные директивы. Тогда вам не нужно инициализировать js, просто добавьте material-select к вашему выбору:

<div input-field>
    <select class="" ng-model="select.value1" material-select>
        <option ng-repeat="value in select.choices">{{value}}</option>
    </select>
</div>

Ответ 6

Для меня ни один из других ответов не работал, потому что я использую последнюю версию MaterializeCSS и Meteor, и существует несовместимость между версиями jquery, Meteor 1.1.10 использует jquery 1.11 (переопределение этой зависимости непросто и, вероятно, перерыв Meteor/Blaze) и тестирование Materialize с jquery 2.2 отлично работает. Подробнее см. fooobar.com/questions/62941/....

Это известная проблема с раскрывающимися списками и выборами в материализованных 0.97.2 и 0.97.3; для получения дополнительной информации см. https://github.com/Dogfalo/materialize/issues/2265 и https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931.

Я использую Sass версию MaterializeCSS в Meteor и работала над проблемой, используя поэтическое: [email protected] в моем файле метеоритных пакетов, чтобы заставить старую версию. Теперь выпадающие меню работают, старый jquery и все!

Ответ 7

Вызвать материализующий код jssery css только после рендеринга html. Таким образом, вы можете иметь контроллер, а затем запустить службу, которая вызывает код jquery в контроллере. Это сделает кнопку выбора в порядке. Как правило, если вы пытаетесь использовать ngChange или ngSubmit, это может не работать из-за динамического стиля тега select.

Ответ 8

Это тоже работает: class= "browser-default"

Ответ 9

Просто для того, чтобы следить за этим, поскольку главный ответ рекомендует не использовать materializecss... в текущей версии материализации вам больше не нужно инициализировать выборки.