jquery tip外掛程式碼例項

antzone發表於2017-04-18
jQuery

分享一段程式碼例項，它實現了tip外掛功能。

並且能夠自由定義彈出的方位。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.tip{
  width: 200px;
  text-align: center;
  position: relative;
  border:1px solid #ccc;
  height: 50px;
  line-height: 50px;
  left: 50%;
  margin-top: 50px;
  transform: translateX(-50%);
}
.tip-container{
  position: absolute;
  box-shadow: 2px 2px 5px #f9f9f9;
  z-index: 999;
  display: none;
}
.tip-container .tip-point-top,
.tip-container .tip-point-bottom,
.tip-container .tip-point-left,
.tip-container .tip-point-right{
  border:1px solid #dcdcdc;
  position: relative;
  background: white;
}
.tip-content{
  padding:5px 10px;
  background: white;
  font-size: 12px;
  line-height: 1.7;
  font-family: "Helvetica Neue",Helvetica,Arial,"MicroSoft YaHei";
}
.tip-container .tip-point-top::after,
.tip-container .tip-point-top::before,
.tip-container .tip-point-bottom::after,
.tip-container .tip-point-bottom::before{
  content:"";
  position: absolute;
  border:solid transparent;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate3d(-50%,0,0);
  -webkit-transform: translate3d(-50%,0,0);
}
.tip-container .tip-point-right::after,
.tip-container .tip-point-right::before,
.tip-container .tip-point-left::after,
.tip-container .tip-point-left::before{
  content:"";
  position: absolute;
  border:solid transparent;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate3d(0,-50%,0);
  -webkit-transform: translate3d(0,-50%,0);
}
/*tip-point-top*/
.tip-container .tip-point-top::after{
  border-top-color: #fff;
  top: 100%;
  border-width: 5px;
}
.tip-container .tip-point-top::before {
  border-top-color: #dcdcdc;
  top: 100%;
  border-width: 7px;
}
/*tip-point-bottom*/
.tip-container .tip-point-bottom::after{
  border-bottom-color: #fff;
  bottom: 100%;
  border-width: 5px;
}
.tip-container .tip-point-bottom::before {
  border-bottom-color: #dcdcdc;
  bottom: 100%;
  border-width: 7px;
}
/*tip-point-right*/
.tip-container .tip-point-right::after{
  border-right-color: #fff;
  right: 100%;
  border-width: 5px;
}
.tip-container .tip-point-right::before {
  border-right-color: #dcdcdc;
  right: 100%;
  border-width: 7px;
}
/*tip-point-left*/
.tip-container .tip-point-left::after{
  border-left-color: #fff;
  left: 100%;
  border-width: 5px;
}
.tip-container .tip-point-left::before {
  border-left-color: #dcdcdc;
  left: 100%;
  border-width: 7px;
}
</style>
</head>
<body>
<div class="tip" data-tip="螞蟻部落歡迎您" data-mode="top">螞蟻部落歡迎您</div>
<div class="tip" data-tip="本站url地址是www.softwhy.com"  data-mode="bottom">www.softwhy.com</div>
<div class="tip" data-tip="分享和互助式本站的宗旨" data-mode="right">分享和互助式本站的宗旨</div>
<div class="tip" data-tip="沒有人一開始就是高手" data-mode="left">沒有人一開始就是高手</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
(function($, window, document, undefined) {
  var modePos;
  $.fn.tip = function(options) {
    var set = $.extend({
      "mode": "bottom",
      "speed": 300,
      "tipText": "提示內容"
    }, options);
    if (!modePos) {
      //策略模式
      //演算法
      modePos = {
        top: function(t, tip) {
          return {
            left: t.offset().left + (t.width() - tip.width()) / 2 + "px",
            top: t.offset().top - tip.height() - 12 + "px"
          }
        },
        bottom: function(t, tip) {
          return {
            left: this.top(t, tip).left,
            top: t.offset().top + t.height() + 12 + "px"
          }
        },
        left: function(t, tip) {
          return {
            left: t.offset().left - tip.width() - 12 + "px",
            top: t.offset().top + (t.height() - tip.height()) / 2 + "px"
          }
        },
        right: function(t, tip) {
          return {
            left: t.offset().left + t.width() + 12 + "px",
            top: t.offset().top + (t.height() - tip.height()) / 2 + "px"
          }
        }
      };
    }
 
    function Tip(_this) {
      var _that = $(_this);
      var _mode = set.mode;
      var tipText = set.tipText;
      var _tip = ".tip-container";
      if (_that.data("mode")) {
        _mode = _that.data("mode");
      }
      if (_that.data("tip")) {
        tipText = _that.data("tip");
      }
      _that.css("cursor", "pointer");
      _that.hover(function() {
        var _tipHtml = '<div class="tip-container"><div class="tip-point-'
          + _mode + '"><div class="tip-content">'
          + tipText + '</div></div></div>';
        _that.removeAttr("title alt");
        $("body").append(_tipHtml);
        $(_tip).css(modePos[_mode](_that, $(_tip))).fadeIn(set.speed);
      }, function() {
        $(".tip-container").remove();
      });
    }
    return this.each(function() {
      return new Tip(this);
    });
  }
})(jQuery, window, document);
$(".tip").tip();    
</script>
</html>

相關文章