ECSS javascript文件冲突_Javascript_Html_Css_Materialize

ECSS javascript文件冲突

javascript html css

ECSS javascript文件冲突,javascript,html,css,materialize,Javascript,Html,Css,Materialize,我正在使用MaterializeCS制作一个网页，我想同时使用模态和组合框，不幸的是，我很难同时使用两者无论出于何种原因，如果我使用此版本的Materialiecss的javascript模型，都可以正常工作： <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script> 我的html如下所示： $(document).ready(

我正在使用MaterializeCS制作一个网页，我想同时使用模态和组合框，不幸的是，我很难同时使用两者

无论出于何种原因，如果我使用此版本的Materialiecss的javascript模型，都可以正常工作：

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script>

我的html如下所示：

$(document).ready(function() {
    //$('.modal-trigger').leanModal();

    get_employee_data();
    populate_table_pagination();
    populate_table_of_employees();
    create_table_functions();
    $('.modal-trigger').leanModal();
    $('select').material_select();

    (function($) {
        $(function() {

            $('.button-collapse').sideNav();

        }); // end of document ready
    })(jQuery); // end of jQuery name space
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Add Employee View</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script>
    <style>
    #padding_left {
        width: 3%;
        float: left;
        height: 800px;
    }

    #something {
        width: 97%;
        margin-left: 3%;
        border-left: 0px solid gray;
        padding: 0em;
        height: 800px;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="row">
        <div class="input-field col s12">
            <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <label>Materialize Select</label>
        </div>
    </div>
    <nav>
        <div class="indigo nav-wrapper">
            <a href="#" class="right brand-logo">  Your company</a>
            <ul id="nav-mobile" class="left hide-on-med-and-down">
                <li><a href="addview.html">Add Employee</a></li>
                <li><a href="manageview.html">View Employees</a></li>
                <li><a class="waves-effect waves-light btn" href="#" data-activates="slide-out">Filtering</a></li>
                <li><a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a></li>
            </ul>
        </div>
    </nav>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
    <br>
    <div class="container">
        <div id="padding_left">
        </div>
        <div id="something">
            <div class="row">
                <div class="col s8">
                    <table>
                        <col width="80">
                        <col width="100">
                        <col width="130">
                        <col width="130">
                        <col width="100">
                        <col width="130">
                        <col width="80">
                        <thead>
                            <tr>
                                <th id="id_column_header">ID</th>
                                <th id="first_name_column_header">First Name</th>
                                <th id="last_name_column_header">Last Name</th>
                                <th id="activation_code_column_header">Activation Code</th>
                                <th id="role_column_header">Role</th>
                                <th id="department_column_header">Department</th>
                                <th id="registered_column_header">Registered?</th>
                            </tr>
                        </thead>
                        <tbody id="table_of_employees">
                        </tbody>
                    </table>
                </div>
            </div>
            <ul class="pagination" id="workers_page_numbers">
            </ul>
        </div>
        <div id="slide-out" class="side-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Sign In</a></li>
            <div class="input-field col s1">
                <select>
                    <option value="" selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
            </div>
        </div>
    </div>
    </script>
    <script src="managecontroller.js"></script>
    <script src="managemodel.js"></script>
    <script src="employee.js"></script>
</body>

</html>


添加员工视图
#左上角{
宽度：3%；
浮动：左；
高度：800px；
}
#某物{
宽度：97%；
左缘：3%；
左边框：0px实心灰色；
填充：0em；
高度：800px；
溢出：隐藏；
}
选择你的选择
选择1
选择2
选择3
物化选择








身份证件
名字
姓
激活码
角色
部门
注册的？





选择你的选择
选择1
选择2
选择3
物化选择

如果可以的话，试着让你的代码成为一个工作片段。这样我们就更容易发现问题。HTML代码中没有定义

.modal

。在materialize规范中，我没有看到任何提到“组合框”的地方。虽然您的示例没有显示materializecss的完整组合框代码，但请确保您遵循materializecss文档中提到的这些步骤。向任何按钮添加下拉列表。确保数据目标属性与

.modal

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Add Employee View</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.js"></script>
    <style>
    #padding_left {
        width: 3%;
        float: left;
        height: 800px;
    }

    #something {
        width: 97%;
        margin-left: 3%;
        border-left: 0px solid gray;
        padding: 0em;
        height: 800px;
        overflow: hidden;
    }
    </style>
</head>

<body>
    <div class="row">
        <div class="input-field col s12">
            <select>
                <option value="" disabled selected>Choose your option</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
            <label>Materialize Select</label>
        </div>
    </div>
    <nav>
        <div class="indigo nav-wrapper">
            <a href="#" class="right brand-logo">  Your company</a>
            <ul id="nav-mobile" class="left hide-on-med-and-down">
                <li><a href="addview.html">Add Employee</a></li>
                <li><a href="manageview.html">View Employees</a></li>
                <li><a class="waves-effect waves-light btn" href="#" data-activates="slide-out">Filtering</a></li>
                <li><a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a></li>
            </ul>
        </div>
    </nav>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
    <br>
    <div class="container">
        <div id="padding_left">
        </div>
        <div id="something">
            <div class="row">
                <div class="col s8">
                    <table>
                        <col width="80">
                        <col width="100">
                        <col width="130">
                        <col width="130">
                        <col width="100">
                        <col width="130">
                        <col width="80">
                        <thead>
                            <tr>
                                <th id="id_column_header">ID</th>
                                <th id="first_name_column_header">First Name</th>
                                <th id="last_name_column_header">Last Name</th>
                                <th id="activation_code_column_header">Activation Code</th>
                                <th id="role_column_header">Role</th>
                                <th id="department_column_header">Department</th>
                                <th id="registered_column_header">Registered?</th>
                            </tr>
                        </thead>
                        <tbody id="table_of_employees">
                        </tbody>
                    </table>
                </div>
            </div>
            <ul class="pagination" id="workers_page_numbers">
            </ul>
        </div>
        <div id="slide-out" class="side-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Signup</a></li>
            <li><a href="#">Sign In</a></li>
            <div class="input-field col s1">
                <select>
                    <option value="" selected>Choose your option</option>
                    <option value="1">Option 1</option>
                    <option value="2">Option 2</option>
                    <option value="3">Option 3</option>
                </select>
                <label>Materialize Select</label>
            </div>
        </div>
    </div>
    </script>
    <script src="managecontroller.js"></script>
    <script src="managemodel.js"></script>
    <script src="employee.js"></script>
</body>

</html>