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)

转载于:https://www.cnblogs.com/TammyBlog/p/9378786.html