zoukankan      html  css  js  c++  java
  • jQuery插件之-Poshy Tip

    jQuery插件Poshy Tip是一个强大的jQuery Tooltips插件,它有多种不同的外观。同时可以作为 Form Tooltips使用,并且可以自定义气泡出现的位置。在处理表单验证提示上能带来更好的浏览体验,已经减少自己编写的代码量。
    先来个截图:

    Poshy Tip

    Poshy Tip

    插件拥有的参数:

    // default settings
    	$.fn.poshytip.defaults = {
    		content: 		'[title]',	// content to display ('[title]', 'string', element, function(updateCallback){...}, jQuery)
    		className:		'tip-yellow',	// class for the tips
    		bgImageFrameSize:	10,		// size in pixels for the background-image (if set in CSS) frame around the inner content of the tip
    		showTimeout:		500,		// timeout before showing the tip (in milliseconds 1000 == 1 second)
    		hideTimeout:		100,		// timeout before hiding the tip
    		showOn:			'hover',	// handler for showing the tip ('hover', 'focus', 'none') - use 'none' to trigger it manually
    		alignTo:		'cursor',	// align/position the tip relative to ('cursor', 'target')
    		alignX:			'right',	// horizontal alignment for the tip relative to the mouse cursor or the target element
    							// ('right', 'center', 'left', 'inner-left', 'inner-right') - 'inner-*' matter if alignTo:'target'
    		alignY:			'top',		// vertical alignment for the tip relative to the mouse cursor or the target element
    							// ('bottom', 'center', 'top', 'inner-bottom', 'inner-top') - 'inner-*' matter if alignTo:'target'
    		offsetX:		-22,		// offset X pixels from the default position - doesn't matter if alignX:'center'
    		offsetY:		18,		// offset Y pixels from the default position - doesn't matter if alignY:'center'
    		allowTipHover:		true,		// allow hovering the tip without hiding it onmouseout of the target - matters only if showOn:'hover'
    		followCursor:		false,		// if the tip should follow the cursor - matters only if showOn:'hover' and alignTo:'cursor'
    		fade: 			true,		// use fade animation
    		slide: 			true,		// use slide animation
    		slideOffset: 		8,		// slide animation offset
    		showAniDuration: 	300,		// show animation duration - set to 0 if you don't want show animation
    		hideAniDuration: 	300		// hide animation duration - set to 0 if you don't want hide animation
    	};
    

      注意事项:
    jQuery版本要求1.4+
    插件兼容 IE6+, FF 2+, Opera 9+, Safari 3+, Chrome
    tooltip 的DIV容器支持在IE6中使用min/max-width(只限于px像素值),可以不用特意为IE6做hack
    当使用图片来作为容器背景的时候,脚本将自动忽略background-color/padding/border属性的设置,并围绕背景图片创建tooltip 容器
    PNG背景图片在IE6中不被支持(只有GIF支持),如果将一个PNG图片设为背景图片,在IE6中将自动用background-color/padding/border属性来替换掉图片背景

  • 相关阅读:
    Java正式day_06——数组排序
    别只知道策略模式+简单工厂,试试更香的策略模式+抽象工厂!
    图解连接阿里云(一)创建阿里云物联网平台产品和设备,使用MQTT.fx快速体验
    嵌入式交叉编译GDB,结合vscode图形化调试C和C++代码 coredump定位段错误
    内核链表之list_for_eacy_entry手绘图解
    makefile实验三 理解make工作的基本原则
    玩转Libmodbus(一) 搭建开发环境
    RT-Thread的C语言多态风格展示
    C++函数默认参数 详解
    杂类-边学边记
  • 原文地址:https://www.cnblogs.com/MyFlora/p/3305904.html
Copyright © 2011-2022 走看看