Material Design Lite - JS 未应用事件侦听器
Material Design Lite - JS Not applying event listeners
我在使用 Material Design Lite 库时遇到了一个奇怪的问题。根据文档,我在关闭 body
标签之前包含了 mdl js 脚本标签。
但是,我无法应用 mdl 库中的样式。检查开发工具后,我发现 material.min.js
的事件侦听器未应用于文本字段和按钮等。我附上两张图片以更好地解释这种情况。
如您所见,正在加载文件...
但是我在 MDL 中看不到文本字段的任何动画。
PS。我是 运行 本地服务器上的网站。
任何形式的帮助将不胜感激。谢谢...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Page Title</title>
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
<!-- icons -->
<link href="/static/portal/assets/fonts/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--bootstrap -->
<link href="/static/portal/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="/static/portal/assets/plugins/material/material.min.css">
<link rel="stylesheet" href="/static/portal/assets/css/material_style.css">
<!-- Theme Styles -->
<link href="/static/portal/assets/css/theme/light/theme_style.css" rel="stylesheet" id="rt_style_components" type="text/css" />
<link href="/static/portal/assets/css/theme/light/style.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/plugins.min.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/theme/light/theme-color.css" rel="stylesheet" type="text/css" />
</head>
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md">
...
<!-- start js include path -->
<script src="/static/portal/assets/plugins/jquery/jquery.min.js" ></script>
<script src="/static/portal/assets/plugins/popper/popper.js" ></script>
<script src="/static/portal/assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script>
<script src="/static/portal/assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- bootstrap -->
<script src="/static/portal/assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
<!-- Common js-->
<script src="/static/portal/assets/js/app.js" ></script>
<script src="/static/portal/assets/js/layout.js" ></script>
<script src="/static/portal/assets/js/theme-color.js" ></script>
<!-- Material -->
<script src="/static/portal/assets/plugins/material/material.min.js"></script>
<script src="/static/portal/assets/js/pages/material-select/getmdl-select.js" ></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/moment-with-locales.min.js"></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/datetimepicker.js"></script>
<!-- dropzone -->
<script src="/static/portal/assets/plugins/dropzone/dropzone.js" ></script>
<script src="/static/portal/assets/plugins/dropzone/dropzone-call.js" ></script>
<!-- end js include path -->
</body>
</html>
这是 MDL 按钮的一个非常基本的工作示例,可以作为您进行故障排除时的参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Button example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
我的问题是我正在从我的模板中复制粘贴 rendered 小部件,该小部件已经添加了 data-upgraded
属性。只要遵循 MDL 文档,你应该没问题。
我在使用 Material Design Lite 库时遇到了一个奇怪的问题。根据文档,我在关闭 body
标签之前包含了 mdl js 脚本标签。
但是,我无法应用 mdl 库中的样式。检查开发工具后,我发现 material.min.js
的事件侦听器未应用于文本字段和按钮等。我附上两张图片以更好地解释这种情况。
如您所见,正在加载文件...
但是我在 MDL 中看不到文本字段的任何动画。
PS。我是 运行 本地服务器上的网站。 任何形式的帮助将不胜感激。谢谢...
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Page Title</title>
<!-- google font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
<!-- icons -->
<link href="/static/portal/assets/fonts/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!--bootstrap -->
<link href="/static/portal/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- Material Design Lite CSS -->
<link rel="stylesheet" href="/static/portal/assets/plugins/material/material.min.css">
<link rel="stylesheet" href="/static/portal/assets/css/material_style.css">
<!-- Theme Styles -->
<link href="/static/portal/assets/css/theme/light/theme_style.css" rel="stylesheet" id="rt_style_components" type="text/css" />
<link href="/static/portal/assets/css/theme/light/style.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/plugins.min.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link href="/static/portal/assets/css/theme/light/theme-color.css" rel="stylesheet" type="text/css" />
</head>
<body class="page-header-fixed sidemenu-closed-hidelogo page-content-white page-md">
...
<!-- start js include path -->
<script src="/static/portal/assets/plugins/jquery/jquery.min.js" ></script>
<script src="/static/portal/assets/plugins/popper/popper.js" ></script>
<script src="/static/portal/assets/plugins/jquery-blockui/jquery.blockui.min.js" ></script>
<script src="/static/portal/assets/plugins/jquery-slimscroll/jquery.slimscroll.js"></script>
<!-- bootstrap -->
<script src="/static/portal/assets/plugins/bootstrap/js/bootstrap.min.js" ></script>
<!-- Common js-->
<script src="/static/portal/assets/js/app.js" ></script>
<script src="/static/portal/assets/js/layout.js" ></script>
<script src="/static/portal/assets/js/theme-color.js" ></script>
<!-- Material -->
<script src="/static/portal/assets/plugins/material/material.min.js"></script>
<script src="/static/portal/assets/js/pages/material-select/getmdl-select.js" ></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/moment-with-locales.min.js"></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/bootstrap-material-datetimepicker.js"></script>
<script src="/static/portal/assets/plugins/material-datetimepicker/datetimepicker.js"></script>
<!-- dropzone -->
<script src="/static/portal/assets/plugins/dropzone/dropzone.js" ></script>
<script src="/static/portal/assets/plugins/dropzone/dropzone-call.js" ></script>
<!-- end js include path -->
</body>
</html>
这是 MDL 按钮的一个非常基本的工作示例,可以作为您进行故障排除时的参考。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite Button example</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body>
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>
我的问题是我正在从我的模板中复制粘贴 rendered 小部件,该小部件已经添加了 data-upgraded
属性。只要遵循 MDL 文档,你应该没问题。