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

원본 jQuery 팝업 레이어 플러그인 Sharing_jquery

WBOY
풀어 주다： 2016-05-16 16:06:12
원래의
1004명이 탐색했습니다.

jquery에 따라 다르며 IE678 Firefox chrom 및 기타 주류 브라우저(완전히 원본)와 호환되지만 효율성을 향상시킬 수 있도록 도와주세요. 

/**
 * jQuery弹出层插件
 * 
 * @author lanhaoooo@163.com
 * @since 2014-08-23
 */
(function($) {
  var methods = {
    o : {
      isIe : !-[ 1, ] || document.documentMode >= 9,//后面的是判断IE9、IE10的
      ie6 : !-[ 1, ] && !window.XMLHttpRequest,
      ie9_10 : document.documentMode >= 9,
      bgLayer : "layerModel_mask",
      dataId : "layerModel_main",
      wrapper : "layerModel_wrapper",
      warpperContent : "layerModel_content",
      warpperTitle : "layerModel_title",
      warpperCloseBtn : "layerModel_closeBtn",
      warpperOwnContent : "layerModel_ownContent",
      replaceClose : "replaceClose",
      dragableClass : "dragable",
      defaultWidth : 300
    },
    generateId : function(){
      return "_" + new Date().getTime();
    },
    init : function(data, options) {
      //left和top想要使用的时候请设置center为false，这样的情况下才会生效，如果center = true则该设置不生效 #666,#999,#e5dfda ,#e5e5e5,#ff8800
      var defaults = {center:true,locked:true,fixed:true,drag:true,zIndex:9999,opacity:"0.5",title:"系统提示",staySame:false,width:0,height:0,timer:0,bgColor:"#fffaf6",left:350,top:100,head:true,isClose:true,shake:false,
          close : function(){
            return true;
          }
        };
      options = $.extend(defaults, options);
      var s = this;
      var generateId = s.generateId();
      if (typeof data === 'object') {
        data = data instanceof $ ? data : $(data);
        if(options.staySame) {
          data = s.createRender(data, options, generateId).hide();
        } else {
          data = s.createContainer(data, options, generateId).hide();
        }
      } else if (typeof data === 'string' || typeof data === 'number') {
        data = $("<div id='"+s.o.dataId + generateId +"'></div>").html(data).appendTo(document.body).hide();
      } else {
        alert("Layer Error : Unsupporte data type :" + typeof data);
        return;
      }
      if (options.locked && !s.hasBgLayer()) {
        $("<div class='"+s.o.bgLayer+"' id='" + s.o.bgLayer + "'></div>").appendTo(document.body).css({"background" : options.bgColor,"opacity" : options.opacity});
      }
      data.css({"position" : options.fixed &#63; s.o.ie6 &#63; "absolute" : "fixed" : "absolute","z-index" : options.zIndex,"left" : options.left,"top" : options.top}).show();
      if (options.center) {
        s.fixLayer(data);
        $(window).bind("resize scroll", function() {
          s.fixLayer(data);
        });
      }
      if (options.drag) {
        s.dragLayer(data, options);
      }
      if(options.shake) {
        s.shakeLayer(data);
      }
      var timeOut;
      clearTimeout(timeOut);
      if(options.timer > 0){
        timeOut = window.setTimeout(function(){
          $("#"+s.o.replaceClose + generateId).trigger("click");
        }, options.timer);
      }
      return data;
    },
    createContainer : function(data, options,generateId) {
      var s = this;
      //如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
      var isHtmlSlice = data.context == undefined &#63; true : false;
      var wrapperHtml = "<div class='"+s.o.wrapper+"' id='"+s.o.wrapper + generateId+"'>"
                + "<div class='"+s.o.warpperContent+"' id='"+s.o.warpperContent + generateId+"'>"
                + "<a class='"+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a>";
                if(options.head){
                  wrapperHtml+= "<h4 class='"+s.o.warpperTitle+" "+s.o.dragableClass+"' id='"+s.o.warpperTitle + generateId+"'>";
                  if(options.isClose){
                    wrapperHtml+= "<a href='javascript:void(0);' title='关闭' class='"+s.o.warpperCloseBtn+"' id='"+s.o.warpperCloseBtn + generateId+"'>&times;</a>";
                  }
                  wrapperHtml+= options.title + "</h4>";
                }
                wrapperHtml+= "<div id='"+s.o.warpperOwnContent + generateId+"' class='"+s.o.warpperOwnContent+"'></div>"
                + "</div>"
              + "</div>";
      s.container = $(wrapperHtml);
      s.container.appendTo(document.body);
      data.clone(true).appendTo("#"+s.o.warpperOwnContent + generateId).show().attr('id',data.attr('id') || s.o.dataId + generateId);
      //div默认宽度为100%，所以建议将所有弹出的元素设置宽度，否则弹出层宽度为100%
      var w = $("#"+data.attr('id')).width() || $("#"+s.o.dataId + generateId).width() || s.o.defaultWidth;
      //指定了高度
      var tempWidth = w;
      if(options.height > 0 ) {
        if(options.width > 0){
          tempWidth = options.width;
          if(options.width <= w){
            $("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});
          } else {
            //如果指定的宽度大于元素本身的宽度，那么需要将元素居中
            //让元素始终居中显示
            var xPadding = (options.width - w) / 2 + 8;
            $("#"+s.o.warpperOwnContent + generateId).css({"padding" : "4px " + xPadding + "px"});
          }
        }
        s.container.width(tempWidth + 32);
        $("#"+s.o.warpperContent + generateId).width(tempWidth + 30);
        $("#"+s.o.warpperOwnContent + generateId).css({"height":options.height,"overflow-y":"auto"});
      } else {
        if(options.width > 0) {
          tempWidth = options.width;
          if(options.width <= w) {
            $("#"+s.o.warpperOwnContent + generateId).css({"width":options.width,"overflow-x":"auto"});
          }
        }
        s.container.width(tempWidth + 22);
        $("#"+s.o.warpperContent + generateId).width(tempWidth + 20);
      }
      $("#"+s.o.warpperCloseBtn + generateId).click(function(e) {
        $("#"+s.o.replaceClose + generateId).trigger("click");
      });
      $("#"+s.o.replaceClose + generateId).click(function(e) {
        s.close($("#"+s.o.wrapper + generateId), options, generateId);
        e.stopPropagation();
      });
      if(!isHtmlSlice){
        // 让传入的元素在对话框关闭后可以返回到原来的地方
        var display = data.css("display");
        var obj = data[0];
        var prev = obj.previousSibling;
        var next = obj.nextSibling;
        var parent = obj.parentNode;
        this["elemBack_" + generateId] = function(){
          if (prev && prev.parentNode) {
            prev.parentNode.insertBefore(obj, prev.nextSibling);
          } else if (next && next.parentNode) {
            next.parentNode.insertBefore(obj, next);
          } else if (parent) {
            parent.appendChild(obj);
          };
          data.css({"display" : display});
        };
      }
      data.detach();
      return s.container;
    },
    createRender : function(data, options,generateId){
      var s = this;
      //如果context未定义，则是通过html拼接的方式追加的否则就是原本就存在的，关闭后需要返回原地方
      var isHtmlSlice = data.context == undefined &#63; true : false;
      s.container = $("<div class='"+s.o.wrapper+"' style='border:none;' id='"+s.o.wrapper + generateId+"'><a class='"+s.o.replaceClose+"' id='"+s.o.replaceClose + generateId+"'></a></div>");
      s.container.appendTo(document.body);
      data.clone(true).appendTo(s.container).show().attr('id',data.attr('id') || s.o.dataId + generateId);
      $("#"+s.o.replaceClose + generateId).click(function(e) {
        s.close($("#"+s.o.wrapper + generateId), options, generateId);
        e.stopPropagation();
      });
      if(!isHtmlSlice){
        // 让传入的元素在对话框关闭后可以返回到原来的地方
        var display = data.css("display");
        var obj = data[0];
        var prev = obj.previousSibling;
        var next = obj.nextSibling;
        var parent = obj.parentNode;
        s["elemBack_" + generateId] = function(){
          if (prev && prev.parentNode) {
            prev.parentNode.insertBefore(obj, prev.nextSibling);
          } else if (next && next.parentNode) {
            next.parentNode.insertBefore(obj, next);
          } else if (parent) {
            parent.appendChild(obj);
          };
          data.css({"display" : display});
        };
      }
      data.detach();
      return s.container;
    },
    isLastLayer : function(){
      var s = this;
      return $("." + s.o.wrapper).length <= 0;
    },
    hasBgLayer : function(){
      var s = this;
      return $("." + s.o.bgLayer).length > 0;
    },
    close : function(data, options ,generateId) {
      var s = this;
      //调用回调函数
      var result = options.close();
      if(result == undefined || result){
        data.remove();
        if(s.isLastLayer()) {
          $("#" + s.o.bgLayer).remove();
        }
      }
      if (s["elemBack_" + generateId]) {
        s["elemBack_" + generateId]();
      };
    },
    closeLayer : function(obj){
      var s = this;
      var $wapper = $(obj).parents("div."+s.o.wrapper);
      $("."+s.o.replaceClose,$wapper).trigger("click");
    },
    fixLayer : function(data) {
      var s = this;
      var T = ($(window).height() - data.innerHeight()) / 2 + (s.o.ie6 &#63; $(document).scrollTop() : data.scrollTop());
      var L = ($(window).width() - data.width()) / 2 + (s.o.ie6 &#63; $(document).scrollLeft() : data.scrollLeft());
      data.css({"left" : L,"top" : T});
    },
    dragLayer : function(data, options) {
      var s = this;
      var move = false;// 移动标记
      var x = 0, y = 0;// 鼠标离控件左上角的相对位置
      var o = data.find("." + s.o.dragableClass).css({"cursor" : "move"});
      var a = o[0];
      o.mousedown(function(e) {
        //IE9 IE10居然把e.button改成0了，艹
        var isLeftClick = (s.o.isIe && e.button == 1) || (!s.o.isIe && e.button == 0) || (s.o.ie9_10 && e.button == 0);
        if (isLeftClick) {
          data.fadeTo(20, 0.25);// 点击后开始拖动并透明显示
          s.o.isIe &#63; a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
          move = true;
          x = e.pageX - parseInt(data.css("left"));
          y = e.pageY - parseInt(data.css("top"));
          $(document).mousemove(function(e) {
            if (move) {
              var sx = e.pageX - x;// 移动时根据鼠标位置计算控件左上角的绝对位置
              var sy = e.pageY - y;
              data.css({"top" : sy,"left" : sx});
            }
          }).mouseup(function() {
            data.fadeTo("fast", 1);// 松开鼠标后停止移动并恢复成不透明
            move = false;
            x = 0;
            y = 0;
            s.o.isIe &#63; a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
          });
        } else {
          return false;
        }
      });
    },
    shakeLayer : function(data){
      var ll = ($(window).width() - data.width()) / 2;  
      var loop = 4;
      for(var i=1; i<=loop; i++){
        data.animate({left:ll - (loop * 10 - 10 * i)},50);  
        data.animate({left:ll + 2*(loop * 10 - 10 * i)},50);  
      }
    }
  };
  $.fn.layerModel = function(options) {
    methods.init(this, options);
  };
  $.fn.close = function() {
    methods.closeLayer(this);
  };
  $.fn.fix = function() {
    var mn = $(this).parents("." + methods.o.wrapper);
    methods.fixLayer($(mn[0]));
  };
})(jQuery);
로그인 후 복사

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

관련 라벨：
jquery
원천：php.cn
이전 기사：Javascript_javascript 팁에서 주의해야 할 3가지 연산자 다음 기사：JavaScript_javascript 기술에 구현된 문자열 replacementAll 함수의 코드 공유
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 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
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