jQuery封装的屏幕居中提示信息代码,易操作的j

作者: 网络应用  发布:2019-09-03

正文实例陈说了一款轻量级的表单提醒插件---jQuery Form Toolltip。分享给我们供我们参照他事他说加以考察。具体如下:

本文实例陈诉了jQuery封装的显示器居中提示音信代码。分享给大家供我们参谋,具体如下:

jQuery Form Toolltip **特点:**

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;" /> " + tipInfo + "";
  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>
  • 您能够单独自定义指示音讯的CSS样式。
  • 你能够钦定淡入淡出的主旋律,当前支撑Top, Bottom, Right 和 Left

越多关于jQuery相关内容感兴趣的读者可查阅本站专项论题:《jquery中Ajax用法计算》、《jQuery表格(table)操作能力汇总》、《jQuery拖拽特效与本领总计》、《jQuery增加手艺总结》、《jQuery常见卓绝特效汇总》、《jQuery动画与特功效法总括》、《jquery选用器用法计算》及《jQuery常用插件及用法计算》

运行效果截图如下:

盼望本文所述对大家jQuery程序设计具备帮忙。

图片 1

你恐怕感兴趣的稿子:

  • jQuery完成的轻便提醒新闻插件
  • jQuery落成鼠标经过弹出提醒新闻的地形图火爆效应
  • jQuery完成鼠标悬停彰显提醒消息窗口的不二等秘书诀
  • jQuery达成鼠标经过提醒信息的地图火热效应
  • jquery 提醒新闻展现后自动消失的现实性贯彻
  • qTip2 精致的依照jQuery提醒新闻插件
  • jquery 简短几句代码完成给成分动态增加及得到提醒音讯
  • 听大人讲JQuery的浮动DIV展现提醒新闻并自动隐敝
  • JQuery浮动DIV提示消息并自动遮盖的代码
  • 依照jQuery的弹出警示对话框美化插件(警告,确认和提醒)
  • 听别人说jquery的气泡提醒功用
  • jQuery 表单验证插件formValidation完毕天性化错误提醒
  • jquery删除提醒框弹出是还是不是删除对话框
  • Jquery实现找出框提暗示义示例代码

切实代码如下:

jquery实例:jQuery Form Toolltip使用办法
引进大旨文件

<script src="js/jquery/2.1.1/jquery.min.js"></script>
<script src="src/jquery.formtooltip.js"></script>

构建html

<form id="formname">
 <table>
  <tr>
   <td> Title </td>
   <td><input type="text" value="blank" name="title"/></td>
  </tr>
  <tr>
   <td> Name </td>
   <td><input type="name" value="Blank Name" name="name"/></td>
  </tr>
  <tr>
   <td> Color </td>
   <td><input type="color" value="#000FFF" name="color"/></td>
  </tr>
  <tr>
   <td> TextArea </td>
   <td><textarea type="month" value="" name="text"></textarea></td>
  </tr>
 </table>
</form>

写入JS初始化

$(document).ready(function(){
  var fields = {      
      title: {
        tooltip : "This field is actually for bla bla bla...</br>and bla bla bla",
        position: 'bottom'
      },
      name : {
        tooltip: "This is for fun!!!!", //提示的信息
        position: 'right',       //动画的方向
        backgroundColor: "#FF0000",  //背景颜色
        color: '#FFFF00'        //字体颜色
        },
      color : {
        tooltip: "This is for your cover color~~~<a href='#'>here</a>"
        },
      text : {
        tooltip: "Please provide your comment here."
        }
      };

  //Include Global Color 
  $("#formname").formtoolip(fields, { backgroundColor: "#000000" , color : "#FFFFFF", fontSize : 15, padding : 10, borderRadius : 5});     
});

定义田野(field)s数组,把须求提示的表单字段依次写入,然后调用formatoolip函数开头化。

以上就是为我们大饱眼福的jQuery表单提醒插件:jQuery Form Toolltip ,很实用,希望我们心爱。

您恐怕感兴趣的作品:

  • qTip2 精致的基于jQuery提醒音信插件
  • jQuery实现鼠标经过弹出提醒音讯的地图火热效应
  • jQuery实现鼠标悬停突显提醒信息窗口的不二秘诀
  • jQuery实现鼠标经过提示信息的地形图火热效应
  • jquery 提醒音讯呈现后活动消失的切切实实贯彻
  • jquery 简短几句代码完结给成分动态增进及得到提醒音讯
  • 听大人说JQuery的浮动DIV展现提醒音信并自动掩饰
  • JQuery浮动DIV提醒消息并自动遮盖的代码
  • jquery-tips悬浮提醒插件分享
  • jQuery完结的大约提示音信插件

本文由王中王开奖结果发布于网络应用,转载请注明出处:jQuery封装的屏幕居中提示信息代码,易操作的j

关键词: