首页 > 代码库 > 我的第三个jquery插件——promptForK13内容提示插件

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

 

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="http://www.mamicode.com/script/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/script/promptForK13.min.js"></script>

    调用方法:

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

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

    如果自定义参数,如下:

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

   html: 

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

 

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

 

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