标签: material-design-lite
Material Design Lite和jQuery,平滑滚动无法正常工作
我无法使用Google的Material Design Lite(MDL)使用.animate方法.我使用MDL制作导航栏,但平滑滚动无法正常工作.
简单的jQuery代码是这样的:
$(function(){
$('a.smooth').click(function(){
console.log("SMOOTH BEGIN");
var speed = 1000;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
console.log("SMOOTH END");
});
});
简单的HTML代码是这样的:
<!-- Navigation (this is included header) -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="">Home</a>
<a class="mdl-navigation__link smooth" href="#product">Product</a>
</nav>
<!--Main contents -->
<main class="mdl-layout__content">
<div id="product"><!—-Contents-—></div>
</main>
这段代码向我展示了日志,"SMOOTH BEGIN"和"SMOOTH END".但是,该链接作为普通链接,不像平滑.如何让jQuery使用MDL？也许正在发生一些冲突,但是控制台没有显示任何内容.
html javascript jquery conflicting-libraries material-design-lite
推荐指数
解决办法
查看次数
我使用MDL获得2个滚动条,我该如何解决？
我正在使用谷歌的mdl获得2个滚动条.我在下面添加了我的HTML.我怎样才能解决这个问题？ 在codepen上查看代码
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col mdl-cell--8-col-desktop mdl-cell--12-col-tablet mdl-cell--12-col-phone">
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
<div class="mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--12-col"></div>
</div>
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-desktop mdl-cell--4-col-tablet mdl-cell--12-col-phone"></div>
</div>
</div>
推荐指数
解决办法
查看次数
动态添加选项卡升级元素
当我添加带有反应的选项卡时，其父元素已经升级。所以调用 upgradElement 没有效果，添加的选项卡不起作用。什么解决方案，用容器重新创建所有选项卡并升级它？在这种情况下，React 只是更新 DOM 组件，我需要卸载组件？
推荐指数
解决办法
查看次数
使用Material Design Lite无法正确对齐汉堡按钮
我有这个简单的代码:
<html>
<head>
<!-- Material Design Lite -->
<script src="https://code.getmdl.io/1.1.1/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Always shows a header, even in smaller screens. -->
<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> …推荐指数
解决办法
查看次数
如何扩展MDL微调器？
有没有办法扩展MDL微调器？我试图改变它widht和height属性,但它变得thiner.看一看:
CSS
width: 150px;
height: 150px
结果
推荐指数
解决办法
查看次数
MDL组件不与React一起使用
我正在关注Facebook的反应教程并正在玩它.当我尝试将MDL与我的页面集成(来自getmdl.io)时,它无法正常工作.
在我的index.html; 我添加了他们的CSS和js文件的链接.我还使用npm安装了mdl.
我的index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<!--Material design things getMdl-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.2/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.2/material.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/javascript" src="client/public/bundle.js"></script>
</body>
</html>
在我的index.jsx文件中,由webpack转换为bundle.js:
const LikeComponent = React.createClass({
getInitialState : function (){
return {likesCount2 : this.props.likesCount};
},
getLikesCount : …推荐指数
解决办法
查看次数
材料设计Lite卡中的垂直分区
我在这里使用Material Design Lite 网站链接
根据那里给出的文件,没有办法在卡片中进行垂直分割.
对于Divisions,通常在材料设计中使用网格布局,但是当我使用网格时,默认情况下两个单元格之间存在空间.有没有其他方法可以在卡片中没有空格的情况下进行垂直分割？
CSS
.grid-handler {
max-width: 600px;
}
HTML
<div class="grid-handler mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp">6</div>
</div>
推荐指数
解决办法
查看次数
如何包含 Chrome 扩展内容脚本的样式？
我正在开发一个 Chrome 扩展程序，它将一些 UI 反应组件注入到页面中。
UI 组件来自react-mdl. 使用它们需要我在项目顶部包含一个css 文件。
不幸的是，一旦css注入页面，整个页面的字体都会改变。
有没有办法来限制的范围内css使用react-mdl，使得它不会影响我注入该页面？
推荐指数
解决办法
查看次数
如何将材料设计应用于文件输入标签？
我正在使用谷歌的材料设计精简版设计一个网站,在我的主页上我有一个文件输入标签
<input type="file">
问题是我找不到合适的mdl类来设置这个元素的样式
推荐指数
解决办法
查看次数
ActiveRecord :: StatementInvalid。SQLite3 :: SQLException：没有这样的表
我正在创建一个社交网络，添加“好友请求”时遇到问题。当我按下“添加朋友”按钮时，Rails控制台向我显示以下内容。
移民友谊：
class CreateFriendships < ActiveRecord::Migration[5.1]
def change
create_table :friendships do |t|
t.references :user, foreign_key: true
t.references :friend, foreign_key: true
t.string :status
t.timestamps
end
end
end
控制器：
class FriendshipsController < ApplicationController
before_action :find_friend,except: [:index,:update]
before_action :find_friendship, only: [:update]
def create
friendship = Friendship.new(user: current_user, friend: @friend)
respond_to do |format|
if friendship.save
format.html { redirect_to @friend }
format.js
else
format.html {redirect_to @friend, notice: "Error!"}
format.js
end
end
end
private
def find_friend
@friend = User.find(params[:friend_id])
end
end
模特友谊：
class Friendship < ApplicationRecord …推荐指数
解决办法
查看次数
标签 统计
javascript ×5
css ×4
html ×3
reactjs ×3
jquery ×2
web ×2
css3 ×1
html5 ×1
material-ui ×1
ruby ×1
web-frontend ×1