1

嗨，我有一个关于 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，您将找不到任何...

4

2 回答 2

2

首先，metro 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 脚本中的 click 事件上动态设置它们。像这样的东西：

$('.button').click(function () {
$('#dialog').attr('data-width','200');
$('#dialog').attr('data-height','200');

showDialog('dialog');
});

希望能帮助到你。

于 2015-05-28T12:05:21.970 回答
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>

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

<button onclick="showDialog('#TestDialog')">Show dialog</button>
于 2015-09-08T09:28:03.913 回答