it-swarm.com.ru

Материализуйте 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>

109
Ryan Rentfro

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

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

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

237
jameslittle230

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

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

Динамически созданные выборки . Что, если я создаю выборки динамически, как, например, в среде, подобной Ember, которая генерирует представления на лету? Я должен добавить логику в каждое представление, чтобы инициализировать поле выбора каждый раз, когда создается представление, или написать миксин представления, чтобы справиться с этим для меня. И что еще хуже: когда генерируется представление и в терминах 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, и там есть несколько визуальных эффектов Nice, но они слишком большие и содержат слишком много ошибок, таких как приведенные выше, чтобы я мог их использовать. Сейчас я планирую извлечь материализацию CSS из моего приложения и вернуться либо к Bootstrap, либо к слою поверх Suit CSS. Ваши инструменты должны сделать вашу жизнь проще, а не сложнее.

45
user663031

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

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

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

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

};

3
Brandiqa

Если вы используете Angularjs, вы можете использовать плагин angular-materialize , который предоставляет несколько удобных директив. Тогда вам не нужно инициализировать в 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>
3
Artemis_134

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

2
Abel

Для меня ни один из других ответов не сработал, потому что я использую последнюю версию MaterialiseCSS и Meteor, и существует несовместимость между версиями jquery, Meteor 1.1.10 использует jquery 1.11 (переопределить эту зависимость нелегко и, вероятно, сломать Meteor/Blaze) и тестирование Materialise с помощью jquery 2.2 работает нормально. См. https://stackoverflow.com/a/34809976/2882279 для получения дополнительной информации.

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

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

2
Mozfet

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

1
Nitish Phanse

Во-первых, убедитесь, что вы инициализируете его в document.ready вот так:

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

Затем заполните его своими данными так, как вы хотите. Мой пример:

    function FillMySelect(myCustomData) {
       $("#mySelect").html('');

        $.each(myCustomData, function (key, value) {
           $("#mySelect").append("<option value='" + value.id+ "'>" + value.name + "</option>");
        });
}

Убедитесь, что после того, как вы закончили с населением, активировать этот контент можно следующим образом:

$("#mySelect").trigger('contentChanged');
0
Alejandro Bastidas

Я оказался в ситуации, когда с помощью выбранного решения

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

по какой-то причине выдает ошибки, потому что функция material_select () не может быть найдена . Невозможно было просто сказать <select class="browser-default... Потому что я использовал фреймворк, который автоматически отображал формы. Поэтому я решил добавить класс, используя js (Jquery)

<script>
 $(document).ready(function() {
   $('select').attr("class", "browser-default")
});

0
unlockme