MDL升级每个选项卡上的所有动态列表元素
MDL（Material Design Lite）是一种基于Google Material Design设计原则的前端框架，它提供了一套轻量级的CSS、HTML和JavaScript组件，用于构建现代化的、响应式的网站和Web应用程序。MDL框架的目标是提供美观、易用且具有可访问性的用户界面组件。
在MDL中，选项卡是一种常见的UI组件，它允许用户在不同的标签页之间进行切换，以展示不同的内容。当需要在选项卡上展示动态列表元素时，可以通过以下步骤进行MDL升级：
- 添加选项卡标记（Tabs Markup）：在HTML页面中，使用MDL提供的标记来定义选项卡的结构，包括选项卡容器和每个选项卡的标签。 示例代码：
- 添加选项卡标记（Tabs Markup）：在HTML页面中，使用MDL提供的标记来定义选项卡的结构，包括选项卡容器和每个选项卡的标签。 示例代码：
- 初始化选项卡组件（Initialize Tabs Component）：使用JavaScript代码初始化选项卡组件，以便启用MDL的交互功能。 示例代码：
- 初始化选项卡组件（Initialize Tabs Component）：使用JavaScript代码初始化选项卡组件，以便启用MDL的交互功能。 示例代码：
- 动态列表元素的更新：根据需要，在每个选项卡对应的内容区域中更新动态列表元素。可以使用JavaScript或服务器端脚本来生成和填充列表内容。
MDL的优势之一是其符合Material Design的设计原则，提供了一致、美观的用户界面。它还具有响应式设计，可以自动适应不同的屏幕尺寸和设备。此外，MDL还提供了丰富的组件库和样式主题，使开发人员可以快速构建出现代化的Web应用程序。
对于MDL中选项卡上动态列表元素的应用场景，一个常见的例子是在电子商务网站中的商品分类页。每个选项卡可以代表一个商品分类，而动态列表元素则表示该分类下的商品列表。用户可以通过切换选项卡来浏览不同分类下的商品。
腾讯云的相关产品和介绍链接地址如下：
- 腾讯云开发者中心：https://cloud.tencent.com/developer
- 云服务器（Elastic Cloud Server，ECS）：https://cloud.tencent.com/product/cvm
- 云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb-for-mysql
- 云原生应用引擎（Tencent Cloud Native Application Management，TCAM）：https://cloud.tencent.com/product/tcam
- 腾讯云安全产品：https://cloud.tencent.com/solutions/security
- 腾讯云视频处理：https://cloud.tencent.com/product/vod
- 腾讯云人工智能服务：https://cloud.tencent.com/product/ai
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 腾讯移动开发平台（Mobile Development Platform，Tencent MDP）：https://cloud.tencent.com/product/mdp
- 对象存储（Tencent Cloud Object Storage，COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（Tencent Blockchain as a Service，TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云元宇宙产品：https://cloud.tencent.com/solution/vr-ar
相关·内容
1回答
我有4个mdl选项卡，我在每个选项卡中动态创建mdl卡的列表。= document.createElement('ul');
jobUl.className = 'mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect="mdl-menu__item&
浏览 23提问于2019-03-21得票数 1
回答已采纳
3回答
动态添加的复选框看起来不一样
、、、、
通过向HTML文件添加一个mdl-checkbox元素，我得到了以下结果：<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input"
浏览 46提问于2017-06-27得票数 0
回答已采纳
2回答
= document.createElement('div');
loginForm.innerHTML = '<div class="mdl-textfieldmdl-js-textfield mdl-textfield--floating-label textfield-demo"><input class="mdl-textfield__input"
浏览 3提问于2015-08-10得票数 5
回答已采纳
当我在我的顶部组件中使用TextField w/浮动标签时，它可以工作。但是在top组件调用的组件上，它没有。TextField w/浮动标签然后充当一个常规的输入字段。我注意到外部TextField得到一个名为“is- TextField”的类，但是内部TextField没有。mdl-js-textfield
mdl-textfield--floating-label"><inp
浏览 1提问于2015-07-10得票数 5
回答已采纳
="#scroll-tab-3" class="mdl-layout__tab">TAB3</a>当页面被加载时，每个选项卡看起来如下：<a href="#scroll-tab-1" class="mdl-layout__tab">TAB1<span class="mdl-layout__tab-ripple-container <e
浏览 5提问于2015-11-02得票数 3
为说明这一问题，简化如下：<div class="switch"></div><div class="switch"> <div class="switch_thumb"></div>
</div>
浏览 6提问于2015-09-02得票数 19
回答已采纳
2回答
我正在构建一个简单的登录页面使用谷歌的材料设计Lite网络框架和使用React.js来处理我的UI逻辑。我遇到了一个非常奇怪的问题:带有浮动标签的输入文本框在没有React的情况下呈现它时工作得非常好，但是在通过React类呈现时却不能工作。="mdl-grid">
<div className="mdl-cell mdl-cell--2-col">&l
浏览 2提问于2015-10-03得票数 3
回答已采纳
在我目前正在进行的一个项目中，有许多项目必须打开对话框。对于每个新的对话框，数据中的变化，以及我使用Javascript完成的数据。现在，如果我在Javascript的对话框中添加了任何元素，比如一个复选框，那么js就不会对它进行处理了。因此，我检查了一个类似的问题，并得到了一个答案，我已经实现了，但仍然不起作用。Add Button用于添加到对话框中，当dialog打开时，复选框的行为与页面加载期间对话框中的情况不同。为了显示这一点
浏览 7提问于2020-05-30得票数 0
回答已采纳
2回答
我想统一我的网站的导航布局，所以我创建了一个单独的html文件，其中包含导航代码。我使用JS动态加载文件： $.getScript('/material.min.js');问题是这个html中的动态加载组件没有执行material.min.js，而我失去
浏览 0提问于2016-01-03得票数 11
4回答
我对材料设计Lite的桌子部件有问题。我用类mdl-data-table--selectable定义了它，它应该使其行具有可选性。如果它是在HTML中静态定义的，那么就会这样做，但是当我动态地创建我的节点并将它添加到表中时，它就不会变得可选了。嗨，因为我找不到答案，我愿意接受关于如何刷新表格的新建议。目前，我正在删除它的所有内容，并再次生成需要动态添加元素的表。欢迎任何建议。
浏览 0提问于2015-07-22得票数 0
1回答
动态添加可滚动选项卡mdl反应？
、、、、
我用的是材料设计和反应。在使用单独的布局和选项卡时，我成功地添加了动态选项卡，但是当我尝试使用mdl bar、mdl即插即用时，我无法更新布局，因此该选项卡无法工作。<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header className="
浏览 1提问于2016-12-04得票数 0
回答已采纳
我有一个材料设计精巧的页面，使用的选项卡布局，从一个单一的标签。我有一个菜单操作，它添加了一个附加选项卡。JavaScript代码将所需的标记和内容添加到标签栏中，并将相关和内容附加到标记中。然后，JavaScript代码为这两个加法的父元素调用componentHandler.upgradeElement()函数。从表面上看，这是可行的，新选项卡显示在标题中，新内容可以通过单击选项卡显示。但是，单
浏览 1提问于2016-03-11得票数 0
我如何在Wakanda Studio原型中使用MDL？
我将mdl的css和脚本添加到文档属性中，并将类添加到组件中，但没有任何效果。
浏览 0提问于2016-08-19得票数 2
1回答
我正在开发一个待办事项列表应用程序。用户在表单中输入任务，然后JavaScript将其添加到HTML中。我将第一个列表项编码到HTML中，以显示正确的复选框以供参考。通过表单添加后续列表项将显示不正确的复选框。to to-do list
浏览 0提问于2019-03-18得票数 0
当我添加一个选项卡时，它的父元素已经升级了。因此，调用upgradElement没有任何效果，添加的选项卡也不起作用。什么解决方案，用容器重新创建所有选项卡并升级它？
浏览 6提问于2015-11-06得票数 4
回答已采纳
标准材料设计选择列表(下拉列表)支持可访问性。我可以使用TAB (键盘)到达下拉列表，使用箭头(键盘)导航列表项，然后再次按下选项卡，它将导航到屏幕上的其他组件。也就是说，其行为是:选项卡在屏幕上的组件之间导航，箭头在列表中的项之间导航。class="mdl-menu__item" data-val="1">name3
浏览 3提问于2017-04-26得票数 0
我已经研究和阅读了我能找到的关于我所遇到的问题的所有东西，但我似乎无法让任何提出的解决方案发挥作用。我正在使用Angular 2和MDL构建一个应用程序，它接受客户订单并将其显示在MDL卡上。我知道这是有效的，因为当我检查浏览器的开发工具中的元素时，我可以看到它。我还读到应该使用componentHandler来升级DOM，我已经尝试了两种不同的
浏览 1提问于2016-11-09得票数 0
试着用奥雷利亚建造，使用打字稿和添加材料设计精巧。我只是简单地克隆导航骨架但带有类型记录。Cannot GET /jspm_packages/npm/aurelia-templating-router@1.0.0-beta.1.0.1/谢谢。{ "version": "0.19.0",
"description": "
浏览 2提问于2015-12-08得票数 2
1回答
我使用Vue.js在items上生成了一个表。我做错什么了？<div id="items"> <thead>-- v-bind working but tooltip is not show
浏览 4提问于2017-12-20得票数 1
1回答
组件会被添加，但不会在UI上显示。进度条的代码 var pageContent = document.getElementById("page-content") progressBar.classList.add("mdl-spinner")
progressBar.classList.add("mdl-js-spinner"
浏览 28提问于2020-04-23得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
