我的第三个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="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>

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

时间: 2024-10-28 10:45:01

我的第三个jquery插件——promptForK13内容提示插件的相关文章

Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你.Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色:? 16个独特的过渡效果? 简洁和有效的标记? 加载参数设置?

【转】10 个很有用的 jQuery 弹出层提示插件

模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog Replacement Open Source TinyBox2 JavaScript Modal Windows Apprise: Attractive Alert and Dialog Box for jQuery noty Reveal: jQuery Modals Made Easy A

Eclipse安装插件支持jQuery,Js智能提示

最近工作中用到jQuery插件,需要安装eclipse插件才能支持jQuery智能提示,在网上搜索了一下,常用的有三个插件支持jQuery的智能提示:1.jQueryWTP2.Spket3.Aptana 在安装插件之前需要先安装eclipse,如果已经安装了eclipse,可以直接看下面的插件安装方法,本人使用的Fedora 12,操作如下:1.直接打开”应用程序”-->”系统工具”-->”终端”2.输入命令”su”,这个命令是临时切换到root用户3.输入root用户的密码4.输入命令”yu

Jquery 提示插件

jQuery信息提示工具 官方地址:http://www.sharejs.com/code/jquery/plugin/poshytip-1.0/demo/index.html Demo中提供了三种使用的例子,页面代码如下:  <p>1.<a id="tip1" title="嗨..这里有个工具提示条!" href="#">鼠标滑上这里看看</a></p> <br/> <p>

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用

一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可以连环调用: 否, 这个方法返回的是一个字符串. 例子: var queryString = $('#myFormId').formSerialize(); // the data could now be submitted using $.get, $.post, $.ajax, etc $.post(

jQuery提示插件alertify使用指南!

jQuery提示插件alertify使用指南 alertifyjs是一个非侵入式,可定制的JavaScript通知组件.包括可定制的对话框,和右下角消息弹出框.完全可定制的警报,确认和提示对话框.完全自定义的通知系统.回调参数处理包括"确定"和"取消"按钮的点击.允许对话框排队 1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两

从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件

原文:从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零

自制jQuery焦点图切换简易插件

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s