materialize 相关问题

阅读完此处的自动完成文档后，为什么在 onAutocomplete 上它总是在控制台中记录值 -1 而不是数据数组中所选选项的 id ？阅读自动完成文档here后，为什么在onAutocomplete上它总是在控制台中记录值-1而不是从id数组中所选选项中记录值data？ <div class="input-field outlined s4" style="margin: 5px 5px;"> <i class="material-icons prefix">search</i> <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete"> <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label> </div> <script> document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('[id="vincularSetor.colaborador_id.autocomplete"]'); var instances = M.Autocomplete.init(elems, { // specify options here minLength: 0, // shows instantly data: [ {id: 3, text: "Name 1"}, {id: 4, text: "Name 2"} ], onAutocomplete: () => { autocomplete = M.Autocomplete.getInstance(document.getElementById("vincularSetor.colaborador_id.autocomplete")); console.log(autocomplete.activeIndex); } }); }); </script> activeIndex 仅在自动完成下拉菜单打开并且用户使用键盘上/下按钮选择选项时使用。为了找出所选项目，您可以从 onAutocomplete 的第一个参数中读取。演示： document.addEventListener('DOMContentLoaded', function() { var elem = document.querySelector('[id="vincularSetor.colaborador_id.autocomplete"]'); M.Autocomplete.init(elem, { minLength: 0, data: [{ id: 3, text: "Name 1" }, { id: 4, text: "Name 2" } ], onAutocomplete: (selectedItems) => { var autocomplete = M.Autocomplete.getInstance(document.getElementById("vincularSetor.colaborador_id.autocomplete")); console.log(selectedItems); } }); }); <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/css/materialize.min.css"> <script src="https://cdn.jsdelivr.net/npm/@materializecss/[email protected]/dist/js/materialize.min.js"></script> <div class="input-field outlined s4" style="margin: 5px 5px;"> <i class="material-icons prefix">search</i> <input type="text" id="vincularSetor.colaborador_id.autocomplete" form="form_vincularSetor" class="autocomplete"> <label for="vincularSetor.colaborador_id.autocomplete">Nome do Colaborador</label> </div>

javascript jquery materialize

回答 1 投票 0

Material design 图标，如何将它们居中为文本？

我一直在尝试使用 MaterializeCSS 制作某种带有 3 个链接的导航栏，每个链接的宽度为导航栏的 33%，并且我想将文本置于链接内的中心（甚至是图标）如果我不放左...

html css material-design materialize

回答 5 投票 0

在 Html 或 Css 中并排放置卡片（卡片显示）

我的 html 代码需要一些帮助。我似乎找不到我的两张卡片不想在我的页面中并排显示的原因。我想同时让两张卡片能够调整大小

html css materialize

回答 1 投票 0

<select>和框架出现问题

