qTip Style

@author YHC

Style

这个style对象允许你分配自定义样式给主要的qTip元素,和ThemeRoller tip选项,当使用tips plugin的时候:

classes:""

概述:

添加样式的时候使用空格隔开字符串来包含多个样式名称,应该添加给主要的qTip元素的样式名称;

以下有几个基础样式,包含在css文件中的提供的,主要包含:

/* CSS2 styles */
ui-tooltip{ } /* This one is applied by default (formally the "cream" style) */
ui-tooltip-plain{ }
ui-tooltip-light{ }
ui-tooltip-dark{ }
ui-tooltip-red{ }
ui-tooltip-green{ }
ui-tooltip-blue{ }
 
/* CSS3+ styles */
ui-tooltip-shadow{ } /* Adds a shadows to your tooltips */
ui-tooltip-rounded{ } /* Adds a rounded corner to your tooltips */
ui-tooltip-bootstrap{ } /* Bootstrap style */
ui-tooltip-tipsy{ } /* Tipsy style */
ui-tooltip-youtube{ } /* Youtube style */
ui-tooltip-jtools{ } /* jTools tooltip style */
ui-tooltip-cluetip{ } /* ClueTip style */
ui-tooltip-tipped{ } /* Tipped style */

示例:

创建一个qTip,包含一个绿色的主题和一个阴影的效果:

$('.selector').qtip({
	content: {
		text: 'I\'m blue... deal with it!'
	},
	style: {
		classes: 'ui-tooltip-blue ui-tooltip-shadow'
	}
});

def:true

 概述:

这个属性允许你防止.ui-tooltip-default被应用到主要的qTip元素:

注意:如果这样做了之后将导致qTip没有视觉风格,如果你没有应用任何的自定义样式的情况之下;

widget:false;

概述:

决定是否ui-widget样式的ThemeRoller UI样式应用到你的qTip元素;

注意:关于ThemeRoller更多的信息请点击该超链接,查看API Theme Roller API

width:false

概述:

这个属性允许你重写所有css样式中应用的width属性,任何合法css width值,亲!!请注意:没有重写max/min样式值,在css文件中改变这些;

注意:亲!在重申一遍,这个没有重写max/min 宽度样式值.

height:false:

概述:

这个属性允许你重写所有应用在qTip元素的css height属性值,任何有效的css height值,亲!!!!请注意:这个并没有重写css max/min height属性值,在css

文件中去改变这些;

注意:亲!!在重申一遍,这个没有重写css样式中的max/min height属性;

tip:Object:

概述:

定义qTip的tip属性,请见plugin documentation 文档,里面信息更为详细

@author YHC    原文查看

以上如果有错误信息,还请指出Thanks!