插件使用方法

引入文件

<link type="text/css" href="ThinkBox/css/ThinkBox.css" rel="stylesheet" />
<script type="text/javascript" src="ThinkBox/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="ThinkBox/jquery.ThinkBox.min.js"></script>

- 使用ThinkBox弹出框必须引入以上三个文件。

- jQuery版本必须大于 1.7

调用弹出框方法 弹出层调用方法 (Method)

<script type="text/javascript">
$(function(){
    $.ThinkBox([options]); //调用弹出层基础方法；
    $.ThinkBox.load(url, [options]); //调用弹出层扩展方法
    $('a').ThinkBox([options]); //调用弹出层 $.fn 扩展方法；
});
</script>

插件基础方法 $.ThinkBox() 的使用示例

Example-1: 用弹出层展示指定内容    使用选择器弹出页面指定元素

$('#example-1').click(function(){
    $.ThinkBox(
        '<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>按ESC键可以将我关闭！</div>', 
        {'title' : 'Example-1'}
    );	
});
$('#example-1-1').click(function(){
    $.ThinkBox(
        '#example-1-2', 
        {'title' : 'Example-1'}
    );	
});

Example-2: 用弹出层展示指定内容，禁止弹出多个

$('#example-2').click(function(){
    $.ThinkBox(
    	'<div style="width: 300px;padding:10px">我是用弹出层显示的，我不允许同时被弹出多个，<br/>按ESC键可以将我关闭！</div>',
        {'title' : 'Example-2', 'dataEle':this}
    );	
});

- 设置弹出层对象缓存对象属性 dataEle 后，只允许弹出一个相同缓存对象的弹出层

- dataEle 属性必须是一个jQuery选择器或DOM对象

Example-3: 用弹出层展示指定内容，带有遮罩背景且不能拖动

$('#example-3').click(function(){
    $.ThinkBox(
    	'<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>我不允许同时被弹出多个且不能被拖动！</div>',
        {'title' : 'Example-3', 'dataEle':this, 'modal' : true, 'drag':false, 'escHide':false}
    );
});

Example-4: 创建但不显示    点击显示

var example_4_box = null;
$('#example-4').click(function(){
    example_4_box = $.ThinkBox(
        '<div style="width: 300px; height: 100px; padding:10px">哈哈！我终于可以显示啦。。。</div>',
        {'title' : 'Example-4', 'dataEle': this, 'display' : false}
    );
});
$('#example-4-1').click(function(){
    example_4_box && example_4_box.show()
});

Example-5: 弹出指定类容，2秒后自动关闭

$('#example-5').click(function(){
    $.ThinkBox(
        '<div style="width: 300px;padding:10px">我是用弹出层显示的，<br/>2秒后我会自动关闭！</div>',
        {'title' : 'Example-5', 'dataEle' : this, 'delayClose' : 2000}
    );
});

插件扩展方法的使用示例

Example-6: 加载外部的html文件并用弹出层展示

$('#example-6').click(function(){
    $.ThinkBox.load('load.html', {'title' : 'Example-6', 'dataEle' : this});
});

Example-7: 通过iframe加载完成网页显示

$('#example-7').click(function(){
    $.ThinkBox.iframe('iframe.html', {'title' : 'Example-7', 'dataEle' : this, 'width' : 400, 'height' : 200});
});

- 由于在iframe加载完成之前没法获取到它的宽度和高度，这里必须手动指定宽度和高度。

Example-8: 显示提示信息    成功提示    失败提示    加载中

$('#example-8').click(function(){
    $.ThinkBox.tips('我是提示信息...', 0); //第二个参数 type 目前的可选值有 0|error, 1|success, loading
});
$('#example-8-1').click(function(){
    $.ThinkBox.success('我是成功提示信息！');
});
$('#example-8-2').click(function(){
    $.ThinkBox.error('我是失败提示信息！');
});
$('#example-8-3').click(function(){
    var loading = $.ThinkBox.loading('我是loading提示信息！');
    setTimeout(function(){loading.hide()}, 2000); //加载成功后关闭loading信息
});

- loading提示一般会在数据加载完成后关闭，这里用延时来模拟。

Example-9: 消息框    左下角显示，1秒后自动关闭   

$('#example-9').click(function(){
    $.ThinkBox.msg('<div style="padding:10px; width:250px; height:150px">有新消息啦！。。。</div>', {'dataEle' : this});	
});
$('#example-9-1').click(function(){
    $.ThinkBox.msg(
    	'<div style="padding:10px; width:250px; height:150px">有新消息啦！。。。</div>', 
        {'dataEle' : this, 'locate' : ['left', 'bottom'], 'delayClose' : 1000}
    );	
});

