jBox快速入门

下载jBox及jQuery

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对象动作与页面元素进行绑定有两种方式：

1. 在创建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

2. 创建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确定窗口位置