看起来像是jQuery的jQuery.validate的正常用例已经出错了.看到这个要点.
这很好用:
<h1>Without MDL</h1>
<form id="foo">
<input type="radio" name="bar" value="1" /> 1
<input type="radio" name="bar" value="2" /> 2
<input type="submit" />
</form>
<script>
$(function() {
$('#foo').validate({
rules: {
"bar": {
required: true
},
},
errorPlacement: function(error, element) {
console.log(element);
}
});
});
</script>
这没有任何作用:
<h1>With MDL</h1>
<form id="zha">
<label for="baz__1" class="mdl-radio mdl-js-radio">
<input type="radio" name="baz" value="1" id="baz__1" class="mdl-radio__button" /> 1
</label>
<label for="baz__2" class="mdl-radio mdl-js-radio">
<input type="radio" name="baz" value="2" id="baz__2" class="mdl-radio__button" /> 2
</label>
<input type="submit" …我正在使用布局组件页面中的mdl tabbar.
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>
</header>
我是否必须在选项卡/面板上添加/删除"is-active"类,或者是否有更简单的方法以编程方式选择选项卡？
我有一个简单的页面,有一个标题和抽屉导航,如下所示
我的问题是,每当我导航到另一个页面时,抽屉菜单图标(汉堡包图标)就会消失.我能够触发图标显示componentHandler.upgradeDom();在Chrome的控制台上使用.
我试图删除//= require turbolinks,一切都继续工作,当然以我的页面加载速度为代价.
仅供参考,我将javascripts移至底部<body>以提高首页加载速度.我还尝试将javascripts移回<head>标签,无论有没有data-turbolinks-track,问题仍然重演.
我希望MDL和Turbolinks能够在不花费我(第一页)加载速度的情况下一起工作.
任何帮助非常感谢.
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><%= yield(:title) %></span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation mdl-layout--large-screen-only">
<!-- some links -->
</nav>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title"><%= yield(:title) %></span>
<nav class="mdl-navigation">
<!-- some links -->
</nav>
</div>
<main class="mdl-layout__content">
<%= yield %>
</main>
</div>
<%= javascript_include_tag 'https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js', 'data-turbolinks-eval' => 'false' %>
<%= javascript_include_tag 'application', 'data-turbolinks-eval' => false %>
</body> …我想统一我的网站的导航布局,所以我创建了一个单独的html文件,其中包含导航的代码.我使用JS动态加载文件:
$("#navigation").load("/navigation/navigation.html", function() {
$.getScript('/material.min.js');
});
问题是没有为这个html中的动态加载组件执行material.min.js,我失去了一些关键功能.我该如何解决这个问题？
我正在尝试最近发布的MDL工具包,并尝试使用卡片和表格的网格布局.
我发现MDL网格不像嵌套列的Bootstrap网格那样灵活(可能'我还不太了解它).因此,在我的3列布局中,我并排使用卡片和表格来显示我拥有的数据.
但不幸的是,除非我手动应用宽度= 100%,否则卡不会跨越列的整个宽度.但是一旦我这样做,桌子就没有响应,并且在屏幕尺寸缩小时与卡片重叠.
任何人都可以告诉我如何摆脱这个问题.
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table …使用MDL 1.0(http://www.getmdl.io/)我正在尝试在更大和更小的屏幕上滚动标题.但它只能在更大的屏幕上滚动(比如在我的电脑上),但不能在较小的屏幕上滚动.
这是html:
<html>
<head>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.teal-light_green.min.css" />
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
</div>
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">Tab 3</a>
<a href="#scroll-tab-4" class="mdl-layout__tab">Tab 4</a>
<a href="#scroll-tab-5" class="mdl-layout__tab">Tab 5</a>
<a href="#scroll-tab-6" class="mdl-layout__tab">Tab 6</a>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
</div>
<main class="mdl-layout__content"> …免责声明:我不想与Google Fanboys展开任何斗争.我只是问,因为我没有找到我的问题的直接答案,也许已经开始使用它(或任何googledev)的人可以给出建议.
Google最近宣布推出Material Design Lite 1.0,该项目在几天内已经在Github上出演了9k多次.我看了一些帖子[ 1,2 ]比较MDL VS Twitter的引导,我不明白为什么有人谷歌总部外应该考虑开始使用它.
正如他们所说:
"我们挑战自己,为用户创造一种视觉语言,将优秀设计的经典原则与技术和科学的创新和可能性相结合." - Google Material Design简介
那么,他们为什么要发布MDL呢？我只是没有看到浪费时间学习/转换到一个新的前端框架,这个框架提供的内容远远少于现有框架.MDL看起来与众不同,现代且具有更好的过渡效果.就这样？有技术优势吗？
即使我在抽屉上添加"mdl-layout - 仅限小屏幕"类,汉堡图像仍会出现在大屏幕上.
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-layout--small-screen-only">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a>
<a class="mdl-navigation__link" href="">Link</a> …我最近开始使用Google Material Design Lite的最新桌面版本,我认为它没有弹出模式,团队还没有为下一个版本实现它.
我试图将bootstrap模型包含在其中,但那些不起作用的感染似乎很混乱,我相信类/样式与其他人发生冲突.
任何想法什么将作为替代品有效？
谢谢你的帮助.
我正在创建过去6到7年的网站和自从Bootstrap 2启动后使用Bootstrap并且喜欢使用bootstrap 3.
现在我正在尝试使用Google Material Design Lite,所以我的问题是"我是否需要使用Bootstrap框架来使用Material Design Lite,或者我可以单独使用Material Design,它会提供良好的响应式网站和网格系统,如bootstrap吗？"