您的位置:首页 > Web前端 > JQuery

我的第三个jquery插件——promptForK13内容提示插件

2014-12-03 13:36 351 查看
jQuery提示插件,默认css样式使用了css3属性,所以最好在火狐或谷歌等标准浏览器下浏览。可自定义提示框结构及样式。 下载

可设参数:

"addID": "", //追加ID,方便自定义控制
"addClass": "", //追加class,方便自定义控制
"dom": "", //自定义dom结构
//最外面的元素必须以.prompt_k13包裹
//内部必须有.content_k13空元素存放文字
//.close_btn_k13关闭按钮可根据需要添加
//无论几层嵌套都可,不可换行,例如:

//<div class="prompt_k13"><span
class="close_btn_k13">关闭</span><div
class="content_k13"></div></div>
"closeBtn": true, //是否显示关闭按钮
"autoClose": true, //是否自动关闭
"autoCloseTime": 5000, //自动关闭延时,单位毫秒
"animate": true, //是否显示动画效果
"animateTime": 300, //动画时长,单位毫秒
"animateLength": 30, //动画移动距离,单位px
"gap": 8, //与父元素间隙,单位px
"close": false, //控制关闭
"text": "这里是提示内容", //提示内容
"position": "right" //提示位置.top上边,left左边,right右边,bottom下边,默认右边

功能:

1.可设置上下左右四个方向弹出

2.可手动或自动关闭

3.可设置有无动画效果以及动画时长

4.可自定义弹出dom结构,所有外观均可用css改变

下载地址

示例:

页面引入:

<script type="text/javascript" src="script/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="script/promptForK13.min.js"></script>

调用方法:

如果使用默认设置,如下:

$("#demo").promptForK13();

如果自定义参数,如下:

$(this).promptForK13({
"addClass": "prompt_top",
"text":"点击X才能关闭",
"position": "top",
"autoClose": false
});

html:

<div id="demo"></div>

自己写了几个示例放在 打包文件 中,效果如下图:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