В настоящее время я работаю над материализацией 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>
Поскольку они переопределяют браузер по умолчанию, для выбора стиля требуется запуск Javascript. Вам нужно включить файл Materialize Javascript, а затем вызвать
$(document).ready(function() {
$('select').material_select();
});
после того, как вы загрузили этот файл.
Дизайн функциональности 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. Ваши инструменты должны сделать вашу жизнь проще, а не сложнее.
@littleguy23 Это правильно, но вы не хотите делать это для выбора multi. Так что просто небольшое изменение кода:
$(document).ready(function() {
// Select - Single
$('select:not([multiple])').material_select();
});
Решение, которое сработало для меня, - это вызов функции "material_select" после загрузки данных параметров. Если вы распечатаете значение параметра OptionsList.find(). Count() в консоли, оно сначала 0, затем через несколько миллисекунд список будет заполнен данными.
Template.[name].rendered = function() {
this.autorun(function() {
var optionsCursor = OptionsList.find().count();
if(optionsCursor > 0){
$('select').material_select();
}
});
};
Если вы используете 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>
Для меня ни один из других ответов не работал, потому что я использую последнюю версию 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 и все!
Вызвать материализующий код jssery css только после рендеринга html. Таким образом, вы можете иметь контроллер, а затем запустить службу, которая вызывает код jquery в контроллере. Это сделает кнопку выбора в порядке. Как правило, если вы пытаетесь использовать ngChange или ngSubmit, это может не работать из-за динамического стиля тега select.
Это тоже работает: class= "browser-default"
Просто для того, чтобы следить за этим, поскольку главный ответ рекомендует не использовать materializecss... в текущей версии материализации вам больше не нужно инициализировать выборки.