mirror of
https://github.com/FlipsideCrypto/DefinitelyTyped.git
synced 2026-02-06 10:56:53 +00:00
[layui-layer] Add types for layui-layer (#42976)
* layui-layer * Update index.d.ts
This commit is contained in:
943297456
GitHub
parent
043d926d8b
commit
94590b4029
540
types/layui-layer/index.d.ts
vendored
Normal file
540
types/layui-layer/index.d.ts
vendored
Normal file
@ -0,0 +1,540 @@
|
||||
// Type definitions for layui-layer 1.0
|
||||
// Project: https://github.com/sentsin/layer
|
||||
// Definitions by: Zhuo Ning <https://github.com/943297456>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
/// <reference types="jquery" />
|
||||
|
||||
/**
|
||||
* @see https://www.layui.com/doc/modules/layer.html
|
||||
*/
|
||||
declare const layer: layer.Layer;
|
||||
|
||||
declare namespace layer {
|
||||
type Index = number;
|
||||
type Selector = string;
|
||||
|
||||
interface Types {
|
||||
/** 信息框 */
|
||||
dialog: 0;
|
||||
/** 页面层 */
|
||||
page: 1;
|
||||
/** iframe层 */
|
||||
iframe: 2;
|
||||
/** 加载层 */
|
||||
loading: 3;
|
||||
/** tips层 */
|
||||
tips: 4;
|
||||
}
|
||||
|
||||
/**
|
||||
* 基础参数
|
||||
*/
|
||||
interface Options {
|
||||
/**
|
||||
* 基本层类型
|
||||
* @default 0
|
||||
*/
|
||||
type?: Types[keyof Types];
|
||||
/**
|
||||
* 标题
|
||||
* @default '信息'
|
||||
* @example
|
||||
* '我是标题'
|
||||
* ['文本', 'font-size:18px;']
|
||||
* false //不显示标题栏
|
||||
*/
|
||||
title?: string | false | [string, string];
|
||||
/**
|
||||
* 内容
|
||||
* @default ''
|
||||
*/
|
||||
content?: string | HTMLElement | JQuery | [string, string];
|
||||
/**
|
||||
* 样式类名
|
||||
* @default ''
|
||||
*/
|
||||
skin?: string;
|
||||
/**
|
||||
* 宽高
|
||||
* @default 'auto'
|
||||
* @example
|
||||
* '500px' //定义宽度，高度自适应
|
||||
* ['500px', '300px'] //定义宽高
|
||||
*/
|
||||
area?: string | [string, string];
|
||||
/**
|
||||
* 坐标
|
||||
* @default 'auto'
|
||||
* @example
|
||||
* 'auto' //默认坐标，即垂直水平居中
|
||||
* '100px' //只定义top坐标，水平保持居中
|
||||
* ['100px', '50px'] //同时定义top、left坐标
|
||||
* 't' //快捷设置顶部坐标
|
||||
* 'r' //快捷设置右边缘坐标
|
||||
* 'b' //快捷设置底部坐标
|
||||
* 'l' //快捷设置左边缘坐标
|
||||
* 'lt' //快捷设置左上角
|
||||
* 'lb' //快捷设置左下角
|
||||
* 'rt' //快捷设置右上角
|
||||
* 'rb' //快捷设置右下角
|
||||
*/
|
||||
offset?: string | [string, string];
|
||||
/**
|
||||
* 图标
|
||||
* 信息框和加载层的私有参数
|
||||
* @description 信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。
|
||||
*/
|
||||
icon?: number;
|
||||
/**
|
||||
* 按钮
|
||||
* @default '确认'
|
||||
* @description 信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。
|
||||
*/
|
||||
btn?: string | string[];
|
||||
/**
|
||||
* 按钮排列
|
||||
* @default 'r'
|
||||
* @example
|
||||
* 'l' //按钮左对齐
|
||||
* 'c' //按钮居中对齐
|
||||
* 'r' //按钮右对齐。默认值，不用设置
|
||||
*/
|
||||
btnAlign?: "l" | "c" | "r";
|
||||
/**
|
||||
* 关闭按钮
|
||||
* @description layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
|
||||
* @default 1
|
||||
*/
|
||||
closeBtn?: 0 | 1 | 2;
|
||||
/**
|
||||
* 遮罩
|
||||
* @default 0.3
|
||||
* @example [0.8, '#393D49'] //透明度、颜色
|
||||
*/
|
||||
shade?: number | false | [number, string];
|
||||
/**
|
||||
* 是否点击遮罩关闭
|
||||
* @description 如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
|
||||
* @default false
|
||||
*/
|
||||
shadeClose?: boolean;
|
||||
/**
|
||||
* 自动关闭所需毫秒
|
||||
* @default 0 //不会自动关闭
|
||||
*/
|
||||
time?: number;
|
||||
/**
|
||||
* 用于控制弹层唯一标识
|
||||
* @description 设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式
|
||||
* @default ''
|
||||
*/
|
||||
id?: string;
|
||||
/**
|
||||
* 弹出动画
|
||||
* @default 0
|
||||
* @since 3.0
|
||||
* @example
|
||||
* -1 //关闭动画
|
||||
* 0 //平滑放大。默认
|
||||
* 1 //从上掉落
|
||||
* 2 //从最底部往上滑入
|
||||
* 3 //从左滑入
|
||||
* 4 //从左翻滚
|
||||
* 5 //渐显
|
||||
* 6 //抖动
|
||||
*/
|
||||
anim?: -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
/**
|
||||
* 关闭动画
|
||||
* @default true
|
||||
* @since 3.0.3
|
||||
*/
|
||||
isOutAnim?: boolean;
|
||||
/**
|
||||
* 最大最小化
|
||||
* @default false
|
||||
* @description 显示最大小化按钮。该参数值对type:1和type:2有效。
|
||||
*/
|
||||
maxmin?: boolean;
|
||||
/**
|
||||
* 固定
|
||||
* @default true
|
||||
* @description 鼠标滚动时，层是否固定在可视区域。
|
||||
*/
|
||||
fixed?: boolean;
|
||||
/**
|
||||
* 是否允许拉伸
|
||||
* @default true
|
||||
* @description 可以在弹层右下角拖动来拉伸尺寸。该参数对loading、tips层无效
|
||||
*/
|
||||
resize?: boolean;
|
||||
/**
|
||||
* 监听窗口拉伸动作
|
||||
* @param layero 当前层的DOM对象
|
||||
*/
|
||||
resizing?(layero: JQuery): void;
|
||||
/**
|
||||
* 是否允许浏览器出现滚动条
|
||||
* @default true
|
||||
*/
|
||||
scrollbar?: boolean;
|
||||
/**
|
||||
* 最大宽度
|
||||
* @default 360
|
||||
* @description 只有当`area: 'auto'`时，maxWidth的设定才有效。
|
||||
*/
|
||||
maxWidth?: number;
|
||||
/**
|
||||
* 最大高度
|
||||
* @since 3.1.0
|
||||
* @description 只有当高度自适应时，maxHeight的设定才有效。
|
||||
*/
|
||||
maxHeight?: number;
|
||||
/**
|
||||
* 层叠顺序
|
||||
* @default 19891014
|
||||
* @description 一般用于解决和其它组件的层叠冲突。
|
||||
*/
|
||||
zIndex?: number;
|
||||
/**
|
||||
* 触发拖动的元素
|
||||
* @default '.layui-layer-title'
|
||||
*/
|
||||
move?: Selector | false | JQuery;
|
||||
/**
|
||||
* 是否允许拖拽到窗口外
|
||||
* @default false
|
||||
*/
|
||||
moveOut?: boolean;
|
||||
/**
|
||||
* 拖动完毕后的回调方法
|
||||
* @param this 合并的选项
|
||||
* @param layero 当前层的DOM对象
|
||||
*/
|
||||
moveEnd?(this: this, layero: JQuery): void;
|
||||
/**
|
||||
* tips方向和颜色
|
||||
* @default 2
|
||||
* @description tips层的私有参数。
|
||||
* @example
|
||||
* 1 //上
|
||||
* 2 //右
|
||||
* 3 //下
|
||||
* 4 //左
|
||||
* [1, '#c00'] //方向，颜色
|
||||
*/
|
||||
tips?: number | [number, string];
|
||||
/**
|
||||
* 是否允许多个tips
|
||||
* @default false
|
||||
* @description 允许多个意味着不会销毁之前的tips层。
|
||||
*/
|
||||
tipsMore?: boolean;
|
||||
/**
|
||||
* 层弹出后的成功回调方法
|
||||
* @param layero 当前层DOM
|
||||
* @param index 当前层索引
|
||||
*/
|
||||
success?(layero: JQuery, index: Index): void;
|
||||
/**
|
||||
* 确定按钮回调方法
|
||||
* @param index 当前层索引
|
||||
* @param layero 当前层DOM对象
|
||||
* @description 如果设定了yes回调，需进行手工关闭，`close(index)`
|
||||
*/
|
||||
yes?(index: Index, layero: JQuery): void;
|
||||
//#region 按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。
|
||||
btn2?(index: Index, layero: JQuery): false | void;
|
||||
btn3?(index: Index, layero: JQuery): false | void;
|
||||
btn4?(index: Index, layero: JQuery): false | void;
|
||||
btn5?(index: Index, layero: JQuery): false | void;
|
||||
btn6?(index: Index, layero: JQuery): false | void;
|
||||
btn7?(index: Index, layero: JQuery): false | void;
|
||||
btn8?(index: Index, layero: JQuery): false | void;
|
||||
btn9?(index: Index, layero: JQuery): false | void;
|
||||
//#endregion
|
||||
/**
|
||||
* 右上角关闭按钮触发的回调
|
||||
* @param index 当前层索引
|
||||
* @param layero 当前层的DOM对象
|
||||
* @description 默认会自动触发关闭。如果不想关闭，`return false`
|
||||
*/
|
||||
cancel?(index: Index, layero: JQuery): false | void;
|
||||
/**
|
||||
* 层销毁后触发的回调
|
||||
* @description 无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。
|
||||
*/
|
||||
end?(): void;
|
||||
/**
|
||||
* 最大化后触发的回调
|
||||
* @param layero 当前层DOM
|
||||
*/
|
||||
full?(layero: JQuery): void;
|
||||
/**
|
||||
* 最小化后触发的回调
|
||||
* @param layero 当前层DOM
|
||||
* @description `return false` 不执行默认最小化。
|
||||
*/
|
||||
min?(layero: JQuery): false | void;
|
||||
/**
|
||||
* 还原后触发的回调
|
||||
* @param layero 当前层DOM
|
||||
*/
|
||||
restore?(layero: JQuery): void;
|
||||
}
|
||||
|
||||
interface ConfigOptions extends Options {
|
||||
/**
|
||||
* js所在的目录，可以是绝对目录，也可以是相对目录
|
||||
*/
|
||||
path?: string;
|
||||
/**
|
||||
* 拓展的css皮肤
|
||||
*/
|
||||
extend?: string | string[];
|
||||
}
|
||||
|
||||
interface PromptOptions extends Options {
|
||||
/**
|
||||
* 输入框类型，支持0（文本）默认1（密码）2（多行文本）
|
||||
*/
|
||||
formType?: 0 | 1 | 2;
|
||||
/**
|
||||
* 初始时的值
|
||||
* @default ''
|
||||
*/
|
||||
value?: string;
|
||||
/**
|
||||
* 可输入文本的最大长度
|
||||
* @default 500
|
||||
*/
|
||||
maxlength?: number;
|
||||
}
|
||||
|
||||
interface TabOptions extends Options {
|
||||
tab: TabItem[];
|
||||
/**
|
||||
* 监听选项卡的切换事件
|
||||
* @param this 传入的选项
|
||||
* @param tabIndex 选项卡索引
|
||||
*/
|
||||
change?(this: this, tabIndex: number): void;
|
||||
}
|
||||
|
||||
interface TabItem {
|
||||
title: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface PhotosOptions extends Options {
|
||||
photos: PhotosData | Selector;
|
||||
/**
|
||||
* 切换图片时触发
|
||||
* @param pic
|
||||
* @param layero
|
||||
*/
|
||||
tab?(pic: PhotosDataItem, layero: JQuery): void;
|
||||
}
|
||||
|
||||
interface PhotosData {
|
||||
/** 相册标题 */
|
||||
title: string;
|
||||
/** 相册id */
|
||||
id: number;
|
||||
/**
|
||||
* 初始显示的图片序号
|
||||
* @default 0
|
||||
*/
|
||||
start?: number;
|
||||
/** 相册包含的图片 */
|
||||
data: PhotosDataItem[];
|
||||
}
|
||||
|
||||
interface PhotosDataItem {
|
||||
/** 图片名 */
|
||||
alt: string;
|
||||
/** 图片id */
|
||||
pid?: number;
|
||||
/** 原图地址 */
|
||||
src: string;
|
||||
/** 缩略图地址 */
|
||||
thumb: string;
|
||||
}
|
||||
|
||||
namespace callback {
|
||||
type Yes = NonNullable<Options["yes"]>;
|
||||
type Cancel = NonNullable<Options["cancel"]>;
|
||||
type End = NonNullable<Options["end"]>;
|
||||
type Prompt = (value: string, index: Index, elem: JQuery) => void;
|
||||
}
|
||||
|
||||
interface Layer {
|
||||
/**
|
||||
* 初始化全局配置
|
||||
* @param options
|
||||
*/
|
||||
config(options: ConfigOptions): this;
|
||||
/**
|
||||
* 初始化就绪
|
||||
* @param callback
|
||||
*/
|
||||
ready(callback: () => void): this;
|
||||
/**
|
||||
* 原始核心方法
|
||||
* @param options
|
||||
*/
|
||||
open(options?: Options): Index;
|
||||
/**
|
||||
* 普通信息框
|
||||
* @param content
|
||||
* @param options
|
||||
* @param yes
|
||||
*/
|
||||
alert(content?: string, options?: Options, yes?: callback.Yes): Index;
|
||||
alert(content: string, yes: callback.Yes): Index;
|
||||
alert(options: Options, yes?: callback.Yes): Index;
|
||||
alert(yes: callback.Yes): Index;
|
||||
/**
|
||||
* 询问框
|
||||
* @param content
|
||||
* @param options
|
||||
* @param yes
|
||||
* @param cancel
|
||||
*/
|
||||
confirm(content?: string, options?: Options, yes?: callback.Yes, cancel?: callback.Cancel): Index;
|
||||
confirm(content: string, yes: callback.Yes, cancel?: callback.Cancel): Index;
|
||||
confirm(options: Options, yes?: callback.Yes, cancel?: callback.Cancel): Index;
|
||||
confirm(yes: callback.Yes, cancel?: callback.Cancel): Index;
|
||||
/**
|
||||
* 提示框
|
||||
* @param content
|
||||
* @param options
|
||||
* @param end
|
||||
*/
|
||||
msg(content: string, options?: Options, end?: callback.End): Index;
|
||||
msg(content: string, end: callback.End): Index;
|
||||
/**
|
||||
* 加载层
|
||||
* @param icon
|
||||
* @param options
|
||||
*/
|
||||
load(icon?: 0 | 1 | 2, options?: Options): Index;
|
||||
/**
|
||||
* tips层
|
||||
* @param content
|
||||
* @param follow
|
||||
* @param options
|
||||
*/
|
||||
tips(content: string, follow: Selector | HTMLElement, options?: Options): Index;
|
||||
/**
|
||||
* 关闭特定层
|
||||
* @param index
|
||||
*/
|
||||
close(index: Index): void;
|
||||
/**
|
||||
* 关闭所有层
|
||||
* @param type
|
||||
*/
|
||||
closeAll(type?: keyof Types): void;
|
||||
/**
|
||||
* 重新定义层的样式
|
||||
* @param index
|
||||
* @param cssStyle
|
||||
* @description 该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性
|
||||
*/
|
||||
style(index: Index, cssStyle: Partial<CSSStyleDeclaration>): void;
|
||||
/**
|
||||
* 改变层的标题
|
||||
* @param title
|
||||
* @param index
|
||||
*/
|
||||
title(title: string, index: Index): void;
|
||||
/**
|
||||
* 获取iframe页的DOM
|
||||
* @param selector
|
||||
* @param index
|
||||
*/
|
||||
getChildFrame(selector: string, index: Index): JQuery;
|
||||
/**
|
||||
* 获取特定iframe层的索引
|
||||
* @param windowName
|
||||
*/
|
||||
getFrameIndex(windowName: string): Index;
|
||||
/**
|
||||
* 指定iframe层自适应
|
||||
* @param index
|
||||
*/
|
||||
iframeAuto(index: Index): void;
|
||||
/**
|
||||
* 重置特定iframe url
|
||||
* @param index
|
||||
* @param url
|
||||
*/
|
||||
iframeSrc(index: Index, url: string): void;
|
||||
/**
|
||||
* 置顶当前窗口
|
||||
*/
|
||||
setTop(layero: JQuery): void;
|
||||
/**
|
||||
* 在自定义元素上触发最大化。
|
||||
* @param index
|
||||
*/
|
||||
full(index: Index): void;
|
||||
/**
|
||||
* 在自定义元素上触发最小化。
|
||||
* @param index
|
||||
*/
|
||||
min(index: Index): void;
|
||||
/**
|
||||
* 在自定义元素上触发还原。
|
||||
* @param index
|
||||
*/
|
||||
restore(index: Index): void;
|
||||
/**
|
||||
* 输入层
|
||||
* @param options
|
||||
* @param yes
|
||||
*/
|
||||
prompt(options?: PromptOptions, yes?: callback.Prompt): Index;
|
||||
prompt(yes: callback.Prompt): Index;
|
||||
/**
|
||||
* tab层
|
||||
* @param options
|
||||
*/
|
||||
tab(options: TabOptions): Index;
|
||||
/**
|
||||
* 相册层
|
||||
* @param options
|
||||
*/
|
||||
photos(options: PhotosOptions): Index;
|
||||
/**
|
||||
* 最新弹出的某个层
|
||||
*/
|
||||
index: Index;
|
||||
zIndex: number;
|
||||
/**
|
||||
* 版本字符串
|
||||
*/
|
||||
v: string;
|
||||
}
|
||||
|
||||
interface Options {
|
||||
/**
|
||||
* @deprecated v3.0
|
||||
* @description 只提供默认的一种拖拽风格
|
||||
*/
|
||||
moveType?: number;
|
||||
/**
|
||||
* @deprecated v3.0
|
||||
* @see {@link #fixed}
|
||||
*/
|
||||
fix?: boolean;
|
||||
/**
|
||||
* @deprecated v3.0
|
||||
* @see {@link #anim}
|
||||
*/
|
||||
shift?: number;
|
||||
}
|
||||
}
|
||||
357
types/layui-layer/layui-layer-tests.ts
Normal file
357
types/layui-layer/layui-layer-tests.ts
Normal file
@ -0,0 +1,357 @@
|
||||
declare let index: layer.Index;
|
||||
|
||||
interface Window {
|
||||
readonly layer: layer.Layer;
|
||||
}
|
||||
|
||||
/********************************************************************************/
|
||||
// 如果是页面层
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '传入任意的文本或html' // 这里content是一个普通的String
|
||||
});
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: $('#id') // 这里content是一个DOM
|
||||
});
|
||||
// Ajax获取
|
||||
$.post('url', {}, (str) => {
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: str // 注意，如果str是object，那么需要字符拼接。
|
||||
});
|
||||
});
|
||||
// 如果是iframe层
|
||||
layer.open({
|
||||
type: 2,
|
||||
content: 'http:// sentsin.com' // 这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http:// sentsin.com', 'no']
|
||||
});
|
||||
// 如果是用layer.open执行tips层
|
||||
layer.open({
|
||||
type: 4,
|
||||
content: ['内容', '#id'] // 数组第二项即吸附元素选择器或者DOM
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// 单个使用
|
||||
layer.open({
|
||||
skin: 'demo-class'
|
||||
});
|
||||
// 全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
|
||||
layer.config({
|
||||
skin: 'demo-class'
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.alert('酷毙了', { icon: 1 });
|
||||
// eg2
|
||||
layer.msg('不开心。。', { icon: 5 });
|
||||
// eg3
|
||||
layer.load(1); // 风格1的加载
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.confirm('纳尼？', {
|
||||
btn: ['按钮一', '按钮二', '按钮三'] // 可以无限个按钮
|
||||
, btn3(index, layero) {
|
||||
// 按钮【按钮三】的回调
|
||||
}
|
||||
}, (index, layero) => {
|
||||
// 按钮【按钮一】的回调
|
||||
}, (index) => {
|
||||
// 按钮【按钮二】的回调
|
||||
});
|
||||
|
||||
// eg2
|
||||
layer.open({
|
||||
content: 'test'
|
||||
, btn: ['按钮一', '按钮二', '按钮三']
|
||||
, yes(index, layero) {
|
||||
// 按钮【按钮一】的回调
|
||||
}
|
||||
, btn2(index, layero) {
|
||||
// 按钮【按钮二】的回调
|
||||
|
||||
return false; // 开启该代码可禁止点击该按钮关闭
|
||||
}
|
||||
, btn3(index, layero) {
|
||||
// 按钮【按钮三】的回调
|
||||
|
||||
// return false 开启该代码可禁止点击该按钮关闭
|
||||
}
|
||||
, cancel() {
|
||||
// 右上角关闭回调
|
||||
|
||||
// return false 开启该代码可禁止点击该按钮关闭
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.open({
|
||||
content: '测试回调',
|
||||
success(layero, index) {
|
||||
console.log(layero, index);
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.open({
|
||||
content: '测试回调',
|
||||
yes(index, layero) {
|
||||
// do something
|
||||
layer.close(index); // 如果设定了yes回调，需进行手工关闭
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.config({
|
||||
path: '/res/layer/' // layer.js所在的目录，可以是绝对目录，也可以是相对目录
|
||||
});
|
||||
// 这样的话，layer就会去加载一些它所需要的配件，比如css等。
|
||||
// 当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径
|
||||
|
||||
/********************************************************************************/
|
||||
layer.config({
|
||||
path: '/res/layer/' // layer.js所在的目录，可以是绝对目录，也可以是相对目录
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.config({
|
||||
shift: 1, // 默认动画风格
|
||||
skin: 'layui-layer-molv' // 默认皮肤
|
||||
});
|
||||
// 除此之外，extend还允许你加载css。这对于layer的第三方皮肤有极大的帮助，如：
|
||||
layer.config({
|
||||
extend: [
|
||||
'skin/layer-ext-myskin/style.css' // layer-ext-myskin即是你拓展的皮肤文件
|
||||
]
|
||||
});
|
||||
// 扩展css的规范：您必须在你扩展中的css文件加上这段
|
||||
|
||||
/********************************************************************************/
|
||||
// 页面一打开就执行弹层
|
||||
layer.ready(() => {
|
||||
layer.msg('很高兴一开场就见到你');
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
index = layer.open({
|
||||
content: 'test'
|
||||
});
|
||||
// 拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.alert('只想简单的提示');
|
||||
// eg2
|
||||
layer.alert('加了个图标', { icon: 1 }); // 这时如果你也还想执行yes回调，可以放在第三个参数中。
|
||||
// eg3
|
||||
layer.alert('有了回调', (index) => {
|
||||
// do something
|
||||
|
||||
layer.close(index);
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.confirm('is not?', { icon: 3, title: '提示' }, (index) => {
|
||||
// do something
|
||||
|
||||
layer.close(index);
|
||||
});
|
||||
// eg2
|
||||
layer.confirm('is not?', (index) => {
|
||||
// do something
|
||||
|
||||
layer.close(index);
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.msg('只想弱弱提示');
|
||||
// eg2
|
||||
layer.msg('有表情地提示', { icon: 6 });
|
||||
// eg3
|
||||
layer.msg('关闭后想做些什么', () => {
|
||||
// do something
|
||||
});
|
||||
// eg
|
||||
layer.msg('同上', {
|
||||
icon: 1,
|
||||
time: 2000 // 2秒关闭（如果不配置，默认是3秒）
|
||||
}, () => {
|
||||
// do something
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
index = layer.load();
|
||||
// eg2
|
||||
index = layer.load(1); // 换了种风格
|
||||
// eg3
|
||||
index = layer.load(2, { time: 10 * 1000 }); // 又换了种风格，并且设定最长等待10秒
|
||||
// 关闭
|
||||
layer.close(index);
|
||||
|
||||
/********************************************************************************/
|
||||
// eg1
|
||||
layer.tips('只想提示地精准些', '#id');
|
||||
// eg 2
|
||||
$('#id').on('click', function() {
|
||||
const that = this;
|
||||
layer.tips('只想提示地精准些', that); // 在元素的事件回调体中，follow直接赋予this即可
|
||||
});
|
||||
// eg 3
|
||||
layer.tips('在上面', '#id', {
|
||||
tips: 1
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// 当你想关闭当前页的某个层时
|
||||
index = layer.open();
|
||||
index = layer.alert();
|
||||
index = layer.load();
|
||||
index = layer.tips("", "#id");
|
||||
// 正如你看到的，每一种弹层调用方式，都会返回一个index
|
||||
layer.close(index); // 此时你只需要把获得的index，轻轻地赋予layer.close即可
|
||||
// 当你在iframe页面关闭自身时
|
||||
index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
|
||||
parent.layer.close(index); // 再执行关闭
|
||||
|
||||
/********************************************************************************/
|
||||
layer.closeAll(); // 疯狂模式，关闭所有层
|
||||
layer.closeAll('dialog'); // 关闭信息框
|
||||
layer.closeAll('page'); // 关闭所有页面层
|
||||
layer.closeAll('iframe'); // 关闭所有的iframe层
|
||||
layer.closeAll('loading'); // 关闭加载层
|
||||
layer.closeAll('tips'); // 关闭所有的tips层
|
||||
|
||||
/********************************************************************************/
|
||||
// 重新给指定层设定width、top等
|
||||
layer.style(index, {
|
||||
width: '1000px',
|
||||
top: '10px'
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.open({
|
||||
type: 2,
|
||||
content: 'test/iframe.html',
|
||||
success(layero, index) {
|
||||
const body = layer.getChildFrame('body', index);
|
||||
// const iframeWin = window[layero.find('iframe')[0]['name']]; // 得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
|
||||
console.log(body.html()); // 得到iframe页的body内容
|
||||
body.find('input').val('Hi，我是从父页来的');
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// 假设这是iframe页
|
||||
index = parent.layer.getFrameIndex(window.name); // 先得到当前iframe层的索引
|
||||
parent.layer.close(index); // 再执行关闭
|
||||
|
||||
/********************************************************************************/
|
||||
layer.iframeSrc(index, 'http:// sentsin.com');
|
||||
|
||||
/********************************************************************************/
|
||||
// 通过这种方式弹出的层，每当它被选择，就会置顶。
|
||||
layer.open({
|
||||
type: 2,
|
||||
shade: false,
|
||||
area: '500px',
|
||||
maxmin: true,
|
||||
content: 'http:// www.layui.com',
|
||||
zIndex: layer.zIndex, // 重点1
|
||||
success(layero) {
|
||||
layer.setTop(layero); // 重点2
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.config({
|
||||
extend: 'extend/layer.ext.js'
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
// prompt层新定制的成员如下
|
||||
let opt = {
|
||||
formType: 1, // 输入框类型，支持0（文本）默认1（密码）2（多行文本）
|
||||
value: '', // 初始时的值，默认空字符
|
||||
maxlength: 140, // 可输入文本的最大长度，默认500
|
||||
};
|
||||
// 例子1
|
||||
layer.prompt((value, index, elem) => {
|
||||
alert(value); // 得到value
|
||||
layer.close(index);
|
||||
});
|
||||
// 例子2
|
||||
layer.prompt({
|
||||
formType: 2,
|
||||
value: '初始值',
|
||||
title: '请输入值'
|
||||
}, (value, index, elem) => {
|
||||
alert(value); // 得到value
|
||||
layer.close(index);
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'TAB1',
|
||||
content: '内容1'
|
||||
}, {
|
||||
title: 'TAB2',
|
||||
content: '内容2'
|
||||
}, {
|
||||
title: 'TAB3',
|
||||
content: '内容3'
|
||||
}]
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
$.getJSON('/jquery/layer/test/photos.json', (json) => {
|
||||
layer.photos({
|
||||
photos: json
|
||||
, shift: 5 // 0-6的选择，指定弹出图片动画类型，默认随机
|
||||
});
|
||||
});
|
||||
let photos: layer.PhotosData = {
|
||||
title: "", // 相册标题
|
||||
id: 123, // 相册id
|
||||
start: 0, // 初始显示的图片序号，默认0
|
||||
data: [ // 相册包含的图片，数组格式
|
||||
{
|
||||
alt: "图片名",
|
||||
pid: 666, // 图片id
|
||||
src: "", // 原图地址
|
||||
thumb: "" // 缩略图地址
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
/********************************************************************************/
|
||||
// HTML示例
|
||||
`<div id="layer-photos-demo" class="layer-photos-demo">
|
||||
<img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
|
||||
<img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
|
||||
</div>`;
|
||||
|
||||
`<script>`;
|
||||
// 调用示例
|
||||
layer.photos({
|
||||
photos: '#layer-photos-demo'
|
||||
, anim: 5 // 0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
|
||||
});
|
||||
`</script>`;
|
||||
|
||||
/********************************************************************************/
|
||||
layer.photos({
|
||||
photos: "json/选择器",
|
||||
tab(pic, layero) {
|
||||
console.log(pic); // 当前图片的一些信息
|
||||
}
|
||||
});
|
||||
|
||||
/********************************************************************************/
|
||||
24
types/layui-layer/tsconfig.json
Normal file
24
types/layui-layer/tsconfig.json
Normal file
@ -0,0 +1,24 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6",
|
||||
"dom"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictNullChecks": true,
|
||||
"baseUrl": "../",
|
||||
"typeRoots": [
|
||||
"../"
|
||||
],
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"layui-layer-tests.ts"
|
||||
]
|
||||
}
|
||||
1
types/layui-layer/tslint.json
Normal file
1
types/layui-layer/tslint.json
Normal file
@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Loading…
Reference in New Issue
Block a user