responsive-slides 相关问题

如何向React.js添加HTML组件轮播

App.html 轮播应用程序.html <!DOCTYPE html> <html> <head> <title>Carousel</title> <link rel="stylesheet" type="text/css" href="./css/materialize.min.css"> </link> <link rel="stylesheet" type="text/css" href="App.css"> </link> </head> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> <script src="./js/materialize.min.js"></script> <script> const small = document.querySelector('.carousel'); var inst = M.Carousel.init(small, {}); inst.dist(50); </script> </div> </html> 应用程序.js import React from 'react'; var perf = require('./App.html'); class App extends React.Component { render(){ return ( <div dangerouslySetInnerHTML={{ __html: perf }} ></div> ); } } export default App; 有人可以帮我解决如何在 JS 文件中添加 HTML 文件并通过 JS 文件运行 HTML 文件吗？我在 HTML 中使用 Materialize 制作了一个轮播，但我无法在 JS 中编写代码，因此，如果可能的话，有人可以帮助我将 HTML 文件转换为 JS 文件，或者如何导入 HTML 文件在我的 JS 文件中。您可以简单地将所有 html 代码插入 App.js 文件中，reactjs 不需要任何 .html 文件。请按照下面的代码进行操作，希望您能理解。我只是将所有 HTML 代码放入 App.js 的父 div 中。 import React from 'react'; var perf =require('./App.html'); class App extends React.Component { render(){ return ( <div> <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> </div> </div> ); } } export default App; 只需使用react-create-app模板，基本的html（head，meta）东西已经就位，只需修改src目录即可满足您的需求。例如 index.js 会是这样的， import React from 'react'; import './App.css'; // For Your CSS file class App extends React.Component { render(){ return ( <div class="carousel"> <div class="carousel-item"> <img src={require("./1.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./2.png")} class="responsive-img"></img> </div> <div class="carousel-item"> <img src={require("./3.png")} class="responsive-img"></img> </div> ); } } export default App; 如果您需要更改基础html，您可以在公共目录中进行操作。编辑：（对于依赖项）当您使用 materialize-css 时，您可以通过使用 materialize-css@next 和此 cmd npm 将 npm install materialize-css@next 安装为依赖项来使用它有关安装的更多信息可以在此处找到来源：https://materializecss.com/getting-started.html 我看到您对许多正在使用依赖项的答案做出了回应。如果这是通过 CDN 实现的，您只需将其添加到公共文件夹中的 index.html 文件中，并在需要时使用您的依赖项。不过，我认为 Materialise 有一个可以安装的节点方面。

如何防止图片被下载到手机上？

假设这个标记：假设这个标记： <picture> <source media="(max-width: 767px)" srcset="//placehold.it/350x150&text=Up+to+767" /> <source media="(max-width: 991px)" srcset="//placehold.it/350x150&text=Up+to+991" /> <img src="//placehold.it/570x200&text=Desktop+image" class="responsive-image" /> </picture> 是否可以在不使用 JavaScript 的情况下防止在小型设备上下载“最多 767”图像？虽然以下CSS将隐藏图像，并且似乎已经在视觉上解决了问题： @media (max-width: 767px) { .responsive-image { display: none; } } 它仍然会下载图像，这是我想避免的。我希望我可以简单地为我想要隐藏的图像提供一个空的 srcset 属性，但随后会加载下一个图像。小提琴：https://jsfiddle.net/n68ousqu/ 我没有足够的声誉点来评论@MiscellaneousUser，但看来，至少在 Chrome 中，您可以从我原来的帖子中获取 HTML 和 CSS，然后只需将 loading="lazy" 添加到 img 元素即可获得这个工作。

ASP.NET MVC 项目模板在移动设备上无法调整为 100%

我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @模型IEnumerable 我不明白为什么 Web .Net MVC 项目上的默认模板没有在移动设备中调整为 100% 宽度。我在视图上使用数据表： @model IEnumerable<iziConference.Models.EventAttendee> <h2>Participantes.</h2> <br /> <button><a style="text-decoration: none" href='@Url.Action("Create", new { eventId = ViewBag.EventId })'>Criar Participante</a></button> <button id="at-btn-refresh"> Actualizar</button> <input id="eventId" type="hidden" value="@ViewBag.EventId"> <table id="at-attendees-list" cellpadding="10" border="1" class="row-border stripe"> <thead> <tr> <th>ID</th> <th>Tipo</th> <th>Nome</th> <th>Email</th> <th>Estado </th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr id="[email protected]_Id"> <td style="padding: 5px"> @Html.DisplayFor(modelItem => item.Attendee.Id) </td> <td> @Html.DisplayFor(modelItem => item.AttendeeType) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Name) </td> <td> @Html.DisplayFor(modelItem => item.Attendee.Email) </td> <td> @if (item.IsActive) { <button id="[email protected]_Id" class="at-btn-active-state active" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="false" data-show-confirmation-alert="true">Desactivar</button> } else { <button id="[email protected]_Id" class="at-btn-active-state inactive" data-attendee-id="@item.Attendee_Id" data-attendee-name="@item.Attendee.Name" data-active-new-state="true" data-show-confirmation-alert="true">Activar</button> } </td> </tr> } </tbody> </table> 由脚本加载： var _atteendeesList = "at-attendees-list"; $("#" + _atteendeesList).DataTable({ "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 使用默认的_Layout.cshtml： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>izigo Conference - Gestor de Conteúdos</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <section id="login"> @Html.Partial(MVC.Account.Views._LoginPartial) </section> <div style="padding: 10px;"> @if (Request.IsAuthenticated) { <nav> <ul id="menu"> <li>@Html.ActionLink("Home", MVC.Home.Index())</li> <li>@Html.ActionLink("Participantes", MVC.Attendee.Index())</li> <li>@Html.ActionLink("Check-in", MVC.Checkin.Index())</li> </ul> </nav> } </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer style="padding-left: 25px;"> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - <a href="https://www.izigo.pt/conference" target="_blank">izigo Conference</a> - <i>Powered by</i><a href="https://www.izigo.pt" target="_blank">izigo.pt</a></p> </div> </div> </footer> @Scripts.Render("~/bundles/jquery", "~/bundles/iziconference") @RenderSection("scripts", required: false) </body> </html> 研究了 dataTables 库的选项后，我找到了一个创建响应式解决方案的选项：我已经包含了响应表结构和columnDefs的选项，以选择哪些选项在移动设备中保持可见： $("#" + _atteendeesList).DataTable({ "responsive": true, "columnDefs": [ { responsivePriority: 1, targets: 0 }, { responsivePriority: 2, targets: -1 } ], "paging": false, "info": false, "language": { "search": "Pesquisar:", "info": "Participantes inscritos: _PAGES_" } }); 我还必须在捆绑包中包含数据表扩展的 js 和 css 响应式库（可在此处下载：https://datatables.net/download/）： bundles.Add(new ScriptBundle("~/bundles/iziconference").Include( "~/Content/Scripts/datatables.min.js", "~/Content/Scripts/dataTables.responsive.min.js")); // add-on bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/Styles/datatables.min.css", "~/Content/Styles/responsive.dataTables.min.css"));

responsive-slides 相关问题

最新问题