具体化 CSS - 选择似乎无法呈现

javascript html css materialize

2022-08-30 04:37:07

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

答案 1

由于它们会覆盖浏览器的默认值，因此选择样式需要 Javascript 才能运行。您需要包含具体化 Javascript 文件，然后调用

$(document).ready(function() {
    $('select').formSelect();
    // Old way
    // $('select').material_select();
});

加载该文件后。

答案 2

在我看来，具体化CSS中的功能设计是一个很好的理由不使用它。select

您必须使用初始化 select 元素，如 @littleguy23 所述。如果不这样做，甚至不会显示选择框！在老式的jQuery应用程序中，我可以在文档就绪函数中初始化它。你猜怎么着，这些天我和许多其他人都没有使用jQuery，也没有在文档就绪钩子中初始化我们的应用程序。material_select()

动态创建的选择。如果我动态创建选择，例如在像Ember这样的框架中发生动态生成视图，该怎么办？我必须在每个视图中添加逻辑，以便在每次生成视图时初始化选择框，或者编写一个视图 mixin 来为我处理它。而且更糟糕的是：当生成视图时，并且在调用Ember术语时，对选择框的选项列表的绑定可能尚未解决，因此我需要特殊的逻辑来观察选项列表，以等到它填充后再调用.如果选项发生更改，则很容易对此一无所知，并且不会更新下拉列表。当选项更改时，我可以再次调用，但似乎没有任何作用（被忽略）。didInsertElementmaterial_selectmaterial_selectmaterial_select

换句话说，似乎具体化CSS选择框背后的设计假设是它们在页面加载时都在那里，并且它们的值永远不会改变。

实施。从美学的角度来看，我也不赞成实现CSS实现其下拉列表的方式，即在DOM中的其他地方创建一个并行的阴影元素集。不过，对我来说，当我检查一个元素时，我想看到的是这个元素，而不是某个人神奇地创造的其他地方的影子版本。

当Ember拆除视图时，我不确定具体化CSS会破坏它创建的阴影元素。实际上，如果是这样，我会感到非常惊讶。如果我的理论是正确的，那么随着视图的生成和拆除，你的DOM最终会被数十组与任何东西无关的阴影下拉列表污染。这不仅适用于 Ember，也适用于任何其他基于 MVC/模板的 OPA 前端框架。

绑定。我也无法弄清楚如何在对话框中选择值，以绑定回Ember等框架中有用的内容，该框架通过类型接口调用选择框。换句话说，当选择了某些内容时，不会更新。这是一个交易破坏者。{{view 'Ember.Select' value=country}}country

波浪。顺便说一句，同样的问题也适用于按钮上的“波浪”效果。每次创建按钮时，您都必须对其进行初始化。我个人并不关心波浪效应，也不理解所有的大惊小怪是什么，但是如果你确实想要波浪，请注意，你会在余生中花费很大一部分时间来担心如何在创建时初始化每个按钮。

我很欣赏具体化CSS家伙所做的努力，那里有一些不错的视觉效果，但它太大了，有太多的陷阱，比如上面，我不会用。我现在计划从我的应用程序中撕下具体化CSS，然后回到Bootstrap或Suit CSS之上的一层。你的工具应该让你的生活更轻松，而不是更难。