简单实用jQuery poshytip

jQuery Poshytip是一块提示性的插件,可以用来提示用户操作,提高用户体验

  1. 首先去poshytip官网下载插件 http://vadikom.com/demos/poshytip/
  2. 必须引入的是jQuery的js文件和poshytip的js文件和css文件
  3. <link type="text/css" rel="stylesheet" href="js/poshytip-1.2/src/tip-yellow/tip-yellow.css" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/poshytip-1.2/src/jquery.poshytip.min.js"></script
  4. <script type="text/javascript">
    $(document).ready(function(){
    	$("#tip1").poshytip({
    		alignX: ‘left‘, 
    		content:‘<input type="text" name="a" value="a标签的提示" />‘
    	});
    	$("#username").poshytip({
    		className: ‘tip-yellow‘,
    		content:‘提示内容‘,
    		showOn: ‘focus‘, 
    		alignTo: ‘target‘, 
    		alignX: ‘right‘, 
    		alignY: ‘center‘, 
    		offsetX: 10,
    		showTimeout:1
    	});
    });
    </script>
  5. <a id="tip1" title="这是个工具" href="#">移去看看</a>
    <input type="text" name="username" id="username" />
  6. 这样子的话基本就可以完成啦,下面提供参数和方法表
  7. content 提示工具条中的内容,默认是从元素的title属性中获取。
    className 提示工具条的样式
    showTimeout 提示工具条出现前的过渡时间
    hideTimeout 提示工具条消失的过渡时间
    showOn 提示工具条触发方式,有‘hover‘, ‘focus‘, ‘none‘三种方式
    alignX 提示工具条出现在水平方向相对当前元素的位置,有‘right‘, ‘center‘, ‘left‘, ‘inner-left‘, ‘inner-right‘
    alignY 提示工具条出现在垂直方向相对当前元素的位置,有‘bottom‘, ‘center‘, ‘top‘, ‘inner-bottom‘, ‘inner-top‘
    offsetX 相对X方向位移,数字
    offsetY 相对Y方向位移,数字
    hideTimeout 工具条消失的过渡时间
    hideTimeout 工具条消失的过渡时间
    hideTimeout 工具条消失的过渡时间
    offsetY 相对Y方向位移,数字
    allowTipHover 允许鼠标滑向工具条上方
    fade 是否使用渐隐渐显动画,true/false
    slide 是否使用滑动动画,true/false
    方法:show .poshytip(‘show‘),手动触发显示提示工具条
    方法:hide .poshytip(‘hide‘),手动触发隐藏提示工具条
    方法:disable .poshytip(‘disable‘),手动触发禁用提示工具条
    方法:enable .poshytip(‘enable‘),手动触发启用提示工具条
时间: 2024-12-23 09:02:51

简单实用jQuery poshytip的相关文章

基于Jquery 简单实用的弹出提示框

引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

简单实用的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件.该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用. 在线预览   源码下载 使用方法 使用该鼠标滑过插件需要引入jQuery和ns.hover.min.js文件. 1 2 <script src="js/jquery.min.js"></script> <script src="js/ns.hover.m

jQuery的几种简单实用效果

许久未分享博客,或许已生疏. 闲来无事, 分享几个jQuery简单实用的效果案例 不喜勿喷... 1.页面常用的返回顶部 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{ margin: 0; p

jquery,tree无限级树形菜单+简单实用案例

jquery,tree无限级树形菜单+简单实用案例 我在项目中用到产品类别的树形.各种地方都要用. 我就封装起来,方便以后调用. 记录下来,希望给新手们提供帮助.要记得导入jquery.js  tree.js 哦 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib prefix="c" uri=&quo

jQuery简单实用的轻量级进度条插件

jQMeter是一款简单实用的轻量级进度条jQuery插件,它可以显示为水平或垂直进度条,进度条加载时带有动画特效,你只需要简单的传入一些参数到jQMeter对象的构造函数中就可以完成你想要的进度条效果. 该进度条插件的构造函数中允许你定义进度条的宽度.高度.背景色.进度条颜色等等参数,通过这些参数你可以构造自己的进度条样式. 效果演示:http://www.htmleaf.com/Demo/201504131672.html 下载地址:http://www.htmleaf.com/jQuery

jQuery简单实用的图片标题动画效果插件

CaptionerJs是一款简单实用的jQuery图片标题动画效果插件.网上有许多图片标题插件,但是CaptionerJs可以为你创建干净整洁并且带有语义的图片标题HTML代码. CaptionerJs不使用div作为图片层,而是使用figure和figcaption元素来转换图片,使图片和图片标题有明确的语义. 你可以在书写图片代码的时候使用标准的HTML图片代码,CaptionerJs会使用title和alt属性来制作图片的标题. 效果演示:http://www.htmleaf.com/De

jQuery轻量级简单实用的图片放大镜特效

zoomtoo是一款轻量级的简单实用的jQuery图片放大镜特效插件.这个图片放大镜特效在鼠标滑过图片的时候,在原来图片区域内部将图片放大.鼠标进入和离开图片区域时都带有淡入淡出的效果. 浏览器兼容: Firefox 2+ (Win, Mac, Linux) IE7+ (Win) Chrome 6+ (Win, Mac, Linux, Android, iPhone) Safari 3.2+ (Win, Mac, iPhone) Opera 8+ (Win, Mac, Linux, Androi

JavaScript 日期格式化 简单实用

JavaScript 日期格式化 简单实用 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.

Swiper的简单实用方法

最近项目中有用到一个非常强大的组件idangerous.swiper.js的组件,这个组件能够实现幻灯片的播放效果,而且有各种3D效果,大家可以去试一下,效果很不错的说! 这是这个项目的api文档:http://www.idangero.us/sliders/swiper/api.php GitHub上的地址:https://github.com/nolimits4web/Swiper 具体使用方法(copy的Swiper官网的代码): 首先在页面中引入css和js文件: <link rel=&qu