フォーム JS ポップアップ プロンプト効果 code_form 効果

HTML

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

; /form>


ページ内のスタイル

コードをコピーします コードは次のとおりです。 🎜>

.focus

{
ボーダー: 1px ソリッド #FC0 !重要
背景: url(Admin/ Images/focus_bg.jpg) 繰り返し-x !重要;
色: #00F !重要;
/*ヒント テキスト スタイル*/
#HintMsg
{
幅: 271px;
位置: 絶対;
表示: なし;
#HintTop
{
高さ: 9px; .gif) いいえ -repeat;
オーバーフロー: 非表示;
#HintMsg .HintInfo
{
ボーダー左: 1px ソリッド #000; 🎜>border-right: 1px ソリッド #000;
background: #FFFFE1;
line-height: 1.5em;
#HintInfo b
{
display:ブロック;
margin-bottom: 6px;
padding-left: 15px;
background: 左中央 no-repeat; >行の高さ: 16px;
#HintMsg .HintInfo b span
{
表示: ブロック;
テキストインデント: 背景: URL (Admin/Images/close.gif) 繰り返しなし;
幅: 12px;
高さ: 12px;
カーソル:
#HintFooter 🎜>{
高さ: 22px;
背景: url(Admin/Images/hintbg2.gif) 繰り返しなし;


キー JS




コードをコピー


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


$(function() {
$(".input ,.login_input,.textarea").focus(function() {
$(this).addClass("focus");
}).blur(function() {
$(this).removeClass("focus");
});
//入力ボックスのプロンプト、HintTitle、HintInfo プロパティを含むオブジェクトを取得します

$("[HintTitle],[HintInfo]) ").focus(function(event) {
$("*").stop(); //実行中のアニメーションをすべて停止します
$("#HintMsg").remove(); //最初にクリアしますエラーの繰り返しを防ぐ

var HintHtml = "

• " $(this).attr("HintTitle") "" $(this).attr("HintInfo") "

"; //表示内容を設定var offset = $(this).offset(); //イベントオブジェクトの位置を取得$("body").append(HintHtml) ); //ノードを追加$("#HintMsg").fadeTo(0, 0.85); //オブジェクトの透明度var HintHeight = $("#HintMsg").height();コンテナの高さを取得します$( "#HintMsg").css({ "top": offset.top - HintHeight "px", "left": offset.left "px" }).fadeIn(500); 🎜>}).blur(function(event) { $("#HintMsg").remove(); //UL

})

}); 🎜>
レンダリング:




上記のコンテンツはダウンロード Web サイトから取得したものですが、具体的な名前は忘れられています...参照のみを目的としています