jQuery Material Design 选择下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26345665/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Material Design Select Dropdown
提问by HermannHH
I'm trying to create different Form elements that reflect Google's material design principles. I have noticed that I'm not really able to find a dropdown example anywhere. The closest that I could find was in thePolymer Project.
我正在尝试创建反映 Google 材料设计原则的不同表单元素。我注意到我真的无法在任何地方找到下拉示例。我能找到的最接近的是Polymer Project。
My questions are:
我的问题是：
- Is Google shying away from using this particular form input type with Material Design?
- Could anybody please direct me to how to create a similar Select Form input to the one displayed in the link. I am aware that the one displayed in the link is not a form input per se, but surely something similar is possible for a form
<select>.
- Google 是否会回避在 Material Design 中使用这种特定的表单输入类型？
- 任何人都可以指导我如何创建与链接中显示的类似的选择表单输入。我知道链接中显示的内容本身并不是表单输入，但对于表单来说，肯定可以有类似的东西
<select>。
I have tried transforming a normal select using CSS but this seems to be extremely tricky. The other option is to recreate the select using Javascript and Unordered lists, but how user (Device and Developer) friendly is this solution?
我曾尝试使用 CSS 转换普通选择，但这似乎非常棘手。另一种选择是使用 Javascript 和 Unordered 列表重新创建选择，但此解决方案对用户（设备和开发人员）的友好程度如何？
回答by VannTile Ianito
* {
box-sizing: border-box;
}
.dropdown {
display:inline-block;
margin:30px;
position: relative;
padding:0;
border:0;
border-radius:5px;
font-size:24px;
font-weight:400;
background:#26A69A;
color:#FFF;
box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
}
.dropdown > input{
display:none;
position:fixed;
z-index:-2;
}
.dropdown > label{
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
}
.drop-ttl{
font-weight:400;
padding:5px 20px;
}
.dropdown ul {
width:100%;
font-weight:400;
margin:0;
padding:0;
position:absolute;
top:0;
text-align:center;
list-style-type:none;
background:#FFF;
color:#26A69A;
box-shadow: 0px 8px 17px 0px rgba(0, 0, 0, 0.2), 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
border-radius:5px;
}
.dropdown ul >li{
padding:5px 20px;
}
.dropdown ul > li > a{
color:inherit;
outline:0;
text-decoration:none;
cursor:pointer;
}
.dropdown ul > li:hover{
background:#DEDEDE;
}
input[type="checkbox"]:checked ~ label > ul {
display:none;
}<div class="dropdown">
<input id="checkbox1" type="checkbox" name="checkbox" checked />
<label for="checkbox1">
<div class="drop-ttl">Dropdown</div>
<ul>
<li><a>First</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</label>
</div>This is a nice css-only material dropdown. +1 if it helps.
这是一个不错的仅 css 材质下拉列表。+1 如果有帮助。
回答by pudgereyem
There is an issue over at github on this; https://github.com/google/material-design-lite/issues/854.
在 github 上有一个问题；https://github.com/google/material-design-lite/issues/854。
In the meantime I made my own "css only"-version (simple) http://codepen.io/pudgereyem/pen/PqBxQx/
与此同时，我制作了自己的“仅 css”版本（简单）http://codepen.io/pudgereyem/pen/PqBxQx/
<!-- Standard Select -->
<div class="mdl-selectfield">
<label>Standard Select</label>
<select class="browser-default">
<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>
</div>
If you want a Javascript-version that styles the whole thing, I would recommend checking out materializecss.
如果你想要一个 Javascript 版本的样式，我建议你查看 materializecss。
回答by onerinas
you can get it as Material-UI component
你可以把它作为Material-UI 组件
if you are using AngularJs, Material Angular projectis a great place for material design ( still, dropdown not available. currently they are working for it as md-dropdown directive)
如果您使用的是 AngularJs，Material Angular 项目是材料设计的好地方（仍然，下拉列表不可用。目前他们正在为它工作作为 md-dropdown 指令）
edit: it seems you can even use polymer element by importing this:
编辑：似乎您甚至可以通过导入以下内容来使用聚合物元素：
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="components/paper-dropdown-menu/paper-dropdown-menu.html">
回答by Roko C. Buljan
Here's my take using a bit of jQuery, ULlist and a hidden input(so you can eventually submit data-value with your form:)
这是我使用一些 jQuery、UL列表和隐藏的方法input（因此您最终可以使用表单提交数据值：）
jQuery(function($){
// /////
// MAD-SELECT
var madSelectHover = 0;
$(".mad-select").each(function() {
var $input = $(this).find("input"),
$ul = $(this).find("> ul"),
$ulDrop = $ul.clone().addClass("mad-select-drop");
$(this)
.append('<i class="material-icons">arrow_drop_down</i>', $ulDrop)
.on({
hover : function() { madSelectHover ^= 1; },
click : function() { $ulDrop.toggleClass("show"); }
});
// PRESELECT
$ul.add($ulDrop).find("li[data-value='"+ $input.val() +"']").addClass("selected");
// MAKE SELECTED
$ulDrop.on("click", "li", function(evt) {
evt.stopPropagation();
$input.val($(this).data("value")); // Update hidden input value
$ul.find("li").eq($(this).index()).add(this).addClass("selected")
.siblings("li").removeClass("selected");
});
// UPDATE LIST SCROLL POSITION
$ul.on("click", function() {
var liTop = $ulDrop.find("li.selected").position().top;
$ulDrop.scrollTop(liTop + $ulDrop[0].scrollTop);
});
});
// CLOSE ALL OPNED
$(document).on("mouseup", function(){
if(!madSelectHover) $(".mad-select-drop").removeClass("show");
});
});::-webkit-scrollbar {
width: 4px;
height: 4px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0, 0.2);
border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgba(0,0,0, 0.3);
}
*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}
body{
font: 16px/24px Roboto, sans-serif;
background: #fafafa;
}
/*
MAD-SELECT by Roko CB
*/
.mad-select .material-icons{
vertical-align: middle;
}
.mad-select{
position:relative;
display:inline-block;
vertical-align:middle;
border-bottom: 1px solid rgba(0,0,0,0.12);
padding-right: 8px;
}
.mad-select ul {
list-style: none;
display:inline-block;
margin:0; padding:0;
}
.mad-select li{
vertical-align: middle;
white-space: nowrap;
height:24px;
line-height:24px;
display: none;
padding: 8px 16px;
margin:0;
box-sizing: initial;
}
.mad-select > ul:first-of-type{
max-width:120px; /* COMMENT FOR AUTO WIDTH */
}
.mad-select > ul:first-of-type li.selected{
display: inline-block;
height: 24px;
max-width: calc(100% - 24px);
overflow: hidden;
text-overflow: ellipsis;
}
.mad-select i.material-icons{
opacity: 0.5;
margin:0;
padding:0;
}
/*jQ*/
.mad-select ul.mad-select-drop{
position: absolute;
z-index: 9999;
visibility: hidden; opacity:0;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
top: 0;
left: 0;
transition: 0.24s;
max-height: 0;
overflow: hidden;
overflow-y: auto;
}
.mad-select ul.mad-select-drop.show{
visibility: visible; opacity: 1;
max-height: 160px; /* COMMENT IF YOU DON?T NEED MAX HEIGHT */
}
.mad-select ul.mad-select-drop li{
display: block;
transition: background 0.24s;
cursor: pointer;
}
.mad-select ul.mad-select-drop li.selected{
background: rgba(0,0,0,0.07);
}
.mad-select ul.mad-select-drop li:hover{
background: rgba(0,0,0,0.04);
}<link href='https://fonts.googleapis.com/css?family=Roboto:500,400,300,100&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
Select an option:
<div class="mad-select">
<ul>
<li data-value="1">Option 1</li>
<li data-value="2 foo">Option 2</li>
<li data-value="3 bar">Option 3</li>
<li data-value="4">Option 4</li>
<li data-value="5">Option long desc 5</li>
<li data-value="6">Option 6</li>
<li data-value="7">Option 7</li>
<li data-value="8">Option 8</li>
</ul>
<input type="hidden" name="myOptions" value="3 bar">
</div>回答by Vladislava Frantskevich
Look at https://github.com/CreativeIT/getmdl-select. It is our implementation of select component using native mdl-menu styles. It provides a fast way to make select input with native Material design lite menu style.
查看https://github.com/CreativeIT/getmdl-select。这是我们使用原生 mdl-menu 样式实现的 select 组件。它提供了一种使用原生 Material design lite 菜单样式进行选择输入的快速方法。
You can find worked example on this page http://creativeit.github.io/getmdl-select/
您可以在此页面上找到工作示例http://creativeit.github.io/getmdl-select/
