지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

jQuery 프롬프트 상자(팁) 플러그인_javascript 기술

WBOY
풀어 주다： 2016-05-16 15:19:03
원래의
1333명이 탐색했습니다.

플러그인은 일반적으로 사용되는 프롬프트 표시를 충족하고 12방향을 지원하며 테두리, 배경색, 텍스트 색상 사용자 정의를 지원하고 위치 미세 조정, 레벨 미세 조정, 너비 간격 및 기타 매개변수 조정을 지원합니다.

먼저 효과를 살펴보겠습니다.

팁: 프롬프트 정보 구성요소
매개변수:

  • msg:'asdf', 내용
  • 다이어:2, 방향
  • 너비:250,너비
  • _x:0, 측면 오프셋
  • _y:0, 수직 오프셋
  • zIndex:100000,레벨
  • borderColor:#FFF, 테두리 색상
  • bgColor:#FFF, 배경색
  • useHover:true 호버 표시 사용 여부
  • 색상: 기본 프롬프트 텍스트 색상
  • 패딩: 여백

자바스크립트 코드: 

(function ($) {
  var defaults = {
    dire: 12,
    w: 250,
    _x: 0,
    _y: 0,
    borderColor: '#FFBB76',
    bgColor: '#FFFCEF',
    color: '#FF0000',
    padding: [5, 10],
    arrWidth: 10,
    useHover: true,
    zIndex: 100000
  };
  $.fn.tips = function (opt) {
    var tip, opts = $.extend({}, defaults, opt);
    if (this[0]) {
      opts.tag = this;
      if (opts.useHover) {
        opts.tag.hover(function () {
          tip = new Tip(opts);
          tip.show();
        }, function () {
          tip.close();
        });
      } else {
        tip = new Tip(opts);
        tip.show();
      }
      return this;
    }
  };
  function Tip(opts) {
    this.dire = opts.dire;
    this.width = opts.w;
    this.zIndex = opts.zIndex;
    this.borderColor = opts.borderColor;
    this.bgColor = opts.bgColor;
    this.color = opts.color;
    this.padding = opts.padding;
    this.arrWidth = opts.arrWidth;
    this.offsetX = opts._x;
    this.offsetY = opts._y;
    this.tag = opts.tag;
    this.msg = opts.msg;
    this.wrap = $('<div class="tip-wrap"></div>');
    this.innerArr = $('<div class="tip-arr-a"></div>');
    this.outerArr = $('<div class="tip-arr-b"></div>');
    this.init();
  };
  Tip.prototype = {
    init: function () {
      var msg = this.tag.data('tipMsg');
      if (!this.msg) {
        this.msg = msg;
      }
      this.createTemp();
    },
    createTemp: function () {
      var t = this;
      t.createWrap();
      t.setPosition();
    },
    createWrap: function () {
      var t = this;
      t.wrap.html(t.msg);
      var wrapCSS = {
        width: t.width,
        border: '1px solid ' + t.borderColor,
        'border-radius': '5px',
        background: t.bgColor,
        color: t.color,
        padding: t.getPadding()
      };
      t.outerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.borderColor));
      t.innerArr.css(t.getArrStyle(t.dire, t.arrWidth, t.bgColor));
      t.wrap.prepend(t.innerArr).prepend(t.outerArr).css(wrapCSS);
      $('body').append(t.wrap);
    },
    setPosition: function () {
      var t = this;
      var posObj = t.getPos(t.dire, t.getPosition(t.tag), t.getPosition(t.wrap), t.arrWidth), pos = posObj.pos, innerPos = posObj.innerPos, outerPos = posObj.outerPos;
      t.wrap.css({top: pos.y, left: pos.x});
      t.innerArr.css({top: innerPos.y, left: innerPos.x});
      t.outerArr.css({top: outerPos.y, left: outerPos.x});
    },
    getPadding: function () {
      var t = this, pad = '0px', padArr = t.padding, len = padArr.length;
      switch (len) {
        case 1:
          pad = padArr[0] + 'px';
          break;
        case 2:
          pad = padArr[0] + 'px ' + padArr[1] + 'px';
          break;
        case 3:
          pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px';
          break;
        case 4:
          pad = padArr[0] + 'px ' + padArr[1] + 'px ' + padArr[2] + 'px ' + padArr[3] + 'px';
          break;
      }
      return pad;
    },
    getPosition: function (tag) {
      return {t: tag.offset().top, l: tag.offset().left, h: tag.outerHeight(), w: tag.outerWidth()};
    },
    getArrStyle: function (dir, width, color) {
      var style;
      switch (dir) {
        case 11:
        case 12:
        case 1:
          style = {
            'border-bottom-style': 'solid',
            'border-width': '0px ' + width + 'px ' + width + 'px',
            'border-bottom-color': color
          };
          break;
        case 2:
        case 3:
        case 4:
          style = {
            'border-left-style': 'solid',
            'border-width': width + 'px 0px ' + width + 'px ' + width + 'px',
            'border-left-color': color
          };
          break;
        case 5:
        case 6:
        case 7:
          style = {
            'border-top-style': 'solid',
            'border-width': width + 'px ' + width + 'px 0px',
            'border-top-color': color
          };
          break;
        case 8:
        case 9:
        case 10:
          style = {
            'border-right-style': 'solid',
            'border-width': width + 'px ' + width + 'px ' + width + 'px 0px',
            'border-right-color': color
          };
          break;
      }
      return style || {};
    },
    getPos: function (d, tagPos, pos, arrWidth) {
      var _pos, _innerPos, _outerPos, l = tagPos.l, t = tagPos.t, w = tagPos.w, h = tagPos.h, ww = pos.w, hh = pos.h;
      switch (d) {
        case 0:
        case 1:
          _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t + h + arrWidth};
          _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth};
          _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: -arrWidth + 1};
          break;
        case 2:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
          _outerPos = {x: ww - 2, y: 20};
          _innerPos = {x: ww - 2 - 1, y: 20};
          break;
        case 3:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 - hh / 2};
          _outerPos = {x: ww - 2, y: (hh - 2) / 2 - arrWidth};
          _innerPos = {x: ww - 2 - 1, y: (hh - 2) / 2 - arrWidth};
          break;
        case 4:
          _pos = {x: l - ww - arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
          _outerPos = {x: ww - 2, y: hh - 2 - 20 - arrWidth * 2};
          _innerPos = {x: ww - 2 - 1, y: hh - 2 - 20 - arrWidth * 2};
          break;
        case 5:
          _pos = {x: l + w / 2 + arrWidth + 20 + 1 - ww, y: t - arrWidth - hh};
          _outerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2};
          _innerPos = {x: ww - 2 - 20 - arrWidth * 2, y: hh - 2 - 1};
          break;
        case 6:
          _pos = {x: l + w / 2 - ww / 2, y: t - arrWidth - hh};
          _outerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2};
          _innerPos = {x: (ww - 2) / 2 - arrWidth, y: hh - 2 - 1};
          break;
        case 7:
          _pos = {x: l + w / 2 - 20 - arrWidth, y: t - arrWidth - hh};
          _outerPos = {x: 20, y: hh - 2};
          _innerPos = {x: 20, y: hh - 2 - 1};
          break;
        case 8:
          _pos = {x: l + w + arrWidth, y: t + h / 2 + arrWidth + 20 + 1 - hh};
          _outerPos = {x: -arrWidth, y: hh - 2 - 20 - arrWidth * 2};
          _innerPos = {x: -arrWidth + 1, y: hh - 2 - 20 - arrWidth * 2};
          break;
        case 9:
          _pos = {x: l + w + arrWidth, y: t + h / 2 - hh / 2};
          _outerPos = {x: -arrWidth, y: (hh - 2) / 2 - arrWidth};
          _innerPos = {x: -arrWidth + 1, y: (hh - 2) / 2 - arrWidth};
          break;
        case 10:
          _pos = {x: l + w + arrWidth, y: t + h / 2 - arrWidth - 20 - 1};
          _outerPos = {x: -arrWidth, y: 20};
          _innerPos = {x: -arrWidth + 1, y: 20};
          break;
        case 11:
          _pos = {x: l + w / 2 - 20 - arrWidth, y: t + h + arrWidth};
          _outerPos = {x: 20, y: -arrWidth};
          _innerPos = {x: 20, y: -arrWidth + 1};
          break;
        case 12:
          _pos = {x: l + w / 2 - ww / 2, y: t + h + arrWidth};
          _outerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth};
          _innerPos = {x: (ww - 2) / 2 - arrWidth, y: -arrWidth + 1};
          break;
        default:
          _pos = {x: 0, y: 0};
      }
      return {
        pos: _pos,
        innerPos: _innerPos,
        outerPos: _outerPos
      };
    },
    show: function () {
      this.wrap.show();
    },
    close: function () {
      this.wrap.remove();
    }
  };
})(jQuery);
로그인 후 복사

