最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Modern UI (Metro) style tile in HTML 5? - Stack Overflow

programmeradmin1浏览0评论

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

Share Improve this question edited Apr 24, 2013 at 11:40 Bastien Vandamme asked Apr 24, 2013 at 11:26 Bastien VandammeBastien Vandamme 18.5k36 gold badges127 silver badges213 bronze badges 1
  • I just found this but it's a tool, no real code. I would like to code this to create website : youtube./watch?v=5MB4PqHhEbU – Bastien Vandamme Commented Apr 24, 2013 at 11:31
Add a ment  | 

2 Answers 2

Reset to default 4

There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.

Anyone looking at this now should check out MetroUI - it follows a very similar methodology to Twitter Bootstrap and is very easy to use and produces really nice results.

It's also:

Developed with the advice of Microsoft to build the user interface

So you get something really true to Windows 8

发布评论

评论列表(0)

  1. 暂无评论