JavaScript API


bunny ui 提供了一系列基础 API,以更好地辅助组件的使用,主要用于扩展开发或处理事件。

获取元素在数组中的索引

bny.indexOf(elt)

参数:

elt HTMLElement :要查找的元素。

返回:

number|null :元素在数组中的索引,如果元素不存在,则返回 null。

const index = bny.indexOf(htmx.find("#myElement"));

动画播放器

bny.animPlayer(elt, anim, status, fn)

参数:

elt HTMLElement :要播放动画的元素。

anim String :动画名称。

status Boolean :状态,默认 true 开始播放,false 结束播放。

fn Function :动画结束回调函数,默认空函数。

返回:

void :无返回值。

bny.animPlayer(htmx.find("#myElement"), "fade", false, ()=>{
    console.log("动画结束");
});

转义HTML特殊字符

bny.escapeChars(str)

参数:

str String :要转义的字符串。

``

返回:

String :转义后的字符串。

const escapedStr = bny.escapeChars("
Hello & World!
"); console.log(escapedStr); // 输出:<div>Hello & World!</div>

检查元素是否有指定的htmx扩展名

bny.hasExtName(elt, ext)

参数:

elt HTMLElement :要检查的元素。

ext String :扩展名。

返回:

Boolean :是否有扩展名。

const hasExt = bny.hasExtName(htmx.find("#myElement"), "my-ext");
console.log(hasExt); // 输出:true

解析属性字符串

bny.parseAttrs(str)

参数:

obj Object :要解析的属性对象。

返回:

String :属性字符串。

const attrs = bny.parseAttrs({ foo: 'bar', baz: 'qux' });
console.log(attrs); // 输出:"data-foo='bar' data-baz='qux'"

移除元素的类名

bny.removeClassName(elt, className)

参数:

elt HTMLElement|Array|HTMLElement :元素或元素数组或者元素对象。

cls String :要移除的类名。

返回:

void :无返回值。

    bny.removeClassName(htmx.find("#myElement"), "my-class");

检查元素是否有指定的类名

bny.hasClassName(elt, cls)

参数:

elt HTMLElement :元素对象。

cls String :要检查的类名。

返回:

Boolean :是否有类名。

const hasClass = bny.hasClassName(htmx.find("#myElement"), "my-class");
console.log(hasClass); // 输出:true

显示警示弹窗

bny.alert(msg,code,anim,time)

参数:

msg String :弹窗消息。

code Number :状态码 默认0, 1:绿色, 2:黄色, 3:红色, 4:蓝色

anim String :动画 默认scale, 可选值:scale, left, right, up, down

time Number :时间 默认3秒

返回:

void :无返回值。

bny.alert("这是一个警示弹窗",1,"up",2);

显示确认弹窗

bny.confirm(msg,options)

参数:

msg String :弹窗消息。

options Object :选项对象,默认空对象。

options.title String :弹窗标题 默认:提示

options.anim String :动画 默认scale, 可选值:scale, left, right, up, down

options.yes_cb Function :确认回调函数,默认空函数。

options.no_cb Function :取消回调函数,默认空函数。

返回:

void :无返回值。

bny.confirm("确定删除吗?",{
    fn:()=>{
        console.log("用户点击了确认");
    },
    no_cb:()=>{
        console.log("用户点击了取消");
    }
});

显示页面弹窗

bny.page(msg,options)

参数:

msg String :弹窗消息。可以是HTML字符串。

options Object :选项对象,默认空对象。

options.title String :弹窗标题 默认:页面

options.anim String :动画 默认scale, 可选值:scale, left, right, up, down

options.width String :弹窗宽度 默认680px

options.height String :弹窗高度 默认520px

options.offset String|Array :弹窗偏移量 默认 auto ,'top' 、'bottom' 、'left' 、'right'或者数组["10px","10px"]

options.shade Boolean :弹窗阴影 默认false,点击阴影关闭弹窗

返回:

HTMLElement :弹窗元素对象。

const page = bny.page("这是一个页面弹窗",{
    title:"提示",
    anim:"up",
    width:"680px",
    height:"520px",
    offset:"auto",
    shade:false
});

加载页面弹窗

bny.load(style,options)

参数:

style String :弹窗样式 默认0:旋转 1:线性 2:球型

options Object :选项对象,默认空对象。

options.color String :加载的颜色 默认'','green','yellow','red','blue'

options.size Number :加载的大小 默认'','small','large'

返回:

HTMLElement :弹窗元素对象。

const load = bny.load();
setTimeout(() => {
    load.remove()
}, 3000) // 3秒后移除加载弹窗