您好，我有一个关于 Metro UI 的问题 ( http://metroui.org.ua/dialog.html )
我正在使用这样的对话框:
<div id="TestDialog" data-role="dialog" class="Dialog">
<h1>Simple dialog</h1>
<p>
Dialog :: Metro UI CSS - The front-end framework
for developing projects on the web in Windows Metro Style.
</p>
</div>
<script type="text/javascript">
var x_dialog = $("#" + dialogId).data("dialog");
x_dialog.options = {
width: width,
height: height,
closeButton: true
}
x_dialog.open();
</script>
但是对话框没有显示关闭按钮或我想要的宽度/高度。
Metro UI 对话框有任何有用的示例吗？我还没有找到任何东西，Metro UI 中的 API 看起来不错，但如果您正在使用对话框搜索 JavaScript，您将找不到任何...
最佳答案
首先，地铁 3.0 仍处于测试阶段，因此可能仍会得到改进。与 2.0 相比，它严重依赖 html5 数据属性，因此可以在 html 代码上指定，但仍然可以使用 .attr('data-*','') 等方法在 javascript 中进行修改。这是一个工作代码:
<script>
function showDialog(id){
var dialog = $("#"+id).data('dialog');
if (!dialog.element.data('opened')) {
dialog.open();
} else {
dialog.close();
}
}
</script>
</head>
<body onload="init()">
<div class="container page-content">
<div class="padding20 no-padding-right no-padding-left no-padding-top">
<button class="button" onclick="showDialog('dialog')">Show dialog</button>
</div>
<div data-role="dialog" id="dialog" class="padding20" data-close-button="true" data-width="200" data-height="200">
<h1>Simple dialog</h1>
<p>
test
</div>
</div>
</body>
</html>
要么在 html 上指定它们，要么在 js 脚本中的单击事件上动态设置它们。像这样的事情:
$('.button').click(function () {
$('#dialog').attr('data-width','200');
$('#dialog').attr('data-height','200');
showDialog('dialog');
});
希望有帮助。
关于javascript - 在 Metro UI 中使用对话框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30187080/