jQuery封裝的屏幕居中提示信息代碼

更新時間：2016年06月08日 08:52:24 作者：smartsmile2012

這篇文章主要介紹了jQuery封裝的屏幕居中提示信息代碼,可以很方便的集成到項目開發(fā)中使用,涉及jQuery針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下

本文實例講述了jQuery封裝的屏幕居中提示信息代碼。分享給大家供大家參考，具體如下：

function showLoad(tipInfo, type, autohide) {
  var pic = "";
  switch (type) {
    case 0: // loading
      pic = "./Images/loading.gif";
      break;
    case 1: // ok
      pic = "./Images/right.png";
      break;
    case 2: // error
      pic = "./Images/error.png";
      break;
    default: //其他任何值時
      pic = "./Images/loading.gif";
      break;
  }
  var eTip = document.createElement('div');
  eTip.setAttribute('id', 'tipDiv');
  eTip.style.display = 'none';
  eTip.style.width = '300px';
  eTip.style.height = '20px';
  eTip.style.padding = '5px 15px'
  eTip.innerHTML = "<img src=\"" + pic + "\" style=\"float:left;\" /> <span style=\"color:#373737; font-size:14px\">" + tipInfo + "</span>";
  try {
    document.body.appendChild(eTip);
  } catch (e) { }
  $("#tipDiv").css({
    position: "absolute",
    border: "solid 0px #D1D1D1",
    left: ($(window).width() - $("#tipDiv").outerWidth()) / 2,
    top: ($(window).height() - $("#tipDiv").outerHeight()) / 2 + $(document).scrollTop()
  });
  $('#tipDiv').show();
  if (autohide == true) {
    $('#tipDiv').fadeOut(3000);
  }
}
function closeLoad() {
  $('#tipDiv').fadeOut();
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Jquery提示框封裝</title>
  <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#name").blur(function () {
        if ($(this).val() == "") {
          tip(this, "×請輸入");
        } else {
          tip(this,"√輸入正確");
        }
      })
    });
    function tip(o,tip) {
      var eTip = document.createElement("span");
      var objid = $(o).attr("id") + "_tipDiv";
      var value = $(o).val();
      //絕對路徑
      var x = $(o).offset().top;
      var y = $(o).offset().left;
      var w = $(o).width();
      var h = $(o).height();
      eTip.setAttribute("id", objid);
      try {
        document.body.appendChild(eTip);
      } catch (e) { }
      $("#" + objid).hide();
      $("#" + objid).css({
        top: x,
        left: y + w + 10,
        height: h,
        position: "absolute",
        padding: "5px"
      });
      $("#" + objid).html(tip);
      $("#" + objid).show();
    }
  </script>
</head>
<body>
<br/><br/><br/><br/><br/>
 <input type="text" id="name" /><br/><br/><br/><br/>
 <input type="text" id="pwd" />
</body>
</html>

更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》

希望本文所述對大家jQuery程序設計有所幫助。

您可能感興趣的文章:

jQuery實現(xiàn)的網(wǎng)頁豎向菜單效果代碼
這篇文章主要介紹了jQuery實現(xiàn)的網(wǎng)頁豎向菜單效果代碼,涉及jquery控制頁面元素簡單折疊與展開功能,非常簡單實用,需要的朋友可以參考下
2015-08-08
jquery插件實現(xiàn)圖片懸浮
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery實現(xiàn)判斷控件是否顯示的方法
這篇文章主要介紹了jQuery實現(xiàn)判斷控件是否顯示的方法,涉及jQuery針對頁面元素屬性相關操作技巧,需要的朋友可以參考下
2017-01-01
jquery 取子節(jié)點及當前節(jié)點屬性值的方法
這篇文章主要介紹了jquery 取子節(jié)點及當前節(jié)點屬性值的方法,比較適合新手，也比較實用，需要的朋友可以參考下
2014-08-08
jquery無縫向上滾動實現(xiàn)代碼
向上滾動的效果想必大家都見過吧!無縫間歇向上滾動應該也不會陌生吧，接下來為大家介紹下jquery實現(xiàn)無縫間歇滾動，感興趣的朋友可以參考下哈，希望可以幫助到你們
2013-03-03
jQuery實現(xiàn)兩款有動畫功能的導航菜單代碼
這篇文章主要介紹了jQuery實現(xiàn)兩款有動畫功能的導航菜單代碼,涉及jQuery動畫效果的不同實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-09-09
jQuery實現(xiàn)簡單登錄條件判斷
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡單登錄條件判斷，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03
jQuery的圖片輪播插件PgwSlideshow使用詳解
這篇文章主要介紹了jQuery的圖片輪播插件PgwSlideshow使用詳解的相關資料,需要的朋友可以參考下
2016-08-08
jquery驗證郵箱格式是否正確實例講解
這篇文章主要介紹了一個jquery驗證郵箱格式是否正確的實踐案例，利用正則表達式進行驗證，感興趣的小伙伴們可以參考一下
2015-11-11
解析jQuery的三種bind/One/Live事件綁定使用方法
本篇文章主要是對jQuery的三種bind/One/Live事件綁定使用方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12