介绍一款轻量级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

时间： 2024-09-30 07:10:15

介绍一款轻量级js控件：easy.js的相关文章

介绍Web项目中用到的几款js日历日期控件和js文本编辑框插件

第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控件:CKEditor 官方网站:http://ckeditor.com/ 第四款 文本编辑器控件:KindEditor 官方网址:http://kindeditor.net/demo.php 第五款 文本编辑器控件:UEditor 官方网址:http://ueditor.baidu.com/webs

日积月累系列之国籍控件（js源码）

一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件,navtionality.js 和 mian.css.navtionality.js主要功能是国籍控件的DOM构建以及相应的事件绑定:main.css主要是用于渲染国籍控件的样式.而main.js是国籍控件的调用方法. HTML结构 国籍控件要呈现在页面上,必须事先在页面中加以设置以供控件加载使用.control-nat

【干货分享】JPager.Net MVC超好用轻量级分页控件

JPager.Net  MVC好用的轻量级分页控件,好用到你无法想象,轻量到你无法想象. JPager.Net  MVC好用的轻量级分页控件,实现非常简单,使用也非常简单. JPager.Net  MVC好用的轻量级分页控件,代码精心推敲,经多人反复建议修改,最终成型使用中.非常好用分享给大家.源代码一共放出来.先上个效果图: JPager.Net  MVC好用的轻量级分页控件JPager.Net .dll核心代码 PagerInBase.cs namespace JPager.Net { //

响应式的账号登录界面模板完整代码，内置form表单和js控件

响应式的账号登录界面模板,内置form表单和js控件 1 <!DOCTYPE html> 2 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <link type="text/css" rel="styleSheet"

日积月累系列之分页控件（js源码）

最近开发了一款分页控件,分享给大家. 主要功能和界面介绍 cform分页控件支持服务端分页.客户端分页.数据过滤.数据排序等功能. 源码介绍 cform-pager分页控件主要由三部分组成:css.scripts以及index.html,css主要是用于控制分页和列表的样式:scripts主要是负责分页数据抓取.分页控件.本地缓存.数据过滤.数据排序等功能:index.html则涉及了分页数据模板.分页容器以及相应的过滤.排序按钮. scripts介绍 scripts目录下面包含了cform-m

共有21款 jQuery 树形控件开源软件，第1页

JQuery Tree 插件 zTree zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree...更多zTree信息 最近更新: [每日一博]Ztree+PHP 无限极节点递归查找节点 发布于 1年前 jQuery的Tree控件 jstree j

一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

福利到~分享一个基于jquery的智能提示控件intellSeach.js

一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户使用.说白了,就是用户边输入,系统会提示相关的结果:或者,当用户点击搜索框时,就推荐一些内容,如360.百度都会提示今天的主要新闻或搜索量大的内容. jquery 已经有一个这样的插件了,叫 autocomplete, 但我觉得不好用.关于autocomplete的介绍也很多,有兴趣的朋友可以去试试

js控件设置只读属性和不可用属性

介绍js实现只读的几种方法: 设置控件只读的话,我们要先清楚哪些没有readOlny这个属性 我知道的checkbox和RadioButton没有readOlny这个属性,我上一篇已经介绍了如何设置checkbox的只读了. 今天我们只是了解通用的控件只读和不可用 document.getELementById(textId).disabled=true;document.getElementById(textId).setAttribute("disabled", true);  d