下载jBox及jQuery
在页面中引入资源
<script src="lib/jBox.min.js"></script>
<script src="lib/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="lib/jBox.min.css">
开始
jBox提供3中基本组件Tooltip、Mouse、Modal以及三种附加组件Confirm、Notice、Image。使用附加组件时需要先引入对应资源文件。
创建jBox对象
先来一个最简单的例子,在页面上创建元素
<span class="tooltip" title="提示1">tips1</span>
<span class="tooltip" title="提示2">tips2</span>
在js中创建jBox对象
$(document).ready(function(){
new jBox('Tooltip',{
attach:'.tooltip'
});
});
查看页面结果
一个tooltip样式就这样完成。
将jBox对象动作绑定到页面元素
将jBox对象动作与页面元素进行绑定有两种方式:
- 在创建jBox对象时直接绑定;
在创建jBox对象时,利用参数中的attach属性指定页面元素,格式与jQuery选择器格式一致。
<span id="bangding1">attach绑定的Tooltip</span>
<span name="bangding2">attach绑定的Modal</span>
new jBox('Tooltip',{
attach:'#bangding1',
content:'Tooltip的默认触发方式是mouseenter'
});
new jBox('Modal',{
attach:'span[name="bangding2"]',
title:'Modal',
content:'Modal的默认触发方式是click'
});
用这种方法绑定jBox时可以使用trigger属性指定触发方式,可选参数为click和mouseenter
- 创建jBox对象后通过绑定页面元素动作调用jBox对象方法,这种方式无法用于Tooltip类型。
<button onclick="jBoxObj.open()">打开</button>
<button onclick="jBoxObj.toggle()">来回点</button>
var html='<button onclick="jBoxObj.close()" name="close">关闭</button>';
jBoxObj=new jBox('Modal',{
title:'Modal',
content:$(html)
}
);
在默认情况下,jBox会加载蒙版,点击蒙版也会直接关闭弹出窗。
通过配置参数,可以实现延迟开闭功能。
jBoxObj=new jBox('Modal',{
title:'Modal',
content:$(html),
delayOpen:500,
delayClose:1000
}
);
参数单位为毫秒,延迟关闭设置对点击蒙版不起作用。
当批量绑定延迟效果后,某一个元素不需要延迟时可以在调用open()和close()方法时传入参数,例如:
jBoxObj.open({ignoreDelay:true});
jBoxObj.close({ignoreDelay:true});
内容填充
从上面的示例中我们可以看到,内容的填充可以使用参数中的title和content选项,并且可以将jQuery对象作为值。
另外对于简单内容,批量绑定时我们也可以用下面这种方法来实现不同内容提示。
<span class="tooltip-c" data-jbox-title1="Title 1" data-jbox-content="Content 1">移上来</span>
<span class="tooltip-c" data-jbox-title1="Title 2" data-jbox-content="Content 2">移上来</span>
new jBox('Tooltip',{
attach:'.tooltip-c',
getTitle:'data-jbox-title1',
getContent:'data-jbox-content'
});
第三种方式是通过调用jBox对象的setTitle()和setContent()方法来配置内容。这里要注意,当设定了弹出窗大小时,调用方法修改标题和内容时会重新计算合适的窗口大小,如果不想改变需要增加第二个参数,并设为true。
jBoxObj.setContent('被更改的内容',true);
第四种方式是配置AJAX请求获取内容,不举例讲解。
窗口定位
对于Tooltip的弹出窗,jBox提供定位的功能。
<div>
<span class="tooltip-p" style="float: left;">点击我</span>
<span name="tooltip-p" style="float: right;">这里哦</span>
</div>
new jBox('Tooltip',{
attach:'.tooltip-p',
target:'span[name=tooltip-p]',
trigger:'click',
content:'666',
position:{
x:'left',
y:'button'
},
outside:'x'//x,y,xy
});
通过使用target指定弹出位置,position确定箭头位置,outside确定窗口位置