标签: materialize
带有框架的流星物化
我计划使用materialize:materialize包到流星应用程序.据我所知,实现使用了很多javascript来实现效果,折叠等等.Meteor有自己的事件处理,但我认为实现将使用jquery(我想我不需要添加jquery,它包括,或？)并将在流星事件之外运行.
是否足以只添加包,一切都会工作,不仅仅是外观,还有javascript(感觉)？我试图让它与我买的物化模板一起工作,而不是为了流星的optimezed,所以我有问题让它工作.
有没有人尝试这个设置,是否有任何建议的良好来源.
推荐指数
解决办法
查看次数
使用MaterialzeCss制作Side Nav Bar？
我正在尝试使用Materialise css创建一个Side Nav Bar,如果有人可以指导我,我已经尝试按照网站上的文档但我无法做到,谢谢.
推荐指数
解决办法
查看次数
实现CSS数据错误属性
我试图使用Materialise CSS设置我的表单样式,并且有一些关于data-success和data-error属性的东西有点尴尬:属性中的单词显示在垂直列中,而不是在输入字段行下方水平显示.这是一个JS小提琴示例:http://jsfiddle.net/8zgvyakn/1/.在某种拥挤的形式中,可能需要这样一个冗长的错误属性,红色文本与其他表单字段重叠.有没有办法解决这个问题,或者这是一个MaterialiseCSS限制？
推荐指数
解决办法
查看次数
为什么标签内容始终在materializecss中可见
我试图测试如何使用materialize创建选项卡,我正在测试此代码
<div class="row"
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1 </a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3"><a href="#test3">Test 3</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
</div>
问题是所有div的内容始终可见,如下图所示
我用这行$('ul.tabs')初始化了标签.tab();
你能帮我理解为什么我得到这个奇怪的输出？先感谢您.
推荐指数
解决办法
查看次数
如何在materilize CSS中控制自动打开的Datepicker？
<input type="date" class="datepicker">
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
从日期选择器中选择日期后,当我们移动到窗口上的下一个选项卡时,再次返回当前窗口时,日期选择器已自动打开.
推荐指数
解决办法
查看次数
Javascript仅在刷新后加载（Ruby on rails-Materialize CSS）
我将Ruby on Rails应用程序与Materialize CSS结合使用。
导航中的链接下拉列表可在仪表板上使用，但在其他任何页面上，您都必须先刷新它。按钮和选项卡上的波浪效果相同。我已经尝试了20种左右的解决方案，但是它们没有起作用。
我也有一个JavaScript，用于不与Materialize CSS链接的多步骤表单。在特定页面的脚本标签中使用它。
$(document).ready(function () {
// get all items
var navListItems = $('div.setup-panel div a'),
allParts = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allPrevBtn = $('.prevBtn');
allParts.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
// hide when disabled
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allParts.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
// previous
allPrevBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.removeAttr('disabled').trigger('click');
});
//next
allNextBtn.click(function(){
//setup next …推荐指数
解决办法
查看次数
MaterializeCSS 图标不起作用
我在使用 MaterializeCSS 时遇到了显示图标的问题。我正在使用文档中的“入门”，但无论出于何种原因，图标都拒绝显示。下面是我正在使用的代码
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<ul class="hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
<li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a …推荐指数
解决办法
查看次数
如何更改Materializecss选择下拉列表中的文本颜色？
我有一个Materializecss下拉选择如下:
<form class="col s12">
<select id="something" [ngModel]="_model.selectedPartyType"
(ngModelChange)="onSelectChange($event)" name="partyTypeSelection"
materialize="material_select" class="input-field col s12 m12 l4"
>
<optgroup *ngFor="let data of _model.codeTable.codeTokensG" [label]="data[0]">
<option *ngFor="let cValue of data[1]" [value]="cValue">
{{_model.codeTable.getCode(cValue).description}}
</ option>
</optgroup>
</select>
</form>
如何更改选项文本的默认蓝绿色？我试过添加
.dropdown-content li>span {
color: #000 !important;
}
.dropdown-content li>a {
color: #000 !important;
}
.select-content li>span {
color: #000 !important;
}
.select-content li>a {
color: #000 !important;
}
到我的css文件,但没有这个和变种运气.如果我在Chrome开发者工具中取消选择颜色属性
.dropdown-content li>span
是按照我的意愿.
我怎样才能改变颜色？
推荐指数
解决办法
查看次数
物化选择不起作用的附加选项
我为我的项目使用了物化css，当我想用ajax在matrialize select中附加选项时遇到问题。我已经按照这个答案如何在实现CSS框架中动态修改<select>。但不起作用。
在我的HTML中，我使用物化模式来渲染物化表单。这是我的代码：
<div class="input-field col s12">
<select id="select_1" name="select_1">
<option value="1">option 1</option>
<option value="2">option 2Barat</option>
</select>
<label for="select_1">Select 1</label>
</div>
<div class="input-field col s12">
<select id="select_2" name="select_2">
<option value="0" disabled="disabled">Choose option</option>
</select>
<label for="select_2">Select 2</label>
</div>
我的js
<script type="text/javascript">
$(document).ready(function(){
function get_selected(){
var base_url = '<?php echo base_url() ?>';
var data = $('#select_1').val();
$.ajax({
url: ""+base_url+"admin/get_data/",
dataType: 'json',
type: "POST",
data:{'data':data},
beforeSend: function() {
},
success: function (data) {
var text = '';
var $selectDropdown = $("#select_1").empty().html(' …推荐指数
解决办法
查看次数
材料设计选择搜索
我正在寻找一种带搜索输入的选择.我用materializecss构建了我的页面,但是这个库不支持这种类型的选择.这是我需要的最好的例子 - https://material.angularjs.org/latest/demo/select#select-header.有人可以帮帮我吗？
推荐指数
解决办法
查看次数