CSS:

.tip-wrap {
  position: absolute;
  display: none;
}

.tip-arr-a, .tip-arr-b {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border-style: dashed;
  border-color: transparent;
}
page:

<div class="test">
  <span data-tip-msg="我是测试数据<br>我是测试数据<br>我是测试数据">我是测试数据</span>
</div>

<script>
  $('.test span').tips();
</script>
로그인 후 복사

효과:


위 내용은 간단한 jQuery 프롬프트 상자(Tip) 플러그인입니다. 자신의 프로젝트에 적용하여 뭔가를 얻을 수 있기를 바랍니다.

관련 라벨：
jquery 프롬프트 상자
원천：php.cn
이전 기사：Anglejs_AngularJS로 완전한 테이블을 만드는 방법 다음 기사：jQuery 이미지 회전 플러그인 jQueryRotate.js 사용 예(데모 다운로드 포함)_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
에서 2024-04-05 09:26:49
0
1
1418
최종 사용자의 현재 선택에 따라 선택 상자에서 선택한 옵션을 이동하려면 jquery 스크립트가 필요합니다. 최종 사용자가 선택 상자 요소를 통해 항목의 순위를 지정할 수 있는 HTML 페이지가 있습니다. 간단한 데모를 보려면 바이올린을 참조하세요: https://jsf...
에서 2024-04-04 18:40:04
0
1
3528
북마크를 통해 순수 CSS로 요소를 만들었습니다. 생성되었으나 표시되지 않음 내 코드는 다음과 같습니다: g=document.createElement('div');g.setAttribute("id","divcon...
에서 2024-04-04 17:27:27
0
1
417
Safari/Firefox iOS에서 양식 데이터를 보낼 수 없습니다. 이는 iOS의 Safari/Firefox를 제외한 모든 플랫폼에서 작동합니다: jQuery("#gform_1").one('submit',func...
에서 2024-04-04 12:53:48
0
1
303
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