实现CSS - 选择看起来不像渲染

Question

我目前正在使用物化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>

Answer 1

因为它们会覆盖浏览器默认值,所以选择样式需要运行Javascript.您需要包含Materialize Javascript文件,然后调用

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

你加载该文件后.

Answer 2

select在我看来,实现CSS 的功能设计是不使用它的一个很好的理由.

您必须使用material_select()@ littleguy23提及初始化select元素.如果不这样做,甚至不会显示选择框!在一个老式的jQuery应用程序中,我可以在文档就绪函数中初始化它.猜猜是什么,我和其他许多人现在都没有使用jQuery,也没有在文档就绪钩子中初始化我们的应用程序.

动态创建选择.如果我正在创建动态选择,例如在像Ember这样的框架中发生什么,它会动态生成视图？我必须在每个视图中添加逻辑以在每次生成视图时初始化选择框,或者编写视图mixin以便为我处理.而且更糟糕的是:当生成视图时,并且在didInsertElement调用Ember术语时,对选择框的选项列表的绑定可能尚未解决,因此我需要特殊的逻辑观察选项列表以等待它在拨打电话之前填充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上的图层.你的工具应该让你的生活更轻松,而不是更难.

Answer 3

@ littleguy23这是正确的,但你不想这样做多选.所以只需对代码进行一些小改动:

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

Answer 4

这对我有用，没有 jquery 或带有输入类的选择包装器，只有 material.js 和这个 vanilla js：

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

正如你所知道的，我得到了实体化的 css 实际样式，而不是浏览器的默认样式。

Answer 5

这也有效：class = "browser-default"