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








easy.js 组件快速入门

在使用 easy.js 的组件之前，如果能花上几分钟看看下面的一些简单的入门指南，在使用组件的时候你会更加的得心应手。

简单性

easy.js 的组件在 UI(界面) 层面尽量保持简单，开发者可以很方便的通过修改 CSS 样式就可以轻松定制自己想要的样式。

使用一个组件通常情况下只需要寥寥几行 JS 代码。

一致性

组件在接口设计、命名规则上都尽可能的保持一致。通常，你只要使用过任意一个组件，那么其他组件也很容易上手。

模块化

每个组件都是一个独立的符合 AMD 规范的模块，都依赖 easy.js 的核心库，在使用时都可以通过 E.use 来进行加载。

命名空间

所有组件的命名空间都是 E.ui，在组件加载完后都可以通过 E.ui.xxxx 来访问。

实例化

在使用组件时都需要通过 new 关键字来实例化，组件类的首字母都是 大写。

实例化时，第一个参数 都是必需的，该参数通常都是设置需要实例化某个/组 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

是否锁定对话框，锁定对话框时没有关闭按钮，也不能使用 ESC 键来关闭。
noFn Function null

取消按钮的回调函数，该回调函数的 this 指向对话框元素，如果该函数返回 false，将不会关闭对话框。未设置该参数将不显示取消按钮。同时关闭按钮也会调用该回调函数。
noText String 取消

取消按钮的文本内容。
overlay Boolean true

是否显示遮罩层。
title String null

对话框的标题，未设置该参数将不显示对话框的标题栏。
top String null

设置对话框的 Y 轴定位值，需带单位，默认为垂直居中。
topWindow Boolean false

如果对话框定义在一个 iframe 中，是否允许其在顶级 window 中显示，如果需要在顶级窗口中显示，需要确保顶级窗口中有对话框的样式。
trigger String click

触发显示对话框的事件，支持自定义事件。
width String 320px

对话框的宽度，需带单位。
yesFn Function null

确定按钮的回调函数，该回调函数的 this 指向对话框元素，如果该函数返回 false，将不会关闭对话框。未设置该参数将不显示确定按钮。
yesText String 确定

确定按钮的文本内容。
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{ 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( '我是确定按钮，回调函数返回false时不会关闭对话框。' );
        return false;
    },
    noFn : function(){
        alert( '我是取消按钮' );
    }
});

运行

例子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="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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yangkai-cn/p/4016602.html