在 Metro 中使用对话框 UI

Question

嗨，我有一个关于地铁的问题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 看起来不错，但是如果您使用 Dialogs 搜索 JavaScript，您将找不到任何...

Answer 1

首先，metro 3.0 仍处于测试阶段，因此它可能仍会得到改进。它与 2.0 相比，它严重依赖 html5 数据属性，因此它可以在 html 代码中指定，但仍然可以在 javascript 中通过使用 .attr('data-*','') 。这是一个工作代码：

    <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');
});

希望对您有所帮助。

Answer 2

http://metroui.org.ua/dialog.html 中给出了选项帮助您根据自己的喜好自定义对话框。现在你的问题，答案是

<div id="TestDialog" data-role="dialog" class="Dialog" data-close-button="true" data-width="300" data-height="300">

就是这样。您可以用您选择的值替换宽度和高度

用于帮助打开和关闭对话框的 javascript

<script>
function showDialog(id){
    var dialog = $(id).data('dialog');
    dialog.open();
}
</script>

将打开对话框的按钮或任何 link 应该有这个 showDialog('#TestDialog') TestDalog 是 id 你给对话框 div

<button onclick="showDialog('#TestDialog')">Show dialog</button>

在 Metro 中使用对话框 UI

Using a Dialog in Metro UI

javascript

jquery

dialog

metro-ui-css