MetroUICSS 2.0到3.0升级细节记录
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，我在这里记录下各种细节。
js包的替换，url的替换
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" onclick='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();
//}
}