ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript ヒント プロンプト ボックス コンポーネントの実装コード_JavaScript ヒント
JavaScript ヒント プロンプト ボックス コンポーネントの実装コード_JavaScript ヒント
- WBOYオリジナル
- 2016-05-16 18:15:591320ブラウズ
tip.js
functiontips(obj,tag){
vartip = document.createElement('div'),arg= argument[2],left,top; //ヒントボックスを作成します
var bodywid= document.documentElement.clientWidth; //ここではコンテナの幅に置き換えることもできます $(id).outerWidth();
var abs = obj.getElementsByTagName(tag);
tip.className="tip_bd"; obj.appendChild(tip);
for(var i=0,len=abs.length;ihover(abs[i],function(){
var content = arg||this.getAttribute( 'tip'),text;
left = Position(this).left,top=position(this).top;
content?tip.innerHTML=content:tip.innerHTML= "まだコンテンツがありません!";
if(left parseInt(getStyle(tip,'width'))>bodywid) // 現在の位置が最大幅を超えているかどうかを判断します
text='right:' (bodywid -left) 'px;left:auto ;';
else
text='left:' (left this.offsetWidth) 'px;';
text ='top:' (top this.offsetHeight) ) 'px;';
tip.style.cssText='';
tip.style.display='block'; tip.style.display='none' ;
});
}
}
function hover(el,fnOver, fnOut){//マウスオーバー function
addEvent(el,' Mouseover',fnOver);
addEvent(el,'mouseout',fnOut);
function addEvent(el,type,fn){ //イベントをバインドします
if(el.attachEvent) {
el[' e' type fn] = fn; //これがウィンドウの代わりに el オブジェクトを指すように、IE の下の要素参照をコピーします。
el[type fn] = function(){el[' e' type fn](window.event) ;}
el.attachEvent('on' type, el[type fn]);
}else
el.addEventListener(type, fn, false);
}
functionposition( el){//dom ノードの絶対位置
if(el&&el.nodeType == 1)
return {'left':el.getBoundingClientRect().left document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top document.documentElement.scrollTop};
}
function getStyle(obj,styleName){//現在のスタイル属性を取得します
(obj.currentStyle)//ie
return obj .currentStyle[styleName]
else{ //ff
var $arr=obj.ownerDocument.defaultView.getComputedStyle(obj, null); return $arr[styleName];
}
}
tips(document.getElementById('tips'),'a');
シンプルなタイトルのようなヒントエフェクト, しかし、実際のコンテンツは非常に充実しています。上記の js は、tip.js として保存されます。以下は、使用されるデモです。
コードをコピー
><メタ名="キーワード"コンテンツ="" />
<タイトル>プロンプトメッセージボックス< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />
コードをコピーします コードは次のとおりです:
functiontips(obj,tag){
vartip = document.createElement('div'),arg= argument[2],left,top; //ヒントボックスを作成します
var bodywid= document.documentElement.clientWidth; //ここではコンテナの幅に置き換えることもできます $(id).outerWidth();
var abs = obj.getElementsByTagName(tag);
tip.className="tip_bd"; obj.appendChild(tip);
for(var i=0,len=abs.length;i
var content = arg||this.getAttribute( 'tip'),text;
left = Position(this).left,top=position(this).top;
content?tip.innerHTML=content:tip.innerHTML= "まだコンテンツがありません!";
if(left parseInt(getStyle(tip,'width'))>bodywid) // 現在の位置が最大幅を超えているかどうかを判断します
text='right:' (bodywid -left) 'px;left:auto ;';
else
text='left:' (left this.offsetWidth) 'px;';
text ='top:' (top this.offsetHeight) ) 'px;';
tip.style.cssText='';
tip.style.display='block'; tip.style.display='none' ;
});
}
}
function hover(el,fnOver, fnOut){//マウスオーバー function
addEvent(el,' Mouseover',fnOver);
addEvent(el,'mouseout',fnOut);
function addEvent(el,type,fn){ //イベントをバインドします
if(el.attachEvent) {
el[' e' type fn] = fn; //これがウィンドウの代わりに el オブジェクトを指すように、IE の下の要素参照をコピーします。
el[type fn] = function(){el[' e' type fn](window.event) ;}
el.attachEvent('on' type, el[type fn]);
}else
el.addEventListener(type, fn, false);
}
functionposition( el){//dom ノードの絶対位置
if(el&&el.nodeType == 1)
return {'left':el.getBoundingClientRect().left document.documentElement.scrollLeft,'top':el.getBoundingClientRect().top document.documentElement.scrollTop};
}
function getStyle(obj,styleName){//現在のスタイル属性を取得します
(obj.currentStyle)//ie
return obj .currentStyle[styleName]
else{ //ff
var $arr=obj.ownerDocument.defaultView.getComputedStyle(obj, null); return $arr[styleName];
}
}
tips(document.getElementById('tips'),'a');
シンプルなタイトルのようなヒントエフェクト, しかし、実際のコンテンツは非常に充実しています。上記の js は、tip.js として保存されます。以下は、使用されるデモです。
><メタ名="キーワード"コンテンツ="" />
<タイトル>プロンプトメッセージボックス< ;link rel="stylesheet" type="text/css" href="style/css/tip.css" />
ヒントボックス
Script House今日公開された IT 記事「Web プログラムの実行効率を向上させるための 30 の良い経験」。これらの 30 のガイドラインは、Web 開発にとって非常に重要です。知っていてもそれが何なのかは知らない場合に非常に役立ちますScript Homeだからこそ。以下は、これらのガイドラインに関する私の理解と分析です。また、