Question

说明

我正在尝试使用to-do list库编写一个小的materialize css项目。在我的项目中，我有一个按钮，该按钮触发一个模态，该模态包含带有两个选择器元素（日期和时间）的表单。第一次选择日期或时间时，一切正常，但是如果我尝试编辑初始选择，浏览器将冻结。我使用最新版本的Firefox。另外，我将选项参数container传递给两个选择器，以确保它们使用所有可用空间而不是仅使用调用它们的模态提供的空间进行渲染。我希望这是有道理的。我做错了什么？如何确保我的浏览器不会冻结执行以下代码。

文档

Picker

代码

<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <title>task manager</title>

    <link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css'>

    <style>
        button{ width: 100%; }
        input{ text-align: center; }
    </style>
</head>
<body>
    <div class='container'>

        <div class='fixed-action-btn'>
            <button class='btn-floating btn-large red'>
                <i class='large material-icons'>dehaze</i>
            </button>
            <ul>
                <li>
                    <button class='btn-floating green modal-trigger' data-target='add-task'>
                        <i class='material-icons'>add</i>
                    </button>
                </li>
            </ul>
        </div>

        <div class='modal' id='add-task'>
            <div class='modal-content'>
                <h3>NEW TASK</h3>
                <div class='row'>
                    <div class='col s12'>
                        <div class='input-field'>
                            <input id='task' type='text'>
                            <label for='task'>enter task</label>
                        </div>
                    </div>
                </div>
                <div class='row'>
                    <div class='col s6'>
                        <div class='input-field'>
                            <input class='datepicker' id='task-date' type='text'>
                            <label for='task-date'>select date</label>
                        </div>
                    </div>

                    <div class='col s6'>
                        <div class='input-field'>
                            <input class='timepicker' id='task-time' type='text'>
                            <label for='task-time'>select time</label>  
                        </div>
                    </div>
                </div>

                <div class='row'>
                    <div class='col s12'>
                        <div class='input-field'>
                            <select id='priority-task'>
                                <option value='low'>low</option>
                                <option value='moderate'>moderate</option>
                                <option value='hight'>high</option>
                            </select>
                            <label for='task-priority'>select priority</label>
                        </div>
                    </div>
                </div>
                <div class='modal-footer'>
                    <button class='btn waves-effect waves-light'>submit</button>
                </div>
            </div>
        </div>

    </div>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js'></script>
    <script>
       document.addEventListener('DOMContentLoaded', function(){
           const container = document.querySelector('.container');

           const date_picker = document.querySelector('.datepicker');
           const time_picker = document.querySelector('.timepicker');

           const modal = document.querySelector('.modal');
           const select = document.querySelector('select');
           const menu = document.querySelector('.fixed-action-btn');

           M.FloatingActionButton.init(menu);

           M.FormSelect.init(select);

           M.Datepicker.init(date_picker, {container: container});
           M.Timepicker.init(time_picker, {container: '.container'});

           M.Modal.init(modal);
       });
    </script>
</body>
</html>

Answer 1

此问题已在版本 1.0.0-rc.1 中修复。导入具体化样式和脚本时，请使用这些新的CDN链接。

Lazy https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.1/css/materialize.css

使用（MaterializeCSS），如何在不冻结浏览器的情况下初始化Picker组件？

1 个答案: