Metro UI CSS 学习笔记之组件(对话框)

查阅Metro UI CSS 对组件(对话框)描述,本人觉得已经描述的很详细,所以在这里不打算做详细的讲解,大家可以直接阅读以下源代码(是进过本人已经优化后的代码)。

温馨提示:相关注释,也已经在代码中添加。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--metro UI css 样式文件(组件基础)-->
    <link href="css/metro-bootstrap.css" rel="stylesheet">
    <link href="css/metro-bootstrap-responsive.css" rel="stylesheet">
    <!--metro UI css 样式文件(组件基础)-->
    <link href="css/modern.css" rel="stylesheet">
    <link href="css/modern-responsive.css" rel="stylesheet">

    <!--加载jquery js 文件-->
    <script src="js/jquery/jquery.min.js"></script>
    <script src="js/jquery/jquery.widget.min.js"></script>
    <!--加载metro js 文件-->
    <script src="js/metro/metro.min.js"></script>
    <!--加载第三方js 文件-->
    <script src="js/modern/dropdown.js"></script><!--下拉菜单第三方控件-->
    <script src="js/modern/pagecontrol.js"></script><!--多页控件第三方js-->
    <script src="js/modern/accordion.js"></script><!--手风琴第三方js-->
    <script src="js/modern/buttonset.js"></script><!--button第三方js-->
    <script src="js/modern/rating.js"></script><!--评分第三方js-->
    <script src="js/modern/carousel.js"></script><!--幻灯片第三方js-->

    <script src=""></script>
    <title>Modern UI CSS 学习笔记</title>



</head>
<body class="modern-ui" style="background: #f1f1f1">

<div class="page">
    <div class="page-header">
        <div class="page-header-content">
            <h3>Metro UI CSS样式文件之组件(对话框)</h3>
        </div>
    </div>

    <div class="page-region">
        <div class="page-region-content">
            <p>对话框 Demo</p>
            <button id="staticDialog">静态对话框</button>
            <button id="draggableDialog">可拖拽对话框/button>
                <button id="positionedDialog">绝对定位对话框</button>
                <script type="text/javascript" src="js/modern/dialog.js"></script>
                <script type="text/javascript">
                    $(document).ready(function(){
                        $('#staticDialog').click(function(e) {
                            $.Dialog({
                                'title'      : 'My static dialog',
                                'content'    : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
                                'buttons'    : {
                                    'Ok'    : {
                                        'action': function(){}
                                    },
                                    'Cancel'     : {
                                        'action': function(){}
                                    }
                                }
                            });
                        });
                        $('#draggableDialog').click(function(e) {
                            $.Dialog({
                                'title'      : 'My draggable dialog',
                                'content'    : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
                                'draggable'  : true,
                                'buttonsAlign': 'right',
                                'buttons'    : {
                                    'Ok'    : {
                                        'action': function(){}
                                    }
                                }
                            });
                        });
                        $('#positionedDialog').click(function(e) {
                            $.Dialog({
                                'title'      : 'My right dialog',
                                'content'    : 'This content can be in HTML.<br />You can add custom function to your buttons!<br /><br /><b>Features:</b><ul><li>Easy to use!</li><li>Customizable</li><li>Powerful!</li></ul>',
                                'draggable'  : true,
                                'closeButton': true,
                                'position'   : {
                                    'zone'   : 'right'
                                },
                                'buttons'    : {
                                    'Ok'    : {
                                        'action': function(){}
                                    },
                                    'Retry'     : {
                                        'action': function(){}
                                    },
                                    'Cancel'     : {
                                        'action': function(){}
                                    }
                                }
                            });
                        });
                    });
                </script>
                <h2>参数</h2>
                <ul class="unstyled">
                    <li><b>title</b> - 对话框的标题(HTML格式)</li>
                    <li><b>content</b> - 对话框的内容 (HTML 格式)</li>
                    <li><b>draggable</b> - 设置对话框是否可被拖拽,可选值为: <i>true, false</i> (默认: false)</li>
                    <li><b>overlay</b> - 设置页面的覆盖层 (设置为false时只是不显示覆盖层的效果,div还是会存在), 可选值为: <i>true, false</i> (默认: true)</li>
                    <li><b>closeButton</b> - 启用还是禁用close按钮,可选值为: <i>true, false</i> (默认: false)</li>
                    <li><b>buttonsAlign</b> - 按钮的排列位置,可选值为: <i>left, center, right</i> (默认: center)</li>
                    <li>
                        <b>buttons</b> - 设置在功能条上出现的按钮 (JSON 格式)
                        <ul class="unstyled" style="margin-left: 20px;">
                            <li>
                                <b>name</b> - 按钮上显示的文本 (JSON 格式)
                                <ul class="unstyled" style="margin-left: 20px;">
                                    <li><b>action</b> - 绑定到按钮上的动作</li>
                                </ul>
                        </ul>
                    </li>
                    <li>
                        <b>position</b> - 设置对话框的初始位置 (JSON 格式)
                        <ul class="unstyled" style="margin-left: 20px;">
                            <li><b>zone</b> - 对话框出现的区域,可选值为: <i>left, center, right</i> (默认: center)</li>
                            <li><b>offsetY</b> - 距离上边缘的距离(单位:像素)</li>
                            <li><b>offsetX</b> - 距离左边缘的距离(单位:像素)</li>
                        </ul>
                    </li>
                </ul>
                <h2>Javascript</h2>
                <p>在文档的head部分包含 <code>dialog.js</code>文件</p>






        </div>
        </div>

</body>
</html>
效果展示:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值