在使用 easy.js 的组件之前，假设能花上几分钟看看以下的一些简单的入门指南，在使用组件的时候你会更加的得心应手。
简单性
easy.js 的组件在 UI(界面) 层面尽量保持简单，开发人员能够非常方便的通过改动 CSS 样式就能够轻松定制自己想要的样式。
使用一个组件通常情况下仅仅须要寥寥几行 JS 代码。
一致性
组件在接口设计、命名规则上都尽可能的保持一致。通常，你仅仅要使用过随意一个组件，那么其它组件也非常easy上手。
模块化
每一个组件都是一个独立的符合 AMD 规范的模块，都依赖 easy.js 的核心库，在使用时都能够通过 E.use 来进行载入。
命名空间
全部组件的命名空间都是 E.ui，在组件载入完后都能够通过 E.ui.xxxx 来訪问。
实例化
在使用组件时都须要通过 new keyword来实例化，组件类的首字母都是 大写。
实例化时，第一个參数 都是必需的，该參数通常都是设置须要实例化某个/组 DOM 元素。该參数能够是选择器字符串、DOM 元素以及 easyJS Object 的对象。
实例化时，第二个參数 都是可选的，该參数是一个多选可配置形式的 Object 对象。
事件处理
组件在实例化后都能够通过 on 方法来为组件绑定事件，相同，也能够通过 un 方法来卸载事件。各组件支持的事件类型能够在具体的说明文档中看到。在多选形式的配置參数中，除了可能存在 init 回调函数，不会有不论什么其它的回调。
销毁实例
组件实例能够通过 destroy 方法进行销毁。
该组件用于创建一个 Dialog 对话框，对话框里能够包括不论什么你想加入的内容。对话框的 HTML 结构是组件自己主动构建的，仅仅需传递一个简单的文本就能够创建一个对话框，当然，你也能够传递自己定义的 HTML 结构。对话框默认的样式是 windows 8 的简洁风格，你也能够非常方便的自己定义对话框的样式。
Dialog( target, [ options ] )
- 依赖
- JS : 依赖 Drag 组件
- CSS : 依赖样式
- HTML : 组件自己主动构建
參数
-
必需
-
可选
下表列出多选可配置形式的參数的具体说明。
| 參数 | 数据类型 | 默认值 | 说明 |
|---|---|---|---|
| autoClose | Number | null |
自己主动关闭对话框的时间。 |
| content | String|html String | Hello world : ) |
对话框的内容，能够是 HTML 字符串。 |
| drag | Boolen | true |
是否同意拖拽对话框。 |
| dragHandle | String|Element|easyJS Object | null |
自己定义对话框的拖拽区域。 |
| effects | String | null |
动画效果的名称。 fade 淡入淡出效果。 slide 由顶部向中间高速滑动的效果。 zoom 缩放效果。 |
| elem | String|Element|easyJS Object | null |
自己定义对话框的HTML结构。 |
| fixed | Boolean | true |
是否固定定位，为 false 时则相对 body 进行绝对定位。 |
| height | String | auto |
对话框的高度，需带单位。 |
| left | String | null |
设置对话框的 x 轴定位值，需带单位，默觉得水平居中。 |
| lock | Boolean | false |
是否锁定对话框，锁定对话框时没有关闭button，也不能使用 ESC 键来关闭。 |
| noFn | Function | null |
取消button的回调函数，该回调函数的 this 指向对话框元素，假设该函数返回 false，将不会关闭对话框。未设置该參数将不显示取消button。同一时候关闭button也会调用该回调函数。 |
| noText | String | 取消 |
取消button的文本内容。 |
| overlay | Boolean | true |
是否显示遮罩层。 |
| title | String | null |
对话框的标题，未设置该參数将不显示对话框的标题栏。 |
| top | String | null |
设置对话框的 Y 轴定位值，需带单位，默觉得垂直居中。 |
| topWindow | Boolean | false |
假设对话框定义在一个 iframe 中，是否同意其在顶级 window 中显示，假设须要在顶级窗体中显示，须要确保顶级窗体中有对话框的样式。 |
| trigger | String | click |
触发显示对话框的事件，支持自己定义事件。 |
| width | String | 320px |
对话框的宽度，需带单位。 |
| yesFn | Function | null |
确定button的回调函数，该回调函数的 this 指向对话框元素，假设该函数返回 false，将不会关闭对话框。未设置该參数将不显示确定button。 |
| yesText | String | 确定 |
确定button的文本内容。 |
| zIndex | Number | 9999 |
对话框的定位层级。 |
方法
下表列出了支持的事件类型。
| 事件类型 | 说明 | 事件对象 |
|---|---|---|
| open |
对话框显示时触发的事件。 |
event.target 对话框元素。 |
| close |
对话框关闭时触发的事件。 |
event.target 对话框元素。 |
|
1
2
3
|
E.use( 'dialog', function(){ // 在回调中实例化对话框}); |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.eui_overlay{ background:#333; opacity:0.6; filter:alpha(opacity=60);
}.eui_dialog .dg_wrapper{ background:#3498f0; box-shadow:0
0 4px rgba(0, 0, 0, 0.4); position:relative; padding:5px; border:1px solid #3571a4; }.eui_dialog .dg_header{ height:27px; line-height:22px; overflow:hidden; color:#fff;
font-weight:700; text-indent:5px; }.eui_dialog .dg_btn_close{ 18px; height:18px; line-height:18px; overflow:hidden; float:right; font-size:22px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
color:#fff; text-decoration:none; text-align:center; font-weight:400; position:absolute; top:6px; right:6px; background:#3498f0; }.eui_dialog .dg_btn_close:hover{ background:#c75050;
color:#fff; }.eui_dialog .dg_content{ padding:25px 10px; line-height:22px; border:1px solid #3c79ad;
background:#fff; }.eui_dialog .dg_footer{ 300; padding:10px; padding-top:0; overflow:hidden; _zoom:1; border:1px solid #3c79ad;
border-top:0 none; margin-top:-1px; background:#fff; }.eui_dialog .dg_btn_no,.eui_dialog .dg_btn_yes{ padding:0 18px; *padding:0 9px; height:20px; line-height:20px; background:#eaeaea;
cursor:pointer; float:right; margin-left:10px; font-family:"Microsoft yahei",arial; font-size:12px; outline:none; color:#333; text-decoration:none; border:1px solid #acacac; }.eui_dialog .dg_btn_yes{ color:#000; border-color:#3399ff;
}.eui_dialog .dg_btn_yes:hover,.eui_dialog .dg_btn_no:hover{ background:#e0effc;
} |
样例1
|
1
2
3
4
5
6
7
8
9
10
11
|
new E.ui.Dialog( '#runDemo1',
{ title : '对话框标题', content : '对话框内容', yesFn : function(){ alert( '我是确定button，回调函数返回false时不会关闭对话框。' ); return false; }, noFn : function(){ alert( '我是取消button' ); }}); |
样例2
|
1
2
3
4
|
new E.ui.Dialog( '#runDemo2',
{ content : '不设置标题，直接不显示标题栏', overlay : false}); |
样例3
|
1
2
3
4
5
|
new E.ui.Dialog( '#runDemo3',
{ title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为淡入淡出。', effects : 'fade'}); |
样例4
|
1
2
3
4
5
|
new E.ui.Dialog( '#runDemo4',
{ title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为滑动。', effects : 'slide'}); |
样例5
|
1
2
3
4
5
|
new E.ui.Dialog( '#runDemo5',
{ title : '对话框的动画效果', content : '显示和隐藏对话框的动画效果为缩放。', effects : 'zoom'}); |
样例6
|
1
2
3
4
5
6
|
new E.ui.Dialog( '#runDemo6',
{ title : '对话框的绝对定位', content : '设置对话框在左上角显示。', top : '100px', left : '100px'}); |
样例7
|
1
|
<div id="testBox" style="120px;
height:100px; background:#fff; text-align:center; line-height:100px; display:none;">Press Esc close.</div> |
|
1
2
3
4
|
new E.ui.Dialog( '#runDemo7',
{ elem : '#testBox', dragHandle : '#testBox'}); |
easy.js官网：http://easyjs.org/docs/components/index.html
转载请指明：http://blog.csdn.net/yangkai_hudong