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();
//}
}