JQ封装简易弹框插件

使用JQ封装简易弹框插件

自己瞎写,用jq写了一个弹框插件。代码不规范,写法上也有诸多问题,望不吝赐教

首先对jquery扩展一个myplug方法:

; (function ($) {
  $.fn.myPlug = function (opt) {

  }

})(jQuery);

设置插件的默认属性:

var defOpt = {   // 默认参数
    bg: 'white', // 背景颜色
    title: '标题',
    content: '内容',
    vanish: false  // 点击空白处是否消失
  }

如果用户设置了自定义属性,则覆盖它的默认属性,有两种写法,如下:

$.fn.myPlug = function (opt) {
    opt = opt || {}
    // 用自定义属性覆盖默认属性
    // 写法1:
    // for (var d in defOpt) {
    //   if (opt.hasOwnProperty(d))
    //     continue
    //   opt[d] = defOpt[d];
    // }

    // 写法2:
    opts = $.extend({}, defOpt, opt);  // 用自定义属性覆盖默认属性
  }

myPlug插件里面可以有多个方法,为了收集这些方法,可以新建一个对象来保存:

  function AlertObj(elm, opt) {  // elm:元素  opt:配置
    this.options = opt
    this.$elm = $(elm)
  }
  var that = new AlertObj(this, opts)

开始往AlertObj里面添加方法,我只写了一个show()方法,把弹框出现和消失全写在里面:

show: function () {
      var o = this.options
      var dom = '
×
' + o.title + '
' + o.content + '
'
$('body').append(dom) // 弹框样式 var w = $(window).width() var h = $(window).height() $('.alert').css({ width: w + 'px', height: h + 'px', background: 'rgba(0,0,0,0.5)', 'padding-top': '20%', 'box-sizing': 'border-box', position: 'absolute', top: 0, left: 0, 'z-index': 1000 }) $('.alert-close').css({ 'position': 'absolute', 'top': '-10px', 'right': '-10px', 'width': '30px', 'height': '30px', 'border-radius': '50%', 'font-size': '25px', 'text-align': 'center', 'line-height': '30px', 'border': '1px solid #333', 'background': 'white' }) $('.alert-in').css({ 'border': '1px solid #333', 'border-radius': '5px', 'margin-left': '30%', "background": 'white', 'width': '40%', 'position': 'relative', }) $('.alert-title').css({ 'font-size': '17px', 'border-bottom': '1px dotted #666', 'padding': '10px', title: '标题' }) $('.alert-content').css({ 'padding': '20px', title: '标题' }) $('.alert').css({ display: 'block' }) $('#close').click(function () { $('.alert').remove() }) // 点击空白黑色区域清除弹框 $(document).click(function (e) { if (($(e.target).attr('class') == 'alert')) { if (o.vanish) { $('.alert').remove() } } }) }

在html里面:

$('button').click(function () {
      $('#test').myPlug({
        title: 'hah',
        content: 'hah',
        vanish: true
      })
    })

<button id="test">alert</button>

完整代码如下:

; (function ($) {
  var defOpt = {   // 默认参数
    bg: 'white', // 背景颜色
    title: '标题',
    content: '内容',
    vanish: false  // 点击空白处是否消失
  }
  $.fn.myPlug = function (opt) {
    opt = opt || {}
    // 用自定义属性覆盖默认属性
    // 写法1:
    // for (var d in defOpt) {
    //   if (opt.hasOwnProperty(d))
    //     continue
    //   opt[d] = defOpt[d];
    // }

    // 写法2:
    opts = $.extend({}, defOpt, opt);  // 用自定义属性覆盖默认属性

    var that = new AlertObj(this, opts)
    that.show()
  }

  function AlertObj(elm, opt) {  // elm:元素  opt:配置
    this.options = opt
    this.$elm = $(elm)
  }

  AlertObj.prototype = {
    show: function () {
      var o = this.options
      var dom = '
×
' + o.title + '
' + o.content + '
'
$('body').append(dom) // 弹框样式 var w = $(window).width() var h = $(window).height() $('.alert').css({ width: w + 'px', height: h + 'px', background: 'rgba(0,0,0,0.5)', 'padding-top': '20%', 'box-sizing': 'border-box', position: 'absolute', top: 0, left: 0, 'z-index': 1000 }) $('.alert-close').css({ 'position': 'absolute', 'top': '-10px', 'right': '-10px', 'width': '30px', 'height': '30px', 'border-radius': '50%', 'font-size': '25px', 'text-align': 'center', 'line-height': '30px', 'border': '1px solid #333', 'background': 'white' }) $('.alert-in').css({ 'border': '1px solid #333', 'border-radius': '5px', 'margin-left': '30%', "background": 'white', 'width': '40%', 'position': 'relative', }) $('.alert-title').css({ 'font-size': '17px', 'border-bottom': '1px dotted #666', 'padding': '10px', title: '标题' }) $('.alert-content').css({ 'padding': '20px', title: '标题' }) $('.alert').css({ display: 'block' }) $('#close').click(function () { $('.alert').remove() }) // 点击空白黑色区域清除弹框 $(document).click(function (e) { if (($(e.target).attr('class') == 'alert')) { if (o.vanish) { $('.alert').remove() } } }) } } })(jQuery);

效果如图:
JQ封装简易弹框插件_第1张图片

你可能感兴趣的:(前端)