jqueryバブルヒントプラグイン
3724 ワード
このカードは、JTipの素材やデザインに沿ったコード書き換えです.以下の機能が拡張されました.
1.閉じるボタンを追加するか、自動閉じる間隔を設定して自動的に閉じる
2.複数の呼び出し方式が追加され、泡のヒント位置を任意に位置決めできます.
呼び出し方法:
1.閉じるボタンを追加するか、自動閉じる間隔を設定して自動的に閉じる
2.複数の呼び出し方式が追加され、泡のヒント位置を任意に位置決めできます.
jQuery.simpleTips = function(source,title,content,millisec){
title = title || ' ↓ ';
var $source = (typeof(source)== 'object') ? $(source) : $('#'+source);
$source.css('cursor','pointer');
var suffx = $source.attr('id') ? $source.attr('id') : new Date().getTime();
var jtipId = "Tip_" + suffx;
var jtipContentId = "TipInner_" + suffx;
var closeHTML = "<a href='javascript:void(0);' onclick='$(this).parent().parent().remove();' class='tips-titlebar-close'><span class='tips-icon'></span></a>";
var thePos = $source.position();
var screenW = $(window).width();
var arrowW = 11;
var tipContentW = 200;
var showTipOnRight = (screenW - thePos.left - $source.width() - arrowW)>tipContentW;
var tipX = 0;
if(showTipOnRight){
$("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_left'></div><div class='Tip_close_left'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//right side
var arrowOffset = $source.width() + arrowW;
tipX = thePos.left + arrowOffset; //set x position
}else{
$("body").append("<div id='" +jtipId+ "' class='Tip' style='width:"+tipContentW+"px'><div class='Tip_arrow_right' style='left:"+tipContentW+"px'></div><div class='Tip_close_right'>"+title+closeHTML+"</div><div class='Tip_content' id='" +jtipContentId+ "'></div></div>");//left side
tipX = thePos.left - tipContentW - arrowW + 1; //set x position
}
$('#'+jtipId).css({left: tipX+"px", top: thePos.top+"px"});
$('#'+jtipId).fadeIn("slow");
$('#'+jtipContentId).html(content);
if(millisec)setTimeout("jTipHide('" +jtipId+ "')",millisec);
jTipHide = function(objectId){
$('#'+objectId).fadeOut("slow",function(){
$(this).remove();
});
}
};
呼び出し方法:
<input id="userNameID" name="userName" />
// id userNameID ,3
jQuery.simpleTips('userNameID',' ',' ',3000);
// id userNameID ,
jQuery.simpleTips('userNameID',' ',' ');
var target = document.getElementById('userNameID');
jQuery.simpleTips(target,' ',' ');
$(":text").bind('blur',function(){
if(!isNaN( $(this).val())){
//
jQuery.simpleTips(this,' ',' ',3000);
$(this).val('');
}
});
オンラインデモ
: を うブランドの の