CSS'yi Materyalleştir - Oluşturulacak Görünmüyor öğesini seçin

Şu anda materialize CSS ile çalışıyorum ve görünüşe göre seçili alanlarla uğraştım.

Kendi sitelerinden sağlanan örneği kullanıyorum ama maalesef görünümde her ne olursa olsun oluşturuluyor. Başka birinin yardım edip edemeyeceğini merak ediyordum.

Yapmaya çalıştığım şey, dolgu sağlayan 2 uç ayırıcıya sahip bir satır oluşturmaktır - daha sonra içteki iki satır öğesinin içinde bir arama metni girişi ve bir arama seçme açılır menüsü olmalıdır.

Bu, çalıştığım örnek: http://materializecss.com/forms.html

Şimdiden teşekkür ederim.

İşte söz konusu kod pasajı.

<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>

Tarayıcı varsayılanını geçersiz kıldığından, seçilen stilin çalıştırılması için Javascript gerekir. Materialize Javascript dosyasını eklemeniz ve ardından

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

o dosyayı yükledikten sonra.

selectCSS'nin somutlaştırılmasındaki işlevsellik tasarımı bence onu kullanmamak için oldukça iyi bir neden.

material_select()@ Littleguy23'ün bahsettiği gibi , seçme elemanını ile başlatmanız gerekir . Bunu yapmazsanız, seçim kutusu bile görüntülenmez! Eski moda bir jQuery uygulamasında, onu belge hazır işlevinde başlatabilirim. Tahmin edin ne ben ne de başka pek çok insan bugünlerde jQuery'yi kullanıyor, ne de uygulamalarımızı belge hazır kancasında başlatmıyoruz.

Dinamik olarak oluşturulan seçimler . Ember gibi anında görünüm üreten bir çerçevede olduğu gibi dinamik olarak seçimler oluşturuyorsam ne olur? Her görünüm oluşturulduğunda seçim kutusunu başlatmak için her görünüme mantık eklemem veya bunu benim için işlemek için bir görünüm karışımı yazmam gerekiyor. Ve bundan daha kötüsü: görünüm oluşturulduğunda ve Ember terimleriyle didInsertElementçağrıldığında, seçim kutusu için seçenekler listesine bağlanma henüz çözülmemiş olabilir, bu nedenle, seçenek listesini gözlemlemek için özel bir mantığa ihtiyacım var. çağrılmadan önce doldurulur material_select. Seçenekler kolayca değiştirilebilecekleri gibi değişirse, bunun material_selecthakkında hiçbir fikri yoktur ve açılır menüyü güncellemez. material_selectSeçenekler değiştiğinde tekrar arayabilirim , ancak bu hiçbir şey yapmıyor gibi görünüyor (yok sayılıyor).

Başka bir deyişle, CSS'nin seçim kutularını somutlaştırmanın ardındaki tasarım varsayımının, sayfa yüklenirken hepsinin orada olması ve değerlerinin asla değişmemesi olduğu görülmektedir.

Uygulama . Estetik bir bakış açısından, CSS'nin açılır menülerini uygulama şeklinden de yana değilim, yani DOM'da başka bir yerde paralel, gölge öğeler kümesi oluşturmak. Kabul edilirse, select2 gibi alternatifler aynı şeyi yapar ve bazı görsel efektleri elde etmenin başka bir yolu olmayabilir (gerçekten?). Yine de bana göre, bir öğeyi incelediğimde, birisinin sihirli bir şekilde yarattığı gölge versiyonunu değil, o öğeyi görmek istiyorum.

Ember görünümü bozduğunda, CSS'nin oluşturduğu gölge unsurlarını parçaladığından emin değilim. Aslında, olursa çok şaşırırım. Teorim doğruysa, görünümler üretilip yıkıldıkça DOM'nuz hiçbir şeye bağlı olmayan düzinelerce gölge açılır setiyle kirlenecek. Bu yalnızca Ember için değil, diğer tüm MVC / şablon tabanlı OPA ön uç çerçeveleri için de geçerlidir.

Bağlamalar . Ayrıca, bir {{view 'Ember.Select' value=country}}tür arabirimi aracılığıyla seçim kutularını çağıran Ember gibi bir çerçevede yararlı olan herhangi bir şeye geri bağlanmak için iletişim kutusunda seçilen değeri nasıl elde edeceğimi de çözemedim . Diğer bir deyişle, bir şey seçildiğinde countrygüncellenmez. Bu bir anlaşma bozucu.