我正在尝试学习如何使用物化框架（它用于大学作业）我已将该框架添加到我的项目中，但似乎该框架已以某种方式消失了... 我正在尝试学习如何使用物化框架（用于大学作业）我已将框架添加到我的项目中，但似乎该框架以某种方式消失了<select>，为什么会发生这种情况？这是我的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Inscripción en línea</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script> $(document).ready(function(){ $("#nivel").on("change", function(){ var nivel = $(this).val(); crearListaCarreras(nivel); }); }); var oferta = { 'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'], 'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'], 'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'], 'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación'] }; function crearListaCarreras(nivel){ var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>")); if(nivel !== ""){ var lista_carreras = []; var costo = 0; switch(nivel){ case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break; case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break; case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break; case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break; } if(lista_carreras.length > 0){ $.each(lista_carreras, function(k,v){ carreras.append( $("<option>").text(v) ) }); $("#costo").val(costo); } } } </script> </head> <body> <div class="container"> <img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/> <h1>Inscripción en línea</h1> <h3>Ingreso</h3> Nivel<br> <select id="nivel"> <option value="">Seleccione una opción</option> <option value="lic_e">Licenciatura escolarizada</option> <option value="lic_m">Licenciatura mixta</option> <option value="mae_e">Maestría</option> <option value="doc_e">Doctorado</option> </select><br> Carrera<br> <select id="carrera"> <option value="">Seleccione una opción</option> </select> <h3>Datos personales</h3> C.U.R.P<br /> <input type="text" /><br> Nombre<br /> <input type="text" /><br> Apellidos<br /> <input type="text" /><br> E-mail<br /> <input type="text" /><br> Celular<br /> <input type="text" /><br> Teléfono<br /> <input type="text" /><br> Escuela de procedencia<br /> <input type="text" /> <h3>Información de pago</h3> Total a pagar<br /> <input type="text" id="costo" readonly/><br> Método de pago<br /> <input type="checkbox" /> depósito referenciado<br> <input type="checkbox" /> tarjeta de crédito o débito<br> <input type="checkbox" /> en cajas de la UCC<br> <input type="button" value="Enviar"/> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> </body> </html> 我尝试阅读文档，但事实证明它没有帮助。这是因为你还没有初始化select。来自Materialize官方文档初始化您必须初始化选择元素，如下所示。此外，您将需要单独调用任何动态生成页面生成的选择元素。你可以使用Javascript或jQuery来初始化它，我使用的是jQuery。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Inscripción en línea</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">  <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <script> $(document).ready(function(){ $("#nivel").on("change", function(){ var nivel = $(this).val(); crearListaCarreras(nivel); }); }); var oferta = { 'lic_e':['Administración y Dirección de Empresas', 'Derecho', 'Comunicación y Entornos Digitales', 'Ingeniería en Sistemas Computacionales', 'Psicología'], 'lic_m':['Administración', 'Derecho', 'Ingeniería Industrial', 'Informática'], 'mae_e':['Administración y Gestión de Instituciones Educativas', 'Derecho Fiscal', 'Derecho Privado', 'Redes y Telecomunicaciones', 'Impuestos'], 'doc_e':['Ciencias Administrativas', 'Derecho', 'Ingeniería en Tecnologías Emergentes', 'Educación'] }; function crearListaCarreras(nivel){ var carreras = $("#carrera").empty().append($("<option value=''>Seleccione una opción</option>")); if(nivel !== ""){ var lista_carreras = []; var costo = 0; switch(nivel){ case 'lic_e': lista_carreras = oferta.lic_e; costo = 1500; break; case 'lic_m': lista_carreras = oferta.lic_m; costo = 2500; break; case 'mae_e': lista_carreras = oferta.mae_e; costo = 3000; break; case 'doc_e': lista_carreras = oferta.doc_e; costo = 3500; break; } if(lista_carreras.length > 0){ $.each(lista_carreras, function(k,v){ carreras.append( $("<option>").text(v) ) }); $("#costo").val(costo); } } } </script> </head> <body> <div class="container"> <img src="https://servicios.ver.ucc.mx/icecc/img/logo_ucc_transparente.png" style="background:#002449"/> <h1>Inscripción en línea</h1> <h3>Ingreso</h3> Nivel<br> <select id="nivel"> <option value="">Seleccione una opción</option> <option value="lic_e">Licenciatura escolarizada</option> <option value="lic_m">Licenciatura mixta</option> <option value="mae_e">Maestría</option> <option value="doc_e">Doctorado</option> </select><br> Carrera<br> <select id="carrera"> <option value="">Seleccione una opción</option> </select> <h3>Datos personales</h3> C.U.R.P<br /> <input type="text" /><br> Nombre<br /> <input type="text" /><br> Apellidos<br /> <input type="text" /><br> E-mail<br /> <input type="text" /><br> Celular<br /> <input type="text" /><br> Teléfono<br /> <input type="text" /><br> Escuela de procedencia<br /> <input type="text" /> <h3>Información de pago</h3> Total a pagar<br /> <input type="text" id="costo" readonly/><br> Método de pago<br /> <input type="checkbox" /> depósito referenciado<br> <input type="checkbox" /> tarjeta de crédito o débito<br> <input type="checkbox" /> en cajas de la UCC<br> <input type="button" value="Enviar"/> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script> $(document).ready(function(){ $('select').formSelect(); }); </script> </body> </html>

javascript html css materialize

回答 0 投票 0

rails 7.1.3 不执行 application.js

大家好，我一直在使用 Rails 7.1.3，我在 javascript 方面遇到了一些问题，其中 application.js 确实编译了我的 jquery，如果你能帮助我，我将非常感激你...

javascript jquery ruby-on-rails materialize

回答 1 投票 0

从 Chrome 打印时考虑响应式布局

我用materializecss做了一个很好的响应式布局。现在，当我尝试从 Chrome 打印它时，布局与移动设备上的布局相同。这意味着布局看起来很糟糕，因为我的页面（...

css google-chrome printing responsive materialize

回答 3 投票 0

使用 Materialize css 时，窗口在下一个 js 中未定义

我正在使用 Next.js，当我尝试从 'materialize-css' 导入 M；我收到此错误：窗口未定义