首页 > 其他分享 >jQuery点击弹出侧边栏提示信息面板特效

jQuery点击弹出侧边栏提示信息面板特效

时间:2024-12-10 12:21:10浏览次数:9  
标签:jQuery 插件 侧边 js 点击 提示信息 面板 css

这是一款用于信息提示的jQuery点击弹出侧边栏提示面板特效插件。当用户点击某个按钮、超链接或进行某些操作后,该插件可以在屏幕的上、下、左、右四个方向弹出一个信息提示面板,来告诉用户操作的结果。

在线DEMO   下载

 

使用方法

要使用这个信息替代插件,首先要在页面的头部引入notifyme.css文件

<link rel="assets/css/notifyme.css" type="text/css" />

然后需要在页面的头部引入 jQuery 和 notifyMe.js 文件。

<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="assets/js/notifyme.js"></script>

调用插件的方法非常简单,以点击一个按钮为例,js代码如下:

$('.error').on('click', function(){     $(this).notifyMe(         'bottom', // 位置         'error', // 类型         'Lorem Ipsum Text', // 标题         'Lorem Ipsum is simply dummy text of the printing', // 描述         200 // Velocity of notification   2000 // (optional) Time of delay to close automatically     ); });

标签:jQuery,插件,侧边,js,点击,提示信息,面板,css
From: https://www.cnblogs.com/mybook000/p/18597142

相关文章

  • jQuery绚丽全屏飘雪花特效插件
    这是一款使用jQuery制作的绚丽全屏飘雪花特效插件。使用该下雪效果插件可以为你的网站添加非常酷的飘雪效果。 在线预览 下载 对于使用Firefox3.5+、Safari或Chrome浏览器的用户,可以看到下雪场景中的雪花有深度层次感和旋转效果。该jQuery飘雪插件只占用极小的CP......
  • JQuery与iframe交互
    1.父页面调用子页面元素$("#iframe的ID").contents().find("#iframe子页面的id").click();2.父页面调用子页面方法$("#iframe的ID").[0].contentWindow.子页面中的方法();3.子页面获取父页面元素$("#父页面元素ID",parent.document);4.子页面操作父页面方法window.......
  • 基于SVG的jQuery星级评分插件-jRate
    jRate是一款基于SVG的 Jquery星级评分插件。jRate能够通过参数设置来提供各种实用的评分功能。在线演示 下载 基本使用在页面中引入jQuery和jRate.js文件。<scripttype="text/javascript"src="js/jquery.min.js"></script><scripttype="text/javascript"......
  • jQuery和css3全屏弹出式导航菜单特效插件
    这是一款效果非常酷的jQuery和css3全屏弹出式导航菜单特效插件。 在线预览 下载HTML结构html结构使用一个<header>作为wrapper。里面放logo、登录/注册按钮和用于触发全屏导航菜单的触发按钮。全屏导航菜单放置在header外面,为它使用easier的CSStransformation效果。<......
  • jQuery select下拉菜单美化插件ddlist
    在线演示 下载service.ddlist.jquery是一款小巧的jquery下拉列表插件,它允许我们在下拉列表中插入图片、文本和其它一些额外的东西。该下拉列表插件通过<select>元素开发,使用jQuery将其隐藏,并生成新的html结构。HTML结构要使用该插件,首先要在html的header中引入以下文件:......
  • jQuery和css3超赞select下拉列表框美化插件
    这是一款效果超赞的jQuery和css3select下拉列表框美化插件。这个select下拉列表框插件没有使用任何的图片,纯css制作,还使用了一点jQuery来完成动作交互。在线演示 下载 有两个地方需要做下说明:下面的代码中没有使用任何厂商的前缀。在插件中使用了CSS盒子模式(box-model):......
  • 基于Bootstrap的jQuery用户向导插件
    这是一款非常实用的基于TwitterBootstrap的jquery用户向导插件。该Bootstrap用户向导插件允许你使用按钮来在各个不同的操作步骤之间来回切换,还可以单独对某个步骤进行特殊的事件处理。在线演示 下载 插件依赖RequiresjQueryv1.3.2orlaterBootstrap3.x 示例代......
  • jQuery和CSS3打造GOOGLE样式的用户登录界面
    这是一款使用Jquery和css3打造的GOOGLE样式的用户登录界面特效。该登录界面特效中,右上角的小问号和错误提示小图标使用SVG来制作,用户名和密码输入框采用浮动标签特效,可点击的按钮上使用了很酷的点击波特效。整个登录界面简洁大方,互动性很强。在线演示 下载 该用户登录界面......
  • jQuery炫酷插入和移动元素动画特效插件
    MagicMove是一款效果非常棒的JQUERY炫酷插入和移动元素动画特效插件。元素的动画和过渡效果在如今的页面设计中对用户的体验至关重要。这款插件可以以非常平滑的方式在指定元素之前插入其它元素,并且当最右边的元素超出容器时会自动下移插入到下一行的第一个位置,整体效果非常不错......
  • jQuery简单带记事功能的日历插件
    e-calendar是一款jquery简单带记事功能的日历插件。通过该jQuery日历插件你可以记录或设置某天某个时刻发生的事情,具有工作备忘录的功能。通过简单的参数设置你就可以定制该日历插件的外观。 在线演示 下载  使用方法要使用该jQuery日历插件首先引入jQuery和jquery.e-......