qTip Style

@author YHC

Style

这个style对象允许你分配自定义样式给主要的qTip元素,和ThemeRollertip选项,当使用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样式的ThemeRollerUI样式应用到你的qTip元素;

注意:关于ThemeRoller更多的信息请点击该超链接,查看APITheme 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!




阅读更多
换一批

Jquery qtip 问题

03-10

下面的js实现了一个弹出提示的功能,现在是在超链接上做的,我想在text文本上添加同样的功能该怎么写?rn[code=JScript]$(document).ready(function() rn rn $('a[rel="modal"]:first').qtip( rn rn content: rn title: rn text: 'jsf error', rn button: 'Close' rn , rn text: 'hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world'rn rn , rn show: 'click',rn hide: 'click',rnrn style: rn width: max: 350 , rn padding: '14px', rn backgroundColor: '#FF00FF',rn border: rn width: 2, rn radius: 2, rn color: 'red' rn , rn name: 'light' rn , rn api: rn beforeShow: function() rn rn $('#qtip-blanket').fadeIn(this.options.show.effect.length); rn , rn beforeHide: function() rn rn $('#qtip-blanket').fadeOut(this.options.hide.effect.length); rn rn rn ); rn rn ); rn[/code]rn下边是HTML页面,我要点击文本框text1也能实现上边的提示功能。请高手指教该怎么做。rn[code=HTML]<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>rn<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>rn<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>rn<%@ taglib prefix="t" uri="http://myfaces.apache.org/tomahawk"%>rn<%@ taglib prefix="tr" uri="http://myfaces.apache.org/trinidad"%>rnrnrnrn rn Insert title herern rn rn rn rnrnrnrnrn rn ユーザコードを入力してください。rn rn rn Click here rn rn rn rnrnrnrn[/code]

没有更多推荐了,返回首页