Web网站有不少需要用到tip提示层的地方,结合jquery的jquery.cluetip.js ,可以实现本地字符或ajax异步调用显示提示层。如以上购评分明细提示。( 优势:宽度需要调用页加载时定义,高度auto , 且三角指定图标能根据显示层的大小位置来调用它的位置,达到醒目直观的效果)
jquery.cluetip.css
/*
global
*/
#cluetip-close img {
border : 0 ;
}
#cluetip-title {
overflow : hidden ;
}
#cluetip-title #cluetip-close {
float : right ;
position : relative ;
}
#cluetip-waitimage {
width : 43px ;
height : 11px ;
position : absolute ;
background-image : url(../img_new/cluetipwait.gif) ;
}
.cluetip-arrows {
display : none ;
position : absolute ;
top : 0 ;
left : -11px ;
height : 22px ;
width : 11px ;
background-repeat : no-repeat ;
background-position : 0 0 ;
}
#cluetip-extra {
display : none ;
}
/* **************************************
=cluetipClass: 'default'
-------------------------------------- */
.cluetip-default {
background-color : #d9d9c2 ;
}
.cluetip-default #cluetip-outer {
position : relative ;
margin : 0 ;
background-color : #d9d9c2 ;
}
.cluetip-default h3#cluetip-title {
margin : 0 0 5px ;
padding : 8px 10px 4px ;
font-size : 14px ;
font-weight : normal ;
background-color : #87876a ;
color : #fff ;
}
.cluetip-default #cluetip-title a {
color : #d9d9c2 ;
font-size : 0.95em ;
}
.cluetip-default #cluetip-inner {
padding : 10px ;
}
.cluetip-default div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #900 ;
}
/* default arrows */
.clue-right-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowleft.gif) ;
}
.clue-left-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowright.gif) ;
left : 100% ;
margin-right : -11px ;
}
.clue-top-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowup.gif) ;
top : -11px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* **************************************
=cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
background-color : transparent ;
display : none ;
}
.cluetip-jtip #cluetip-outer {
border : 1px solid #559EF8 ;
position : relative ;
background-color : #fff ;
}
.cluetip-jtip h3#cluetip-title {
margin : 0 0 5px ;
padding : 2px 5px ;
font-size : 12px ;
font-weight : normal ;
background-color : #559EF8 ;
color : #fff ;
}
.cluetip-jtip #cluetip-inner {
padding : 0 5px 5px ;
display : inline-block ;
}
.cluetip-jtip div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #900 ;
display : none ;
}
/* jtip arrows */
.clue-right-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowleft.gif) ;
}
.clue-left-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowright.gif) ;
left : 100% ;
margin-right : -11px ;
}
.clue-top-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowup.gif) ;
top : -11px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* **************************************
=cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
background : transparent url(../img_new/cluetipbl.gif) no-repeat 0 100% ;
margin-top : 10px ;
margin-left : 12px ;
}
.cluetip-rounded #cluetip-outer {
background : transparent url(../img_new/cluetiptl.gif) no-repeat 0 0 ;
margin-top : -12px ;
}
.cluetip-rounded #cluetip-title {
background-color : transparent ;
padding : 12px 12px 0 ;
margin : 0 -12px 0 0 ;
position : relative ;
}
.cluetip-rounded #cluetip-extra {
position : absolute ;
display : block ;
background : transparent url(../img_new/cluetiptr.gif) no-repeat 100% 0 ;
top : 0 ;
right : 0 ;
width : 12px ;
height : 30px ;
margin : -12px -12px 0 0 ;
}
.cluetip-rounded #cluetip-inner {
background : url(../img_new/cluetipbr.gif) no-repeat 100% 100% ;
padding : 5px 12px 12px ;
margin : -18px -12px 0 0 ;
position : relative ;
}
.cluetip-rounded div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #009 ;
background : transparent ;
}
.cluetip-rounded div#cluetip-close a {
color : #777 ;
}
/* rounded arrows */
.clue-right-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowleft.gif) ;
}
.clue-left-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowright.gif) ;
left : 100% ;
margin-left : 12px ;
}
.clue-top-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowup.gif) ;
top : -23px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
zoom : 1 ;
}
.float-left {
float : left ;
margin-right : .5em ;
display : inline ;
position : relative ;
}
.float-right {
float : right ;
margin-left : .5em ;
display : inline ;
position : relative ;
}
#cluetip-close img {
border : 0 ;
}
#cluetip-title {
overflow : hidden ;
}
#cluetip-title #cluetip-close {
float : right ;
position : relative ;
}
#cluetip-waitimage {
width : 43px ;
height : 11px ;
position : absolute ;
background-image : url(../img_new/cluetipwait.gif) ;
}
.cluetip-arrows {
display : none ;
position : absolute ;
top : 0 ;
left : -11px ;
height : 22px ;
width : 11px ;
background-repeat : no-repeat ;
background-position : 0 0 ;
}
#cluetip-extra {
display : none ;
}
/* **************************************
=cluetipClass: 'default'
-------------------------------------- */
.cluetip-default {
background-color : #d9d9c2 ;
}
.cluetip-default #cluetip-outer {
position : relative ;
margin : 0 ;
background-color : #d9d9c2 ;
}
.cluetip-default h3#cluetip-title {
margin : 0 0 5px ;
padding : 8px 10px 4px ;
font-size : 14px ;
font-weight : normal ;
background-color : #87876a ;
color : #fff ;
}
.cluetip-default #cluetip-title a {
color : #d9d9c2 ;
font-size : 0.95em ;
}
.cluetip-default #cluetip-inner {
padding : 10px ;
}
.cluetip-default div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #900 ;
}
/* default arrows */
.clue-right-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowleft.gif) ;
}
.clue-left-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowright.gif) ;
left : 100% ;
margin-right : -11px ;
}
.clue-top-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-default .cluetip-arrows {
background-image : url(../img_new/cluetipdarrowup.gif) ;
top : -11px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* **************************************
=cluetipClass: 'jtip'
-------------------------------------- */
.cluetip-jtip {
background-color : transparent ;
display : none ;
}
.cluetip-jtip #cluetip-outer {
border : 1px solid #559EF8 ;
position : relative ;
background-color : #fff ;
}
.cluetip-jtip h3#cluetip-title {
margin : 0 0 5px ;
padding : 2px 5px ;
font-size : 12px ;
font-weight : normal ;
background-color : #559EF8 ;
color : #fff ;
}
.cluetip-jtip #cluetip-inner {
padding : 0 5px 5px ;
display : inline-block ;
}
.cluetip-jtip div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #900 ;
display : none ;
}
/* jtip arrows */
.clue-right-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowleft.gif) ;
}
.clue-left-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowright.gif) ;
left : 100% ;
margin-right : -11px ;
}
.clue-top-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-jtip .cluetip-arrows {
background-image : url(../img_new/cluetiparrowup.gif) ;
top : -11px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* **************************************
=cluetipClass: 'rounded'
-------------------------------------- */
.cluetip-rounded {
background : transparent url(../img_new/cluetipbl.gif) no-repeat 0 100% ;
margin-top : 10px ;
margin-left : 12px ;
}
.cluetip-rounded #cluetip-outer {
background : transparent url(../img_new/cluetiptl.gif) no-repeat 0 0 ;
margin-top : -12px ;
}
.cluetip-rounded #cluetip-title {
background-color : transparent ;
padding : 12px 12px 0 ;
margin : 0 -12px 0 0 ;
position : relative ;
}
.cluetip-rounded #cluetip-extra {
position : absolute ;
display : block ;
background : transparent url(../img_new/cluetiptr.gif) no-repeat 100% 0 ;
top : 0 ;
right : 0 ;
width : 12px ;
height : 30px ;
margin : -12px -12px 0 0 ;
}
.cluetip-rounded #cluetip-inner {
background : url(../img_new/cluetipbr.gif) no-repeat 100% 100% ;
padding : 5px 12px 12px ;
margin : -18px -12px 0 0 ;
position : relative ;
}
.cluetip-rounded div#cluetip-close {
text-align : right ;
margin : 0 5px 5px ;
color : #009 ;
background : transparent ;
}
.cluetip-rounded div#cluetip-close a {
color : #777 ;
}
/* rounded arrows */
.clue-right-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowleft.gif) ;
}
.clue-left-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowright.gif) ;
left : 100% ;
margin-left : 12px ;
}
.clue-top-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowdown.gif) ;
top : 100% ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
.clue-bottom-rounded .cluetip-arrows {
background-image : url(../img_new/cluetiprarrowup.gif) ;
top : -23px ;
left : 50% ;
margin-left : -11px ;
height : 11px ;
width : 22px ;
}
/* stupid IE6 HasLayout hack */
.cluetip-rounded #cluetip-title,
.cluetip-rounded #cluetip-inner {
zoom : 1 ;
}
.float-left {
float : left ;
margin-right : .5em ;
display : inline ;
position : relative ;
}
.float-right {
float : right ;
margin-left : .5em ;
display : inline ;
position : relative ;
}
jquery-1.3.2.min.js -- 官方网可下载,这里不再表述。(必须)
jquerycluetipLoad.js --提示层的基本参数和属性的定义。
/*
Jquery 鼠标跟随提示层。
* 创建人:fooo
* 创建日期:09-09-23
* 修改人:
* 修改日期:
* 本地字符提示示例:<span title="标题|<%=Str()%>"><a href="#" >我们的</a></span>
* Ajax异步调用文件且提示示例:<ol><li><a class="jt" href="#" title="评分项目明细" rel="HandlerAjax.ashx?Name=<%=Security.EncryptQueryString("我们的我我我人大")%>" >clueTip - Ajax异步提示1</a> </li></ol>
*
* 改变提示层宽度大小,只需在调用页加入: $.fn.cluetip.defaults.width = '100'; -根据大小调整。
*/
// $.fn.cluetip.defaults.tracking = true;
// $.fn.cluetip.defaults.width = 'auto';
$(document).ready( function ()
{
// default theme
$( ' a.title ' ).cluetip({splitTitle: ' | ' });
$( ' a.basic ' ).cluetip();
$( ' a.custom-width ' ).cluetip({width: ' 200px ' , showTitle: false });
$( ' h4 ' ).cluetip({attribute: ' id ' , hoverClass: ' highlight ' });
$( ' #sticky ' ).cluetip({sticky: true , closePosition: ' title ' , arrows: true });
$( ' #examples a:eq(5) ' ).cluetip({
hoverClass: ' highlight ' ,
sticky: true ,
closePosition: ' bottom ' ,
closeText: ' <img src="../img_new/cluetipcross.png" alt="close" width="16" height="16" /> ' ,
truncate: 60
});
$( ' a.load-local ' ).cluetip({local: true , hideLocal: true , sticky: true , arrows: true , cursor: ' pointer ' });
$( ' #clickme ' ).cluetip({activation: ' click ' , sticky: true , width: 250 });
$( ' ol:first a:last ' ).cluetip({tracking: true });
// jTip theme
$( ' a.jt:eq(0) ' ).cluetip({
cluetipClass: ' jtip ' ,
arrows: true ,
dropShadow: false ,
sticky: true ,
mouseOutClose: true ,
closePosition: ' title ' ,
closeText: ' <img src="../img_new/cluetipcross.png" alt="close" /> '
});
$( ' a.jt:eq(1) ' ).cluetip({cluetipClass: ' jtip ' , arrows: true , dropShadow: false , hoverIntent: false });
$( ' span[title] ' ).css({borderBottom: ' 0px solid #900 ' }).cluetip({splitTitle: ' | ' , arrows: true , dropShadow: false , cluetipClass: ' jtip ' });
$( ' a.jt:eq(2) ' ).cluetip({
cluetipClass: ' jtip ' ,
arrows: true ,
dropShadow: false ,
height: ' 150px ' ,
sticky: true ,
positionBy: ' bottomTop '
});
$( ' a.jt:eq(3) ' ).cluetip({local: true , hideLocal: false });
$( ' a.jt:eq(4) ' ).cluetip({
cluetipClass: ' jtip ' , arrows: true ,
dropShadow: false ,
onActivate: function (e) {
var cb = $( ' #cb ' )[ 0 ];
return ! cb || cb.checked;
}
});
// Rounded Corner theme
$( ' ol.rounded a:eq(0) ' ).cluetip({splitTitle: ' | ' , dropShadow: false , cluetipClass: ' rounded ' , showtitle: false });
$( ' ol.rounded a:eq(1) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , showtitle: false , positionBy: ' mouse ' });
$( ' ol.rounded a:eq(2) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , showtitle: false , positionBy: ' bottomTop ' , topOffset: 70 });
$( ' ol.rounded a:eq(3) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , sticky: true , ajaxCache: false , arrows: true });
$( ' ol.rounded a:eq(4) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false });
});
* 创建人:fooo
* 创建日期:09-09-23
* 修改人:
* 修改日期:
* 本地字符提示示例:<span title="标题|<%=Str()%>"><a href="#" >我们的</a></span>
* Ajax异步调用文件且提示示例:<ol><li><a class="jt" href="#" title="评分项目明细" rel="HandlerAjax.ashx?Name=<%=Security.EncryptQueryString("我们的我我我人大")%>" >clueTip - Ajax异步提示1</a> </li></ol>
*
* 改变提示层宽度大小,只需在调用页加入: $.fn.cluetip.defaults.width = '100'; -根据大小调整。
*/
// $.fn.cluetip.defaults.tracking = true;
// $.fn.cluetip.defaults.width = 'auto';
$(document).ready( function ()
{
// default theme
$( ' a.title ' ).cluetip({splitTitle: ' | ' });
$( ' a.basic ' ).cluetip();
$( ' a.custom-width ' ).cluetip({width: ' 200px ' , showTitle: false });
$( ' h4 ' ).cluetip({attribute: ' id ' , hoverClass: ' highlight ' });
$( ' #sticky ' ).cluetip({sticky: true , closePosition: ' title ' , arrows: true });
$( ' #examples a:eq(5) ' ).cluetip({
hoverClass: ' highlight ' ,
sticky: true ,
closePosition: ' bottom ' ,
closeText: ' <img src="../img_new/cluetipcross.png" alt="close" width="16" height="16" /> ' ,
truncate: 60
});
$( ' a.load-local ' ).cluetip({local: true , hideLocal: true , sticky: true , arrows: true , cursor: ' pointer ' });
$( ' #clickme ' ).cluetip({activation: ' click ' , sticky: true , width: 250 });
$( ' ol:first a:last ' ).cluetip({tracking: true });
// jTip theme
$( ' a.jt:eq(0) ' ).cluetip({
cluetipClass: ' jtip ' ,
arrows: true ,
dropShadow: false ,
sticky: true ,
mouseOutClose: true ,
closePosition: ' title ' ,
closeText: ' <img src="../img_new/cluetipcross.png" alt="close" /> '
});
$( ' a.jt:eq(1) ' ).cluetip({cluetipClass: ' jtip ' , arrows: true , dropShadow: false , hoverIntent: false });
$( ' span[title] ' ).css({borderBottom: ' 0px solid #900 ' }).cluetip({splitTitle: ' | ' , arrows: true , dropShadow: false , cluetipClass: ' jtip ' });
$( ' a.jt:eq(2) ' ).cluetip({
cluetipClass: ' jtip ' ,
arrows: true ,
dropShadow: false ,
height: ' 150px ' ,
sticky: true ,
positionBy: ' bottomTop '
});
$( ' a.jt:eq(3) ' ).cluetip({local: true , hideLocal: false });
$( ' a.jt:eq(4) ' ).cluetip({
cluetipClass: ' jtip ' , arrows: true ,
dropShadow: false ,
onActivate: function (e) {
var cb = $( ' #cb ' )[ 0 ];
return ! cb || cb.checked;
}
});
// Rounded Corner theme
$( ' ol.rounded a:eq(0) ' ).cluetip({splitTitle: ' | ' , dropShadow: false , cluetipClass: ' rounded ' , showtitle: false });
$( ' ol.rounded a:eq(1) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , showtitle: false , positionBy: ' mouse ' });
$( ' ol.rounded a:eq(2) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , showtitle: false , positionBy: ' bottomTop ' , topOffset: 70 });
$( ' ol.rounded a:eq(3) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false , sticky: true , ajaxCache: false , arrows: true });
$( ' ol.rounded a:eq(4) ' ).cluetip({cluetipClass: ' rounded ' , dropShadow: false });
});