js プロンプト情報 jtip カプセル化コード (画像またはarticle_javascript スキルにすることができます)

ちなみに私はフロントエンドに転職したので毎日div cssなどをやっています。今日は、A タグに似た title 関数や alt 関数を js を使って実装する方法について説明します。この関数の利点については、ゆっくり聞いてください。まず、title 属性や alt 属性によってもたらされるプロンプトは単純すぎます。 、スタイルは変更できません。要素の上にマウスを移動し、表示されるまで 1 ～ 3 秒待つ必要があります。コンテンツは単純なテキストのみであり、HTML コンテンツを追加することはできません。つまり、独自の js プロンプト ボックスをカプセル化する必要があります。おそらく、jquery には jtip コンポーネントがないのではないかと思われるかもしれません。はい、それはあなたの考え方がかなり前衛的であることを意味します。慣れているなら使ってみてください。私は、皆さんが勉強できるように、この小さな例を示しただけです。

まず第一に、私たちがしなければならないことは、私たちが行うことすべてに当てはまりますが、何かを手に入れたらすぐにコードを書き始めないでください。私たちはそれを手に入れてから支払いたいと思っています。これは恋に落ちるのと同じで、与える方法を考えずに相手を手に入れることだけを考えることはできません。私たちが取得したいのは、まったく新しいプロンプト ボックスです。これは、div を考えるのが簡単で、すべてをカバーできる必要があります。次に、マウスが特定のラベルに移動すると、時間内にマウスの近くに表示され、マウスが離れると消えることも期待します。今はとても単純なことですが、以前はとても簡単なことだったと思いませんか？さて、愚か者でも教えられるでしょう! アイデアが明確になったので、このアイデアに従って段階的に実装してみましょう。

まず DIV を作成して非表示にし、必要なスタイルをすべて追加します。コードは次のとおりです:

コードをコピーします コードは次のとおりです:

vartipdiv = document.createElement("div");
tipdiv.id = "txbtip";
tipdiv.style.position = "absolute"; 3px";
tipdiv .style.background = "#565656";
tipdiv.style.zIndex = "999";
tipdiv.style.border = "1px ソリッド #000";
tipdiv .style.background = "# F4F8FC";
tipdiv.style.fontsize = "14px";
rootEle.appendChild(tipdiv); >

次に、追加するラベルに onmousemove イベントと onmouseout イベントを追加します。ここでは、より共通性を高めるために、追加するすべてのラベルに共通のクラス名 (txbtip) を付けます。

コードをコピー コードは次のとおりです。 var txbtip = getElementsByClassName(' txbtip', 'input');>

function getElementsByClassName(n, tag) {

tag = タグ ||
var classElements = [], allElements = document.getElementsByTagName(tag) ;
for (var i = 0; i
n = "" n "";
var cn = " " allElements[i].className " "; 🎜>if (cn.indexOf(n) != -1) {
classElements[classElements.length] = allElements[i]
}
}
return classElements; 🎜>

注: このメソッドは、クラス n の特定のタグのセットを取得するためのものです。

コードをコピーします

コードは次のとおりです: for (vartip in txbtip) { var temp = ""; txbtip[tip].onmouseover = function(e) { tipdiv.style.display = "block";

var title = this.title;

this.title = "";//ここでこれを行う理由は次のとおりです。元のタイトル プロンプトをクリアします。
tipdiv.innerHTML = title;
setTipPosition(e);//このメソッドは、ヒント ボックスを配置するために使用されます。
}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);//このメソッドはプロンプト ボックスの配置に使用されます。
}
txbtip[tip].onmouseout = function(e) {
//alert("out");
this.title = temp;
temp = ""; >tipdiv.style.display = "none";
}




最後のステップは、上で説明した setTipPotion メソッドです。実装は次のとおりです。

コードをコピー


コードは次のとおりです。

function setTipPosition(e ) { e = e || tipdiv.style.left = e.clientX 10 'px'; var top = document.body.scrollTop ? .scrollTop; tipdiv .style.top = e.clientY 10 上 'px' }

これでほぼ完成したので、それを反転してページ バインディングと組み合わせることができます。したがって、それを window.onload に書き込みます。

window.onload=function(){...}
ただし、この場合、ページに複数の window.onload イベントがあり、失敗する可能性があるため、いくつかの作業が必要です。完了します。また、先ほどのプロンプトボックスの対応するラベルには既にマウスイベントがある可能性があり、判定を追加する必要があります。

if (window.addEventListener) { window.addEventListener("load", ready, false); } else if (window.attachEvent) { window.attachEvent("onload", ready);以下は完全なコードです。
jstip.js
[code]

//******js テキスト プロンプト txb20100119********/

if (window.addEventListener) {
window . addEventListener("load", 準備完了, false);
} else if (window.attachEvent) {
window.attachEvent("onload", ready);

関数準備完了( ) {
var txbtip = getElementsByClassName('txbtip', '*');
vartipdiv = document.createElement("div");
tipdiv.id = "txbtip"; . style.position = "absolute";
tipdiv.style.padding = "#565656";
tipdiv.style.zIndex = "999"; 🎜 >tipdiv.style.border = "1px ソリッド #000";
tipdiv.style.background = "#F4F8FC";
tipdiv.style.fontsize = "14px"; = "なし";
var rootEle = document.documentElement;|
rootEle.appendChild(tipdiv);
//alert(txbtip)ヒント ].id);
var temp = "";
txbtip[tip].onmouseover = function(e) {
tipdiv.style.display = "ブロック"; . title;
temp = this.title;
tipdiv.innerHTML = title;
setTipPosition(e); 🎜 >}
txbtip[tip].onmousemove = function(e) {
setTipPosition(e);
}
txbtip[tip].onmouseout = function(e) {
//アラート ("アウト");
this.title = temp;
tipdiv.style.display = "none"; >
function getElementsByClassName(n, tag) {
tag = tag || "*";
var classElements = [], allElements = document.getElementsByTagName(tag); 0 ; i n = "" n "";
var cn = " " allElements[i].className " "; ) != -1) {
classElements[classElements.length] = allElements[i]
}
}
return classElements;
関数 setTipPosition(e); 🎜 >e = e || イベント;
tipdiv.style.left = e.clientX 10 'px';
var top = document.body.scrollTop : document.documentElement.scrollTop;
tipdiv.style.top = e.clientY 10 トップ 'px'
}
}
[コード]







独自の js プロンプト情報 jtip をカプセル化する例











これはハイパーリンクです

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">">浠