Example-10: alert提示框

$('#example-10').click(function(){
    $.ThinkBox.alert('你确定吗？', {'okClick' : function(){alert('已经确定！');this.hide()}});	
});

- 和原生javascript中的alert不同的是，$.ThinkBox.alert()没法阻止程序的执行，所以你必须将确定后的处理过程写入到okClick属性中去。

Example-11: confirm提示框

$('#example-11').click(function(){
    $.ThinkBox.confirm(
        '确定or取消？', 
        {
            'dataEle' : this,
            'okClick' : function(){
                alert('你选择了确定！');
            },
            'cancelClick' : function(){
                alert('你选择了取消！');
            }
        }
    );	
});

- 和原生javascript中的confirm不同的是，$.ThinkBox.confirm()没法阻止程序的执行。

- 所以你必须将确定或取消后的处理过程写入到okClick或cancelClick属性中去。

插件 $.fn.ThinkBox() 方法的使用示例

Example-12: 自动加载 a 标签的 href 连接并用弹出层展现    不显示标题栏和关闭按钮    hover触发

$('#example-12').ThinkBox({'event' : 'click', 'title' : 'Example 12'});
$('#example-12-1').ThinkBox({'event' : 'click', 'title' : null, 'close' : false});
$('#example-12-2').ThinkBox({'event' : 'hover', 'title' : 'Example 12', 'close' : false});
$(document).mousedown(function(){
    $('#example-12,#example-12-1').ThinkBox('hide'); //关闭
});

Example-13: 在屏幕中心弹出指定选择器对象

$('#example-13').ThinkBox({'title' : 'Example-13', 'event':'click', 'center':true});
/* 隐藏的DIV源码 */
<div id="example-13-1" style="display:none; width: 300px; padding: 10px">
    我是一个隐藏的div，一不小心被弹出框给显示了。。。
</div>

插件默认配置项 (options)

title : null (string)

弹出层标题，只有设置了标题才能显示标题栏， null 为不显示标题栏。

- 如果需要显示空的标题栏，请设置为 title : '' 。

fixed : true (boolean)

是否使用固定定位(fixed)而不是绝对定位(absolute)，固定定位的对话框不受浏览器滚动条影响。

- IE6不支持固定定位，其永远表现为绝对定位。

center : true (boolean)

对话框是否屏幕中心显示。

x : 0 (int)

对话框 x 坐标。 当 center 属性为 true 时此属性无效。

- 此参数可以是一个函数，但返回值必须为整型，函数的 this 指针指向弹出框DOM对象。

y : 0 (int)

对话框 y 坐标。 当 center 属性为 true 时此属性无效。

- 此参数可以是一个函数，但返回值必须为整型，函数的 this 指针指向弹出框DOM对象。

locate : ['left', 'top'] (array)

弹出框位置属性，决定以上 x，y 属性相对于屏幕的位置。

- 此参数可选值 ['left', 'top']，['right', 'top']，['left','bottom']，['right','bottom']。

modal : false (boolean)

对话框是否设置为模态。

- 模态时，会显示一个遮罩层，阻止页面的其他元素接受事件。

modalClose : true (boolean)

点击模态背景是否关闭弹出框

resize : true (boolean)

是否在窗口大小改变时重新定位弹出框位置。

unload : false (boolean)

隐藏后是否卸载弹出框元素。

- 及时更新信息建议开启，这样会每次弹出时加载新的内容。

close : true (boolean)

显示关闭按钮。

escHide : true (boolean)

按ESC是否关闭弹出框。

delayClose : 0 (int)

延时自动关闭弹出框 0表示不自动关闭。

drag : true (boolean)

点击标题栏是否允许拖动。

display : true (boolean)

是否在创建后立即显示。

width : '' (int)

弹出框内容区域宽度， ''表示自适应。

height : '' (int)

弹出框内容区域高度， ''表示自适应。

dataEle : '' (object)

弹出框缓存元素，设置此属性的弹出框只允许同时存在一个。

- 该属性只能是一个jQuery选择器或DOM的jQuery对象。

show : ['fadeIn', 'normal'] (array)

弹出层显示效果参数。

- 此参数第一个元素目前只支持 'show', 'fadeIn', 'slideDown'。

- 此参数第二个元素请参考jQuery中对应的效果参数。

hide : ['fadeOut', 'normal'] (array)

弹出层隐藏效果参数。

