Матеріалізуйте CSS - виберіть "Не видається для відображення"

Зараз я працюю з матеріалізацією CSS, і, здається, я зашився полями виділення.

Я використовую приклад, поданий з їхнього сайту, але, на жаль, він відображається у поданому вигляді. Мені було цікаво, чи може хтось інший допомогти.

Що я намагаюся зробити, це створити рядок із 2-х кінцевих пробілів, які забезпечують прокладку - тоді у внутрішніх елементах двох рядків має бути введення тексту пошуку та спадне меню вибору пошуку.

Це приклад, з якого я працюю: 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, на мій погляд, досить вагомий привід не використовувати його.

Ви повинні ініціалізувати вибраний елемент material_select(), як згадує @ littleguy23. Якщо цього не зробити, поле вибору навіть не відображається! У старомодному додатку jQuery я можу ініціалізувати його у функції, готовій до документа. Здогадаєтеся, що ні я, ні багато інших людей не використовуємо jQuery в наші дні, а також ми не ініціалізуємо свої програми в готовому документі.

Динамічно створений вибір . Що робити, якщо я створюю вибрані динамічно, такі як відбувається в такій рамці, як Ембер, яка генерує погляди на льоту? Я маю додати логіку в кожному огляді, щоб ініціалізувати поле вибору кожного разу, коли генерується представлення, або написати змішаний вигляд, щоб обробити це для мене. І це гірше, ніж це: коли генерується представлення, і в Ембер термінах didInsertElementвикликається, прив'язка до списку параметрів для поля вибору ще не була вирішена, тому мені потрібна спеціальна логіка спостереження за списком параметрів, щоб зачекати, поки він не буде заповнюється перед викликом до material_select. Якщо параметри змінюються, як вони легко можуть, material_selectпоняття про це не має і не оновлює спадне меню. Я можу зателефонувати material_selectще раз, коли параметри змінюються, але виявляється, що це нічого не робить (ігнорується).

Іншими словами, здається, що припущення дизайну, що стоїть у вікні вибору CSS, полягає в тому, що вони всі знаходяться під час завантаження сторінки, і їх значення ніколи не змінюються.

Впровадження . З естетичної точки зору я також не прихильний до того, як матеріалізація CSS реалізує свої спадні місця, а це створити паралельний, тіньовий набір елементів десь ще в DOM. Зрозуміло, альтернативи, такі як select2, роблять те ж саме, і іншого способу досягти деяких візуальних ефектів (можливо?) Може бути не існує. Мені, однак, коли я оглядаю елемент, я хочу бачити елемент, а не якусь тіньову версію деінде, яку хтось магічним чином створив.

Коли Ембер руйнує погляд, я не впевнений, що матеріалізований CSS розриває тіньові елементи, які він створив. Насправді я був би дуже здивований, якщо це станеться. Якщо моя теорія правильна, оскільки погляди генеруються та знищуються, ваш DOM в кінцевому підсумку забрудниться десятками наборів тіньових спадів, не пов’язаних ні з чим. Це стосується не лише Ембер, але й будь-якого іншого фронтального основи OPA на основі шаблону MVC / шаблону.

В'язки . Я також не зміг зрозуміти, як отримати значення, вибране в діалоговому вікні, щоб прив’язатись до всього корисного в рамках, наприклад, Ember, що викликає вибрані поля через {{view 'Ember.Select' value=country}}інтерфейс типу. Іншими словами, коли щось вибрано, countryоновлення не оновлюється. Це розбійник угод.

Хвилі . До речі, ті ж самі питання стосуються ефекту "хвилі" на кнопках. Ви повинні ініціалізувати його щоразу, коли створюється кнопка. Мені особисто байдуже хвильовий ефект і не розумію, у чому вся суєта, але якщо ви хочете хвилі, будьте в курсі, що ви витратите добру частину свого життя, переймаючись питаннями, як це зробити ініціалізуйте кожну кнопку, коли вона створена.

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

@ littleguy23 Це правильно, але ви не хочете робити це для вибору декількох. Отже, лише невелика зміна коду:

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

Це працювало для мене, без jquery або select обгортки з класом введення, просто material.js і цей ванільний js:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('select');
    var instances = M.FormSelect.init(elems);
});

Як ви можете сказати, я отримав фактичний стиль materialize css, а не браузер за замовчуванням.

Це також працює: class = "browser-default"

Якщо ви використовуєте Angularjs, ви можете використовувати плагін кутового матеріалізації , який надає деякі зручні вказівки. Тоді вам не потрібно ініціалізувати у 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>

Для мене працювало рішення - викликати функцію 'material_select' після завантаження даних параметрів. Якщо ви виведете на консоль значення OptionsList.find (). Count (), це спочатку 0, а через кілька мілісекунд список заповнений даними.

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

Для мене жоден з інших відповідей не працював, тому що я використовую останню версію MaterializeCSS та Meteor, і між версіями jquery є незмінність, Meteor 1.1.10 використовує jquery 1.11 (переосмислити цю залежність непросто і, ймовірно, зламається Meteor / Blaze) і тестування Materialize with jquery 2.2 працює чудово. Дивіться https://stackoverflow.com/a/34809976/2882279 для отримання додаткової інформації.

Це відома проблема зі спаданнями та вибирається в матеріалі 0,97,2 та 0,97,3; для отримання додаткової інформації див https://github.com/Dogfalo/materialize/isissue/2265 та https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Я використовую версію Sass MaterializeCSS в Meteor і вирішував проблему, використовуючи поетичний: materialize-scss@1.97.1 у файлі пакунків метеорів, щоб змусити стару версію. Випадаючі зараз працюють, старий jquery та все!

Викликайте код jquery materialize css лише після надання html. Таким чином, ви можете мати контролер, а потім запустити службу, яка викликає код jquery в контролері. Це призведе до відтворення кнопки вибору в порядку. Як ніколи, якщо ви спробуєте використовувати ngChange або ngSubmit, це може не спрацювати через динамічну стилізацію тегу select.

Тільки це працювало для мене:

$(document).ready(function(){
    $('select').not('.disabled').formSelect();
});

Я опинився в ситуації, коли використовуючи вибране рішення

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

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

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

По-перше, переконайтеся, що ви ініціалізуєте його у документі вже.

$(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');

Для браузера за замовчуванням,

<head>
     select {
            display: inline !important;
         }
</head>

Або рішення Jquery після посилання t бібліотеки Jquery і локального / CDN матеріалізують файли

<script>
(function($){
  $(function(){
    // Plugin initialization
    $('select').not('.disabled').formSelect();
  }); 
})(jQuery); // end of jQuery name space

Мені дуже подобається цей фреймворк, але що на землі мати дисплей: жоден ...

Просто слідкуйте за цим питанням, оскільки головна відповідь рекомендує не використовувати materializecss ... у поточній версії materialize ви більше не потребуєте ініціалізації вибору.