JQTbox.js使用说明

JQTbox.js插件是提示语弹框插件，一般作用于提交成功、警告等情况下出现，该插件目前有 4 套不同的样式表，可根据项目情况选择或者自定义样式。

一、使用方法

1. 引用 jQuery.js / JQTbox.js / JQTbox.css

<link href="css/JQTbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/JQTbox.min.js"></script>

2. 引用

  <div class="wrapper">
    <div class="tool btn-error" data-tbox=\'0\'>点击出现 error 弹框</div>
    <div class="tool btn-success" data-tbox=\'1\'>点击出现 success 弹框</div>
    <div class="tool btn-warning" data-tbox=\'2\'>点击出现 warning 弹框</div>
    <div class="tool btn-ask" data-tbox=\'3\'>点击出现 ask 弹框</div>
    <div class="tool btn-normal" data-tbox=\'4\'>表单验证完后出现提示弹框(例子)</div>
  </div>

<script type="text/javascript">
/// 插件初始加载

$(\'.btn-error\').JQTbox({
    state: \'error\',
    isShowHd: true,
    boxTitle: \'提交失败\',
    boxDoc: \'请检查您的信息重新提交。\',
    onConfirmFun: function(){
        alert(\'jisad\')
    }
})
$(\'.btn-success\').JQTbox({
    state: \'success\',
    isShowHd: true,
    boxTitle: \'提交成功\',
    boxDoc: \'您提交的信息已经成功上传，24小时内我们会联系您，感谢您的支持！\',
    onInitFun: function(){
        console.log(\'我是成功模式哦！！\')
    }
})
$(\'.btn-warning\').JQTbox({
    state: \'warning\',
    isShowHd: true,
    boxTitle: \'提交为空\',
    boxDoc: \'您的信息为空。\'
})
$(\'.btn-ask\').JQTbox({
    state: \'ask\',
    isShowHd: true,
    isShowCancel: true,
    boxTitle: \'你确定吗\',
    boxDoc: \'是否确定删除？\'
})
$(\'.btn-normal\').JQTbox({
    state: \'normal\',
    trigger: \'directOpen\',
    isShowHd: true,
    boxDoc: \'我是正常模式\'
})
</script>

插件的引用需要绑定到相对应的按钮上，而按钮的属性 " data-tbox " 必须得填写，该值为数字。

如果提示框选择的是 “ directOpen ” 模式，则在需要显示提示框的时候，输入代码

$(\'.btn-normal\').data(\'JQTbox\')._showBox(state);  // state为需要显示的状态，如 \'success\', \'error\'

3. CSS样式

JQTbox有4套独立的样式表，每个样式表所对应呈现的弹框样式是不一样的，使用时可根据项目情况选择不同样式表或者可自行定义。

二、参数说明

参数	默认值	说明
state	\' normal \'	弹框状态有五种结果： 1.错误(error); 2.成功(success); 3.警告(warning); 4.询问(ask); ** 5.正常(normal), 默认值;
trigger	\' click \'	弹框出现形式，有两种形式 1.点击：\'click\'; ** 2.直接弹出：\'directOpen\',此方式一般用于动态程序判断后
imgUrl	\' images/ \'	// 设置图标引用路径 // 默认为 \'images/\'
closeTime	0	// 设置弹框自动关闭时间 // 默认值为0，即不自动关闭；
isShowHd	false	// 是否显示弹框头部
headTitle	\' 温馨提示 \'	// 头部标题
isShowConfirm	true	// 是否显示确定按钮
btnConfirmTxt	\' 确认 \'	// 确认按钮文本设置，若是不显示按钮，则设置无效
isShowCancel	false	// 是否显示取消按钮
btnCancelTxt	\' 取消 \'	// 取消按钮文本设置，若是不显示按钮，则设置无效
boxTitle	null	// 弹框标题
boxDoc	null	// 弹框内容
onInitFun	null	// 设置加载完成后事件
onConfirmFun	null	// 设置确认事件
onCancelFun	null	// 设置取消事件

三、事件

1. 弹框显示事件：

$(\'.btn-normal\').data(\'JQTbox\')._showBox(state);  // state为需要显示的状态，如 \'success\', \'error\'

2. 参数更新：

$(\'.btn-submit\').data(\'JQTbox\').updateOptFun({
    state: \'success\',
    boxDoc: \'Thank you contacting Century! We will respond to your inquiry as soon as possible.\',
    onConfirmFun: function () {}
});

四、代码文件

github下载：https://github.com/TammyViola/JQTboxJS (最新版本： v1.2)