- 此参数第一个元素目前只支持 'hide', 'fadeOut', 'slideUp'。

- 此参数第二个元素请参考jQuery中对应的效果参数。

style : 'default' (string)

弹出层主题名称。

beforeShow : undefined (function)

弹出层显示前的回调方法。

afterShow : undefined (function)

弹出层显示后的回调方法。

afterHide : undefined (function)

弹出层隐藏后的回调方法。

beforeUnload : undefined (function)

弹出层卸载前的回调方法。

afterDrag : undefined (function)

弹出层拖动停止后的回调方法。

弹出层调用方法 (Method)

$.ThinkBox(content, [options])

这是一个插件底层基础方法，用于创建一个弹出层。以下所有扩展方法都是调用此方法来创建弹出层。

content - 弹出层展示的内容，可以是一个HTML片段或DOM元素或jQuery选择器。

options - 可选。弹出层的配置项，默认值参考插件默认配置项 (options)。

Example-1 Example-2 Example-3 Example-4 Example-5

$.ThinkBox.load(url, [opt])

加载外部内容并通过弹出层展示。

url - 加载外部内容的URL。

opt - 可选。弹出层标准配置项和私有配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-6

$.ThinkBox.iframe(url, [opt])

用iframe加载外部内容并通过弹出层展示。此方法可以用于加载跨域内容。

url - 加载外部内容的URL。

opt - 可选。弹出层标准配置项和私有配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-7

$.ThinkBox.tips(msg, type, [opt])

显示提示信息。

- 别名： $.ThinkBox.success(msg, [opt])，显示成功提示信息。

- 别名： $.ThinkBox.error(msg, [opt])，显示错误提示信息。

- 别名： $.ThinkBox.loading(msg, [opt])，显示loading提示信息。

msg - 提示信息内容。纯文本。

type - 提示信息类型，可选值有 0|error, 1|success, loading

opt - 可选。弹出层标准配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-8

$.ThinkBox.msg(msg, [opt])

显示页面消息框。

msg - 消息内容，和$.ThinkBox()的content参数相同。

opt - 可选。弹出层标准配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-9

$.ThinkBox.alert(msg, [opt])

弹出警告提示框。

msg - 提示内容，纯文本。

opt - 可选。弹出层标准配置项和私有配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-10

$.ThinkBox.confirm(msg, [opt])

弹出确认提示框。

msg - 提示内容，纯文本。

opt - 可选。弹出层标准配置项和私有配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-11

$.ThinkBox.get(selector)

在弹出层里面获取当前弹出层对象。

selector - 弹出层内部任意DOM元素选择器。

$.fn.ThinkBox([opt])

当前选择器对象必须含有 href 属性，href 属性可以是一个URL或一个以 # 号开头的选择器。

- 当 href 属性以 # 号开头是则以弹出层的形式展现对应的ID对象。

- 当 href 属为一个URL则用 load 方式加载内容并用弹出层展示。

opt - 可选。弹出层标准配置项和私有配置项，标准配置项默认值参考插件默认配置项 (options)。

Example-12

$.fn.ThinkBox('get')

获取当前对象上绑定弹出层对象。如果该对象上未绑定弹出层，则返回 null。

$.fn.ThinkBox('show')

显示当前对象上绑定的弹出层。

$.fn.ThinkBox('hide')

关闭当前对象上绑定的弹出层。

$.fn.ThinkBox('toggle')

如果当前对象上绑定的弹出层是显示的则将其关闭，如果当前对象上显示的弹出层是关闭的则将其显示。

API方法调用

.show()

显示关闭的弹出层。此方法可以显示创建了没有显示的弹出层和显示后又被关闭的弹出层。

- 该方法不能显示已经卸载了的弹出层，也就是 unload 属性为 true 的弹出层在关闭后不可以被显示。

Example-4

.hide()

隐藏显示的弹出层。

.toggle()

当前弹出层显示则隐藏它，当前弹出层隐藏则显示。

- 和 show 方法相同。该方法不能显示已经卸载了的弹出层，也就是 unload 属性为 true 的弹出层在关闭后不可以被显示。

.getContent()

获取弹出层的内容对象。

.setContent(content)

content - 新内容，可以是一个 jQuery 选择器或DOM对象或 HTML 片段。

动态改变弹出层的内容。

.getSize()

获取弹出层当前内容区域的尺寸。

.setSize(width, height)

width - 新的宽度。

height - 新的高度。

动态改变弹出层内容区域的大小。

转载请注明： 爱书很多年 » jQuery ThinkBox 弹出层插件 API 详解