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秒后移除加载弹窗