Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式


其官网地址:http://metroui.org.ua/

中文地址:http://www.bootcss.com/p/metro-ui-css/

源码地址: https://github.com/olton/Metro-UI-CSS


这种前端框架没有Bootstrap、YUI流行,网上资料也不多。现在项目中用的这框架要从2.0升级到3.0,我在这里记录下各种细节。


  1. js包的替换,url的替换


  2. button变化

        Metro 2.0:

<button class="success">新建</button>

        Metro 3.0:

<button class="button  success">刷新</button>

class中多了个button


3. Icon变化

        metro 2.0

<i class="icon plus on-left"></i>

        metro 3.0

 <span class="mif-plus"></span>

2.0中有些图标3.0中不可用,具体哪些可用,参考源码示例中Metro-UI-CSS-master/docs/font.html


4. datatable

Metro 2.0: 

<table class="table bordered striped hovered dataTable" cellspacing="0" ><thead><tr><th><button class="invokeallbtn warning"><i class="icon-play on-left"></i>唤醒</button></th><th>监控器名</th><th>站点名</th><th>字站点名</th><th>机器名</th><th>ip</th><th>开启</th><th>Action</th></tr></thead><tbody>
 <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
 <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
                    ......
                     <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
</tbody></table>

Metro 3.0   

<table id="runMonitorTable" class="dataTable striped border bordered hovered" data-role="datatable" data-searching="true">
                <thead>
                    <tr>
                        <th><button class="invokeallbtn button small-button warning"><span class="mif-play"></span>唤醒</button></th>
                        <th>监控器名</th>
                        <th>站点名</th>
                        <th>字站点名</th>
                        <th>机器名</th>
                        <th>ip</th>
                        <th>开启</th>
                        <th>Action</th>
                    </tr>                    
                </thead>
                <tfoot>
                    <tr>
                        <th><button class="invokeallbtn button small-button warning"><span class="mif-play"></span>唤醒</button></th>
                        <th>监控器名</th>
                        <th>站点名</th>
                        <th>字站点名</th>
                        <th>机器名</th>
                        <th>ip</th>
                        <th>开启</th>
                        <th>Action</th>
                    </tr>
                </tfoot>
                <tbody>
                    <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
                    <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
                    <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
                    <tr>
                        <td>唤醒</td>
                        <td>监控器名</td>
                        <td>站点名</td>
                        <td>字站点名</td>
                        <td>机器名</td>
                        <td>ip</td>
                        <td>开启</td>
                        <td>Action</td>
                    </tr>
                </tbody>
            </table>


5. Select

Metro 2.0

 <div class="input-control select">
                            <select id="template">
                                <option select>请选择环境</option>
                                <option select>请选择环境</option>
                                <option select>请选择环境</option>
                            </select>
                        </div>


Metro 3.0

<div class="input-control full-size" data-role="select" data-placeholder="请选择环境" data-allow-clear="true">
                            <select class="full-size">
                                <option></option>
                                <option value="AK">Alaska</option>
                                <option value="HI">Hawaii</option>
                                <option value="CA">California</option>
                                <option value="NV">Nevada</option>
                                <option value="OR">Oregon</option>
                                <option value="WA">Washington</option>
                            </select>


6. Input

metro 2.0

<div class="input-control text" data-role="input-control">
                                    <input type="text" placeholder="0" id="monitorName">
                                </div>

Metro 3.0

 

<div class="input-control text" data-role="input">
                                    <input type="text" id="monitorName">
                                    <button class="button helper-button clear"><span class="mif-cross"></span></button>
                                </div>


7. dialog

Metro 2.0

    $.Dialog({
            overlay: true,
            shadow: true,
            flat: true,
            icon: null,
            title: '日志',
            content: null,
            onShow: function (_dialog) {
                var content = _dialog.children('.content');
                content.html('<div style="margin:15px; width:900px;height:500px;OVERFLOW: auto;" id="ilogcontainer"></div>');
......
}


metro 3.0

<div data-role="dialog" id="iisDialog" class="padding20" data-close-button="true" data-overlay="true" data-overlay-color="op-dark" style="min-width:500px;min-height:300px;vertical-align:top;">
    <h3 id="dialogTitle"></h3><hr />
    <div class="metro" id="dialogContent">
    </div>
    <div id="closeButtonDiv" style="display:inline-block; text-align:center;width:100%;margin:10px;">
        <button id="chcusconfirmcancel" class="button editcancelbtn cancelbtn danger" οnclick='closeDialog("iisDialog")'>
            <span class="mif-cross"></span>关闭
        </button>
    </div>
</div>
 // 打开对话框
        function showDialog(id) {
            var dialog = $("#" + id).data('dialog');
            if (!dialog.element.data('opened')) {
                dialog.open();
            }
            //else {
            //    dialog.close();
            //}
        }
        function closeDialog(dialogId) {
            var dialog = $("#" + dialogId).data('dialog');
            if (!dialog.element.data('closed')) {
                dialog.close();
            }
            //else {
            //    dialog.open();
            //}
        }