标签: materialize
Materialise CSS select语句未显示
虽然这个问题已经在这个帖子中提出过:
我在放置此代码的位置时遇到问题:
$(document).ready(function() {
$('select').material_select();
});
目前,我能想到的最合乎逻辑的事情就是这样:
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js">
$(document).ready(function() {
$('select').material_select();
});
</script>
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</body>
我已经尝试将"文档"更改为我的文档名称,在本例中为"index",但它仍然无法正常工作.
我只是慢吗？
提前致谢.
推荐指数
解决办法
查看次数
Materialize.css模式未在动态创建的元素上正确初始化
我正在使用ajax调用使用jQuery动态地将行附加到表.我希望每行中生成的按钮显示一个模式,其中包含特定于该特定行中项目的数据.
我目前遇到以下问题:
- 当我点击第一个和第二个按钮时出现模态.但是,当我尝试关闭第二个模态时,模态中的框阴影不会消失,在刷新页面之前,我无法继续单击任何按钮.
我检查了Materialise.css文档,它提到我们需要用$(".modal-trigger")初始化模态.如果使用触发器来显示模态,则使用leanModal().我用来触发模态的ID在下面的代码中称为"营养事实".
任何帮助,将不胜感激.谢谢!!
更新:使用CodePen:http://codepen.io/mtaggart89/pen/pgbgOB
HTML:
<!-- Modal Structure -->
<div id="nutrition-facts" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Nutrition Facts</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
</div>
</div>
jQuery函数创建元素:
function buildTable(foodData) {
var itemList = foodData.list.item;
var foodGroup, foodName, newDiv, createButton, ndbNumber, createTable, tableHead, categoryHeading, nameHeading, tr;
$("table").addClass("bordered");
categoryHeading = $("<th>").html("Category");
nameHeading = $("<th>").html("Name");
$("thead").append(categoryHeading).append(nameHeading);
for (var i = 0; i < itemList.length; i++) {
foodGroup = $("<td>").html(itemList[i].group);
foodName = …推荐指数
解决办法
查看次数
Materializecss-使用Typeahead.js输入标签
所以我正在使用Materialziecss和第三方库来输入标签
- Materializecss：http：//materializecss.com/
- 物化标签库：http : //henrychavez.github.io/materialize-tags/examples/
现在，根据标签输入库的文档，如果您愿意包括自动完成的typeahead功能，则需要包括typeahead.js库。
他们推荐的一个是http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
我正在尝试应用该库，但是无法正常运行。我的代码如下
$(document).ready(function() {
$('select').material_select();
$('#en_tags').materialtags({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});
});<head>
<link rel="stylesheet" href="<?php echo base_url('assets')?>/css/materialize-tags.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/materialize-tags.min.js"></script>
<script src="<?php echo base_url('assets')?>/js/typeahead.js"></script>
</head>
<body>
<div class="input-field">
<label for="en_tags">English Tags</label>
<input type="text" name="en_tags" id="en_tags" value="" data-role="materialtags"/>
</div>
</body>提前致谢
推荐指数
解决办法
查看次数
使用materialize-css和Webpack时,在忽略大小写时使用相同名称的模块JQuery
我有一个基本的单页React/Redux应用程序,我使用Webpack捆绑,所有工作正常,除了以下错误,当我尝试加载materialize-css js文件.我尝试从NPM模块和编译源加载,错误是相同的.
WARNING in ./~/jQuery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.
WARNING in ./~/jquery/dist/jquery.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple …推荐指数
解决办法
查看次数
如何在materialize中使用<a>或<button>元素触发下一个选项卡
<div class="col s12">
<ul class="tabs">
<li class="tab col s4"><a href="#test1" class="active">tab1</a></li>
<li class="tab col s4"><a href="#test2">tab2</a></li>
<li class="tab col s4"><a href="#test4">tab3</a></li>
</ul>
</div>
<div id='test1' class="col s12">
<a href='#test2' >continue</a>
</div>
<div id='test2' class="col s12"></div>
我正试图导航到下一个标签 
点击materializeCss中的"继续按钮"按钮或链接后.我附上了图片以便更好地理解.
推荐指数
解决办法
查看次数
将显示卡实现在一行中
我正在使用Materialise CSS卡,可以在这里找到:http://materializecss.com/cards.html
我创建了卡片但问题是卡片没有显示在一行中.我希望它们具有响应性,所以如果页面宽度足以在一行中显示两张卡片,它应该显示它们,但在我的情况下它们不会显示在一行中.
我尝试了所有类型的显示风格,即:inline,inline-block,table,table-cell,run-in,block,等,但没有表现出他们在同一行.
这是我的代码:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet" media="screen,projection"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" name="viewport">
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Let browser know website is optimized for mobile-->
<title>My Works</title>
</head>
<body>
<div class="row">
<div class="col s12 m4">
<div class="card" style="display:run-in;">
<div class="card-image">
<img src="http://www.ilikewallpaper.net/ipad-wallpapers/download/2268/Square-Pattern-ipad-wallpaper-ilikewallpaper_com.jpg">
<span class="card-title" style="width:100%; background: rgba(0, 0, 0, 0.5);">Sample1</span>
</div>
<div class="card-content"> …推荐指数
解决办法
查看次数
如何在materialize.css中增加轮播的大小？
我试图在materialize.css中增加轮播的大小,但无法得到它.我试过设置高度,但没有用.我用Google搜索但找不到任何解决方案.任何人都可以帮我这个吗？
推荐指数
解决办法
查看次数
使用Materialize在手机上重新排序列
我正在使用物化框架,并试图在电话视图中重新排序列顺序.我希望购买按钮在手机上的内容之前.尝试拉和推,但无法搞清楚.有帮助吗？
先感谢您.
<div class="row">
<div class="col s12 m3 l3">
<img src="">
</div>
<div class="row">
<div class="col s12 m6 push-m6 l7">CONTENT</div>
<div class="col s12 m6 pull-m6 l2">BUY BUTTON</div>
</div>
</div>
推荐指数
解决办法
查看次数
实体化中的砌体
我想知道是否有任何方法可以在类似砖石结构的显示器中放置物化卡。我想避免使用砌体之类的插件，也不必编译sass，因为它将用于aurelia应用程序，并且外部库的配置等使我非常痛苦。
我遇到的最接近的东西是：http : //codepen.io/mike-north/pen/MwVoYp?editors=1100，它通过以下方式实现：
.cards-container {
column-break-inside: avoid;
.card {
display: inline-block;
overflow: visible;
}
}
las，我无法使用sass-css编译器来使其正常工作。问题是卡显示损坏，如在此图中可以看到。我尝试过的其他方法导致的结果相同：卡破了。任何帮助将不胜感激。
推荐指数
解决办法
查看次数
如何在窗口准备好后打开实体模式？
我想在用户进入窗口时打开一个模态窗口,我的意思是,打开没有触发按钮的模态,我有这个例子.
<button data-target="modal1" class="btn modal-trigger" id="btn-1">Modal</button>
<div id="modal1" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
</div>
如果我点击触发按钮,它可以工作,但我不想点击.窗口准备好后我使用此代码:
$(function()
{
function checkCode()
{
$("#btn-1").click();
}
});
这会自动按下按钮并产生模态自动打开的效果,但我不想这样做.
推荐指数
解决办法
查看次数
标签 统计
materialize ×10
css ×7
html ×6
javascript ×3
jquery ×3
carousel ×1
html-input ×1
masonry ×1
node.js ×1
reactjs ×1
typeahead.js ×1
webpack ×1