介绍一款轻量级js控件：easy.js








easy.js 组件高速入门

在使用 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 对话框组件

Define in : dialog.js

该组件用于创建一个 Dialog 对话框，对话框里能够包括不论什么你想加入的内容。对话框的 HTML 结构是组件自己主动构建的，仅仅需传递一个简单的文本就能够创建一个对话框，当然，你也能够传递自己定义的 HTML 结构。对话框默认的样式是 windows 8 的简洁风格，你也能够非常方便的自己定义对话框的样式。

Dialog( target, [ options ] )

依赖
JS : 依赖 Drag 组件
CSS : 依赖样式
HTML : 组件自己主动构建
參数
  • target
    String|
    Element|
    easyJS Object
    必需

    target 能够是选择器字符串、DOM 元素，也能够是 easyJS Object，仅匹配第一个元素，该元素用于触发事件来显示对话框。

  • options
    Object
    可选

    多选形式的可配置參数。

下表列出多选可配置形式的參数的具体说明。

參数 数据类型 默认值 说明
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

对话框的定位层级。
方法
  • close

    关闭对话框实例，返回实例便于链式调用。

  • destroy

    销毁对话框实例。

  • on

    对对话框实例绑定事件，该方法接受2个參数，第一个參数是事件类型，第二个參数是事件处理器，返回实例便于链式调用。

  • un

    卸载对话框实例的事件。该方法接受1个事件类型的參数。返回实例便于链式调用。

下表列出了支持的事件类型。

事件类型 说明 事件对象
open

对话框显示时触发的事件。

event.target 对话框元素。
close

对话框关闭时触发的事件。

event.target 对话框元素。

在使用 Dialog 组件前，对其进行载入。

1
2
3
E.use( 'dialog', function(){
    // 在回调中实例化对话框
});

Dialog 组件须要依赖样式。

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{ width: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{ width: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

创建一个对话框，不要遮罩层，传递 HTML 字符串作为内容。

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

自己定义对话框的HTML结构。

1
<div id="testBox" style="width: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

posted @ 2015-05-19 09:20  hrhguanli  阅读(908)  评论(0)  编辑  收藏  举报