基于 HTML/Javascript 的 Metro 风格框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12592391/
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
HTML/Javascript based Metro Style Boxes
提问by Matt
Im just wondering if anyone knows of any JS libraries out there that allow me to create a webpage with tiles/touch panels that function like the windows 8 metro/modern UI panels (also lays out boxes according to available page real estate). Basically wanting to make a metro style menu in my web application.
我只是想知道是否有人知道那里有任何 JS 库可以让我创建一个带有瓷砖/触摸面板的网页，其功能类似于 windows 8 Metro/现代 UI 面板（还根据可用的页面空间布置框）。基本上想在我的 Web 应用程序中制作一个 Metro 风格的菜单。
Thanks in advance
提前致谢
回答by Software Developer
Yes, there is an excellent one called MetroJS tha handles the tile animations. But it is up to you to manage their display on the page. http://www.drewgreenwell.com/projects/metrojs
是的，有一个叫做 MetroJS 的优秀工具可以处理磁贴动画。但是由您来管理它们在页面上的显示。 http://www.drewgreenwell.com/projects/metrojs
Works excellent!
效果很好！
I used this application to create my app Tweaker that is in the Windows Store, check out the free trial in the social category. So it works great on Windows 8 too.
我使用此应用程序创建了 Windows 应用商店中的应用程序 Tweaker，请查看社交类别中的免费试用版。所以它在 Windows 8 上也能很好地工作。
I was a little disappointed that the VariableSizedWrapGrid control is not available on WinJS This is the control you want, to handle multiple sized tiles and wrap them all together neatly, unfortunately only available on XAML currently. http://blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.html
我有点失望，VariableSizedWrapGrid 控件在 WinJS 上不可用 这是您想要的控件，用于处理多个大小的图块并将它们整齐地包装在一起，不幸的是，目前仅在 XAML 上可用。 http://blog.jerrynixon.com/2012/08/windows-8-beauty-tip-using.html
回答by ss ulrey
I'm using metroUI CSS (http://metroui.org.ua/windows8start.php) and liking it so far. Simple html, styled by CSS, lots of features, drag and drop js, etc.
我正在使用 MetroUI CSS ( http://metroui.org.ua/windows8start.php) 并且到目前为止喜欢它。简单的 html、CSS 样式、大量功能、拖放 js 等。
回答by Kamal Reddy
I would suggest you to try gridster.js . Here's a demo of it http://gridster.net/.
我建议你尝试 gridster.js 。这是它的演示http://gridster.net/。
回答by Hadi Eskandari
If you're a fan of Bootstrap, there's this one called BootMetrowhich should be very familiar.
如果您是 Bootstrap 的粉丝，那么应该非常熟悉一个名为BootMetro 的工具。
回答by Dr. ABT
I've seen this recently and thought it was pretty awesome: http://tholman.com/projects/tileJs/
我最近看到了这个并认为它非常棒：http: //tholman.com/projects/tileJs/
Uses HTML / CSS3 to get the subtle rotating window effect when you click on a window. That and MetroJS could be used in combination to get the effect you want.
当你点击一个窗口时，使用 HTML/CSS3 获得微妙的旋转窗口效果。那和 MetroJS 可以结合使用以获得您想要的效果。
Let me know what you settle on, I'm planning on doing something like this myself!
让我知道你的决定，我打算自己做这样的事情！
回答by John Haugeland
Generally you're expected to use the Grid Application project. Using a third party library like MetroJS means that as the platform progresses, you will fall out of date.
通常，您应该使用 Grid Application 项目。使用像 MetroJS 这样的第三方库意味着随着平台的发展，你会过时。
If you've ever used the Photoshop file picker, you know why this is not desirable.
如果您曾经使用过 Photoshop 文件选择器，您就会知道为什么这是不可取的。
