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

访客 阅读:252 2021-03-31 22:43:36 评论:0

查阅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>
效果展示:



声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
KIKK导航

KIKK导航

排行榜
关注我们

一个IT知识分享的公众号