您的位置: 首页  >  IT文章  >  引见一款轻量级js控件：easy.js

引见一款轻量级js控件：easy.js

分类: IT文章 • 2023-11-10 16:11:18
介绍一款轻量级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{ 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( '我是确定按钮，回调函数返回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="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

相关推荐