标签: materialize
如何从另一个可折叠项目[js]中的链接展开可折叠项目？
我正在制作一个可折叠项目列表,可以调用自己来滚动和动态扩展其他项目.为此射击......
在选择超链接之前.
选择后.
当选择第三个项目段落中的链接时,如何将第一个折叠项目展开？
我得到了:如果上面的示例有更多折叠项目,那么下面的代码会将网页滚动到所需的可折叠项目(解决方案的一半).
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i><a name="987"/>First</a></div>
<div class="collapsible-body"><p>Hello StackOverflow! SO's da' bomb diggidy!</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
<div class="collapsible-body"><p>Why is the person who invests your money called a broker?</p></div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
<div class="collapsible-body"><p>I'd like to <a href="#987">open the First collapsible element</a> in this list.</p></div>
</li>
</ul>
</div>
<!--Import …推荐指数
解决办法
查看次数
材料图标与材料设计图标
有两种使用Materilize Icon的方法：
<i class="mdi-ICON-NAME"></i>
<i class="material-icons">ICON_NAME</i>
在官方网站我没有发现指南或图标图表以这种方式使用的字体<i class="mdi-ICON-NAME"></i>，但有指导如何以这种方式使用的图标<i class="material-icons">ICON_NAME</i> 在这里。
因此，当官方站点上没有有关如何以这种方式使用图标的指南时<i class="mdi-ICON-NAME"></i>。然后为什么要在整个样式表中定义它（materialize.css）。
另外，如果我需要以这种方式调用图标，<i class="material-icons">ICON_NAME</i>那么我需要为字体文件链接一个图标。例如。<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">。因此，我觉得不需要将2种字体加载到DOM中，对吗？
我的问题是：如果需要以这种方式使用图标，在哪里可以找到图标图表<i class="mdi-ICON-NAME"></i>？
推荐指数
解决办法
查看次数
Phonegap/Android中的Materialize图标不起作用
我正在使用"物化设计"为我的应用程序,使用phonegap,我按照这里详述的步骤:http://google.github.io/material-design-icons/#icon-font-for-the-web "设置方法2.自托管"但是当我在不同的Android版本上运行它时,图标不会显示...
我读了类似的东西,如果我有不同的android版本我必须隐藏一些文件(有woff,ttf,woff2扩展的那些).
推荐指数
解决办法
查看次数
导入材料设计图标是否应使用我当前的代码脱机工作？
我目前正在为自动停车系统设计UI.它需要能够脱机工作,因为我们不知道代客是否会有互联网连接.我还需要使用Material Design图标.我已经对我的html代码进行了测试,看看Material Design图标是否可以脱机工作,但是,有时页面会很好地加载,在其他情况下Google Chrome会崩溃.我非常感谢能够深入了解正在发生的事情,以及如何使用所需的材料设计图标确保我的页面离线加载.
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!--Import the css I designed for this UI specifically-->
<link type="text/css" rel="stylesheet" href="css/menu.css"/>
<!--Import Material Design icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import jQuery before materialize.js-->
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<!--Import jQuery Keypad CSS-->
<link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.plugin.js"></script>
<script type="text/javascript" src="js/jquery.keypad.js"></script>
<!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket …推荐指数
解决办法
查看次数
始终在materializecss中显示汉堡包菜单
如何在navbar materializecss上始终显示菜单图标？就像点击时一样,抽屉出现并隐藏,反之亦然.
HTML:
<nav class="default" role="navigation">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Brand</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Login</a></li>
<li><a class="waves-effect red waves-light btn">Sign up</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="#">Login</a></li>
<li><a href="#">Sign up</a></li>
</ul>
</div>
</nav>
JS:
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
推荐指数
解决办法
查看次数
如何在右侧而不是左侧打开Materialize SideNav？
我正在使用Materialise设计框架,但我想从右侧打开SideNav.我对Materialise的了解不多.现在我的SideNav从左侧打开,但我想从右侧打开SideNav.
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}
);
$('.collapsible').collapsible(); <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<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 href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a …推荐指数
解决办法
查看次数
如何使用materialize css将带图标的搜索框添加到导航栏？
我想嵌入一个简单的输入搜索框.我尝试使用像bootstrap中的代码,但我无法使其工作.我不知道怎么做.
我有这个引导代码:
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search"
name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
</div>
参考:如何添加搜索框
推荐指数
解决办法
查看次数
使用jquery ajax中的动态数据实现自动完成
我正在ASP.Net MVC应用程序中使用实现ui,我正在使用动态数据的自动完成控件.
这是我的代码,
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">textsms</i>
<input type="text" id="autocomplete-input" class="autocomplete">
<label for="autocomplete-input">Autocomplete</label>
</div>
</div>
</div>
</div>
这是jquery ajax调用,
$(function () {
$.ajax({
type: 'GET', // your request type
url: "/Home/GetData/",
success: function (response) {
var myArray = $.parseJSON(response);
debugger;
$('input.autocomplete').autocomplete({
data: {
"Arizona (1)": null,
"Florida (2)": null,
"Georgia (3)": null,
"Hawaii(4)": null,
"Idaho (5)": null,
"Illinois (6)": null
}
});
}
});
});
它只能以这种格式接受数据,这是我的回复,
"[["Arizona (1)"],["Florida (2)"],["Georgia (3)"],["Hawaii …推荐指数
解决办法
查看次数
我的纤毛笔编辑器Bold不起作用？
除粗体以外，其他工具也可以使用，当我单击粗体时，我的文本仍不变为粗体？我致力于实现。谁能帮我？提前致谢。
推荐指数
解决办法
查看次数
如何将prev和下一个箭头放入物化转盘中？
我有第二个旋转木马随着点击和拖动移动...但我想显示箭头让用户知道这是一个滑块...有没有办法用materialize显示它？或者我必须从另一种方式制作它？
推荐指数
解决办法
查看次数
标签 统计
materialize ×10
css ×5
html ×5
javascript ×5
jquery ×3
css3 ×2
ajax ×1
android ×1
autocomplete ×1
frameworks ×1
icons ×1
quill ×1