Dalgalar . Bu arada, aynı sorunlar düğmelerdeki "dalga" efekti için de geçerlidir. Her düğme oluşturulduğunda onu başlatmanız gerekir. Şahsen dalga etkisi umrumda değil ve tüm yaygaraların ne hakkında olduğunu anlamıyorum, ancak dalgalar istiyorsanız, hayatınızın geri kalanının büyük bir bölümünü nasıl yapılacağı konusunda endişelenerek geçireceğinizi unutmayın. Oluşturulduğunda her bir düğmeyi başlatın.

CSS çalışanlarının gerçekleştirdiği çabayı takdir ediyorum ve orada bazı güzel görsel efektler var, ancak çok büyük ve yukarıdaki gibi kullanacağım bir şey olmak için çok fazla sorun var. Şimdi uygulamamdan CSS'yi somutlaştırmayı ve Bootstrap'e veya Suit CSS'nin üstündeki bir katmana geri dönmeyi planlıyorum. Aletleriniz hayatınızı kolaylaştırmalı, zorlaştırmamalıdır.

@ littleguy23 Bu doğru, ancak çoklu seçim yapmak istemiyorsunuz. Yani kodda sadece küçük bir değişiklik:

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

Bu benim için çalıştı, jquery veya girdi sınıflı seçmeli sarmalayıcı yok, sadece material.js ve bu vanilya js:

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

Anlayabileceğiniz gibi, tarayıcıların varsayılanı değil, materyalize css gerçek stilini aldım.

Bu da işe yarar: class = "browser-default"

Angularjs kullanıyorsanız , bazı kullanışlı yönergeler sağlayan angular-materialize eklentisini kullanabilirsiniz . O zaman js'de başlatmanıza gerek kalmaz, sadece seçiminize ekleyin material-select:

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

Benim için işe yarayan çözüm, seçenekler verisi yüklendikten sonra 'material_select' işlevini çağırmaktır. OptionsList.find (). Count () değerini konsola yazdırırsanız, ilk 0'dır, ardından birkaç milisaniye sonra liste verilerle doldurulur.

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

Benim için diğer yanıtların hiçbiri işe yaramadı çünkü MaterializeCSS ve Meteor'un en son sürümünü kullanıyorum ve jquery sürümleri arasında uyumsuzluk var, Meteor 1.1.10 jquery 1.11 kullanıyor (bu bağımlılığı geçersiz kılmak kolay değil ve muhtemelen Meteor / Blaze'i bozacak) ve Materialise'ın jquery 2.2 ile test edilmesi iyi çalışıyor. Daha fazla bilgi için https://stackoverflow.com/a/34809976/2882279 adresine bakın .

Bu, açılır listelerle ilgili bilinen bir sorundur ve 0.97.2 ve 0.97.3'ün gerçekleştirilmesindeki seçimler; Daha fazla bilgi için bkz. https://github.com/Dogfalo/materialize/issues/2265 ve https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931 .

Meteor'da MaterializeCSS'nin Sass sürümünü kullanıyorum ve eski sürümü zorlamak için meteor paketleri dosyamda poetic: materialize-scss@1.97.1 kullanarak sorunu çözdüm. Açılır menüler artık çalışıyor, eski jquery ve hepsi!

Materialize css jquery kodunu yalnızca html oluşturulduktan sonra çağırın. Böylece bir denetleyiciye sahip olabilir ve ardından denetleyicide jquery kodunu çağıran bir hizmeti çalıştırabilirsiniz. Bu, seçme düğmesini iyi hale getirecektir. Ancak ngChange veya ngSubmit'i kullanmaya çalışırsanız, seçme etiketinin dinamik stili nedeniyle çalışmayabilir.

Sadece bu benim için çalıştı:

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

Kendimi seçilen çözümü kullanan bir durumda buldum

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

Her ne sebeple olursa olsun hata fırlatıyordu çünkü material_select () işlevi bulunamadı. <select class="browser-default... Formları otomatik olarak oluşturan bir çerçeve kullanıyordum çünkü demek mümkün değildi . Benim çözümüm, sınıfı js (Jquery) kullanarak eklemekti.

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

Öncelikle, bunu document.zaten şu şekilde başlattığınızdan emin olun:

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

Ardından, verilerinizle istediğiniz şekilde doldurun. Örneğim:

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

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

Bu içeriği tetiklemek için popülasyonla işiniz bittikten sonra emin olun

$("#mySelect").trigger('contentChanged');

Varsayılan tarayıcı için,

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

Veya bağlantıdan sonra Jquery çözümü ● Jquery kitaplığı ve yerel / CDN materyalize dosyalarınız

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

Bu çerçeveyi gerçekten seviyorum, ama dünyada gösterilecek olan şey: yok ...

Sadece bunu takip etmek için, çünkü en üstteki cevap materializecss'i kullanmamayı öneriyor ... materyalize'nin mevcut sürümünde artık seçimleri başlatmanıza gerek yok.