标签: material-design-lite
MDL jquery:标签将内容重叠到输入字段中
我使用的是Firefox 40.0.3 /铬45.0.2454.85,我有以下问题:
在placeholder/label重叠的内容,如果我使用jQuery.
使用Javascript:
$("#eventAddKurzLB").val("test");
HTML:
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="eventAddKurzLB" />
<label class="mdl-textfield__label" for="eventAddKurzLB">Kurzbezeichnung:</label>
<span class="mdl-textfield__error">Es sind nur Zahlen, Buchstaben und Bindestriche erlaubt!</span>
</div>
例:
2
推荐指数
推荐指数
1
解决办法
解决办法
2476
查看次数
查看次数
带有图标的材料设计精简版(MDL)按钮
在MDL中有两个选项:Normal Button:
<button className="mdl-button mdl-js-button">
Continue with Facebook
</button>
和图标按钮:
<button className="mdl-button mdl-js-button mdl-button--icon">
<i className="material-icons">mood</i>
</button>
怎么可能在左边有一个带有图标的按钮,例如
<button className="mdl-button mdl-js-button mdl-button--raised mdl-button--icon-left">
<i className="material-icons">mood</i> Continue with Facebook
</button>
2
推荐指数
推荐指数
1
解决办法
解决办法
5137
查看次数
查看次数
Ember.js应用程序中的材质设计精简输入在路径转换后失去设计
我正在尝试将Material Design lite与Ember.js应用程序一起使用,并使表单以某种方式工作.但是,当用户从一个页面导航到包含表单或输入的另一个页面时,输入似乎没有按预期运行.对于此处的示例,当页面首次加载到主页时,输入工作正常,但是当我们在登录页面和主页面之间切换时,输入回退到基本形式和材料设计动画将丢失.
不确定这个问题是否与Ember.js或Material设计有关,但是我们非常感谢任何帮助.
1
推荐指数
推荐指数
1
解决办法
解决办法
787
查看次数
查看次数
Material Design Lite 和 jQuery，平滑滚动出现问题
昨天，我在这里问了类似的问题。
平滑滚动已经起作用了。
然而，当我使用它时，平滑滚动出现了问题。
代码在这里（此存储库包括 1 个 html 文件和 1 个图像文件）： https:
//github.com/MitsuhikoShimomura/mdl-error
代码的一些重要部分。
平滑滚动：
<script>
$(function(){
$("a.smooth").click(function(e){
e.preventDefault();
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var nav_height = $(".mdl-layout__header-row").height();
var position = target.offset().top - nav_height;
$(".mdl-layout__content").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>
正文内容：
<div class="layout-transparent mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout__header--transparent">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Sample</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link smooth" href="#0">0</a>
<a class="mdl-navigation__link …1
推荐指数
推荐指数
1
解决办法
解决办法
1281
查看次数
查看次数
Material Design Lite:如何以编程方式重置浮动标签输入文本
我目前正在使用knockout.js和Material Design Lite构建单页应用程序.
我有一个表单,允许创建(和持久)一个新的实体.第一次使用表单时,浮动标签输入正常工作.但在那之后,如果我通过knockout observables重置字段的值(即将字段值设置为""以便能够输入另一个新实体的值)浮动标签不会重置:浮动标签仍然浮动在该字段上方,它应该在字段中以灰色显示,不再浮动.
请注意,如果我手动输入字段,添加空格,删除空格并退出字段,则重置行为正常.
以下是代码中的重要摘录:
表单是在Material Design Lite之后定义的(请参阅http://www.getmdl.io/components/index.html#textfields-section "带有浮动标签的文本")
<form>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="field1" data-bind="value: field1" />
<label class="mdl-textfield__label" for="field1">Field1 floating label</label>
</div>
</form>
在淘汰赛方面我有这个代码:
function MyViewModel() {
var self = this;
self.field1 = ko.observable();
....
self.resetForm = function () {
self.field1("");
}
....
在我的JS中,我创建了我的ViewModel
var vm = new MyViewModel()
并且,当我想创建一个新实体时,我打电话给这个View Model
vm.resetForm();
为了重置该字段.该字段已正确设置为空值,但不会触发浮动布局行为(返回初始状态).
谢谢
1
推荐指数
推荐指数
1
解决办法
解决办法
4870
查看次数
查看次数
MDL 文本框 - 标签不浮动
鉴于以下页面
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document Properties</title>
<link rel="stylesheet" href="https//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en" />
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.light_blue-light_green.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
.page-content {
padding: 20px;
}
.search-result-width {
max-width: 900px;
}
.card-width {
margin-bottom: 20px;
min-width: 100%;
}
#contentGrid
{
padding:50px;
}
</style>
</head>
<body style="font-family:Roboto; font-size:16px; background:#fafafa;">
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header mdl-layout--waterfall">
<div class="mdl-layout__header-row">
<div class="mdl-layout__title">
Document Properties
</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
mdl-textfield--floating-label …1
推荐指数
推荐指数
1
解决办法
解决办法
1764
查看次数
查看次数
使用MDL的泪珠标签的滑块
1
推荐指数
推荐指数
1
解决办法
解决办法
1013
查看次数
查看次数
如何在 Material Design Lite 中创建带有固定标签的文本框？
当我阅读 Material Design Lite 官方页面中的文档时，没有提到带有文本框的固定标签的类名。在 textarea 的情况下，他们有一个解决方案。但与以下相同的代码仅创建占位符而不是为input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
1
推荐指数
推荐指数
1
解决办法
解决办法
2229
查看次数
查看次数
单选按钮不会重置为初始值
我有以下共享相同的单选按钮name：
<div id="main_div">
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio1">
<input type="radio" id="radio1" class="mdl-radio__button" name="somename" value="1" checked>
<span class="mdl-radio__label">Radio 1</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio2">
<input type="radio" id="radio2" class="mdl-radio__button" name="somename" value="2">
<span class="mdl-radio__label">Radio 2</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio3">
<input type="radio" id="radio3" class="mdl-radio__button" name="somename" value="3">
<span class="mdl-radio__label">Radio 3</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio4">
<input type="radio" id="radio4" class="mdl-radio__button" name="somename" value="4">
<span class="mdl-radio__label">Radio 4</span>
</label>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="radio5">
<input type="radio" id="radio5" class="mdl-radio__button" name="somename" value="5">
<span class="mdl-radio__label">Radio 5</span> …1
推荐指数
推荐指数
1
解决办法
解决办法
1725
查看次数
查看次数
Material Design Lite - 动画在ng-view div中不起作用
在刷新页面后,你知道为什么第一个按钮动画不起作用吗？单击第一个按钮后,我们只能看到按钮阴影但动画不起作用.提前谢谢你.
<!doctype html>
</div>
<button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
<i class="material-icons mdl-color-text--white" role="presentation">add</i>
</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script>
<script src="app.js"></script>
<button class="mdl-button mdl-js-ripple-effect mdl-js-button mdl-button--fab mdl-color--accent">
<i class="material-icons mdl-color-text--white" role="presentation">add</i>
var shaApp = angular.module('shaApp', ['ngAnimate','ngRoute']);
shaApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'dashboard.html',
controller: 'dashboardCtrl',
}).
otherwise({
redirectTo: '/'
});
}
]);
shaApp.controller('dashboardCtrl', ['$scope', '$http', function($scope, $http) {}}]);
0
推荐指数
推荐指数
1
解决办法
解决办法
2160
查看次数
查看次数
没有jQuery的页面加载MDL快餐栏
我正在使用材料设计精简版,我想在页面加载时打开Snackbar,我尝试了一些我找到的解决方案但不幸的是没有成功.你有什么工作的例子吗？
-1
推荐指数
推荐指数
1
解决办法
解决办法
779
查看次数
查看次数
标签 统计
html ×5
javascript ×5
css ×4
jquery ×3
angularjs ×1
ember.js ×1
knockout.js ×1
radio-button ×1