[javascript] 實現CSS - 選擇不會呈現



4 Answers

在我看來,實現CSS的select功能的設計是不使用它的一個很好的理由。

您必須使用material_select()初始化select元素,如@ littleguy23所述。 如果你不這樣做,選擇框甚至不顯示! 在一個老式的jQuery應用程序中,我可以在文檔就緒函數中初始化它。 猜猜看,現在我和其他人都沒有使用jQuery,也沒有在文檔就緒鉤子中初始化我們的應用程序。

動態創建選擇 。 如果我正在動態創建選擇項,例如發生在像Ember這樣的框架中,它會即時生成視圖,會怎麼樣? 我必須在每個視圖中添加邏輯來在每次生成視圖時初始化選擇框,或者寫一個視圖混合來為我處理。 而且它比這更糟糕:當生成視圖時,以Ember術語didInsertElement ,對選擇框的選項列表的綁定可能尚未解析,因此我需要特殊的邏輯觀察選項列表以等待它在調用material_select之前填充。 如果這些選項發生變化,他們可能會很輕鬆,但material_select對此並不知情,並且不會更新下拉列表。 當選項更改時,我可以再次調用material_select ,但看起來它沒有任何作用(被忽略)。

換句話說,實現CSS的選擇框背後的設計假設是它們在頁面加載時都在那裡,並且它們的值永遠不會改變。

實施 。 從美學的角度來看,我也不贊成實現CSS實現其下拉的方式,即在DOM中的其他位置創建一組並行的元素。 當然,像select2這樣的替代品可以做同樣的事情,並且可能沒有其他方法可以實現某些視覺效果(真的?)。 不過,對我來說,當我檢查一個元素時,我想看到這個元素,而不是某個神奇創建的某個其他地方的影子版本。

當Ember把視圖撕下來時,我不確定是否物化CSS會撕掉它創建的陰影元素。 其實,如果真的發生了,我會很驚訝。 如果我的理論是正確的,隨著視圖的生成和拆除,你的DOM最終會被幾十套陰影下拉污染,而這些陰影下拉並不與任何東西相關。 這不僅適用於Ember,而且適用於任何其他基於MVC /模板的OPA前端框架。

綁定 。 我還無法弄清楚如何讓對話框中選定的值綁定回像Ember這樣的框架,通過{{view 'Ember.Select' value=country}}類型調用選擇框接口。 換句話說,當選擇了某些東西時, country不會更新。 這是一個破壞交易的行為。

波浪 。 順便說一下,同樣的問題適用於按鈕上的“波浪”效果。 每次創建按鈕時都必須初始化它。 我個人不關心波浪效應,也不明白什麼是大驚小怪,但如果你確實需要波浪,那麼請注意,你會花掉你生活中的很大一部分時間,擔心如何初始化創建時的每個按鈕。

我很欣賞CSS傢伙所做的努力,並且在那裡有一些很好的視覺效果,但它太大了,像上面那樣有太多的問題需要我使用。 我現在計劃從應用程序中挖掘出實現CSS,並返回Bootstrap或Suit CSS頂層。 你的工具應該讓你的生活更輕鬆,而不是更難。

Question

我目前正在處理物化CSS,看起來我已經與選擇字段掛鉤了。

我使用從他們的網站提供的示例,但不幸的是它在視圖中呈現。 我想知道是否有其他人可以提供幫助。

我想要做的是創建一個帶有2個提供填充的末端間隔符的行 - 然後在內部的兩個行內應該有一個搜索文本輸入和一個搜索選擇下拉列表。

這是我工作的例子: http://materializecss.com/forms.html : 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>




對於我來說,其他答案都不起作用,因為我使用的是最新版本的MaterializeCSS和Meteor,並且jquery版本之間存在不兼容性,Meteor 1.1.10使用jquery 1.11(忽略此依賴並不容易,可能會破壞Meteor / Blaze)並測試Materialise與jquery 2.2工作正常。 有關更多信息,請參閱https://.com/a/34809976/2882279 。

這是一個已知問題,下拉和選擇實現0.97.2和0.97.3; 欲了解更多信息,請參閱https://github.com/Dogfalo/materialize/issues/2265https://github.com/Dogfalo/materialize/commit/45feae64410252fe51e56816e664c09d83dc8931

我在流星中使用了MaterialiseCSS的Sass版本,並且在我的流星包文件中使用詩意性的材料:materialize-scss@1.97.1來解決這個問題,以強制舊版本。 下拉菜單現在可以運行,老jquery和所有!




只是為了跟上這一點,因為最好的答案建議不要使用materializecss ...在當前版本中實現你不再需要初始化選擇。




對我而言,解決方案是在選項數據加載後調用'material_select'函數。 如果將OptionsList.find()。count()的值輸出到控制台,它將首先顯示0,然後在幾毫秒之後,該列表將填充數據。

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

};




這也適用:class =“browser-default”




Related