jQuery弹出框代码封装DialogHelper

  看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常粗糙。思路对了,后续再封装成什么样都不过是形式而已,希望这个思路能给大家点启迪,同时欢迎大家开拓思维,提出更好的改进意见。

  

复制代码 代码如下:

  //require ScrollHelper.js

  function DialogHelper() {

  var _this = this;

  var doc = window.document;

  _this.maskDiv = null;

  _this.contentDiv = null;

  var options = {

  opacity: 0.4

  };

  this.popup = function (contentdiv, optionArg) {

  if (optionArg) {

  for (var prop in optionArg) {

  options[prop] = optionArg[prop];

  }

  }

  _this.contentDiv = contentdiv || _this.contentDiv;

  _this.maskDiv = $('<div>');

  _this.maskDiv.addClass('MaskDiv');

  _this.maskDiv.css({

  'filter': "Alpha(opacity=" + ( options.opacity - "0" ) * 100 + ");",

  'opacity': options.opacity,

  'display': 'block'

  });

  $(doc.body).append(_this.maskDiv);

  if (_this.contentDiv) {

  $(doc.body).append(_this.contentDiv);

  _this.contentDiv.show();

  _this.contentDiv.draggable({

  containment: "document",

  cursor: 'move',

  handle: ".Dialog_Head"

  });

  $(_this.maskDiv).on("mousemove", function() {

  $("body").preventScroll();

  });

  $(_this.maskDiv).on("mouseout", function() {

  $("body").liveScroll();

  });

  if ($(".cke").length == 0 && $(".Dialog_Body").length > 0) {

  $(".Dialog_Body").preventOuterScroll();

  }

  }

  };

  this.remove = function () {

  if (_this.contentDiv) {

  _this.contentDiv.remove();

  }

  if (_this.maskDiv) {

  _this.maskDiv.remove();

  }

  $("body").liveScroll();

  };

  this.formatPercentNumber = function (value, whole) {

  if (isNaN(value) && typeof value === "string") {

  if (value.indexOf("%") !== -1) {

  value = (value.replace("%", "") / 100) * whole;

  } else if (value.indexOf("px") !== -1) {

  value = value.replace("px", "");

  }

  }

  return Math.ceil(value);

  };

  this.position = function (dialog, dialogBody, minusHeight) {

  dialog = dialog || $(".ShowDialogDiv");

  if (dialog[0]) {

  var clientWidth = document.documentElement.clientWidth;

  var clientHeight = document.documentElement.clientHeight;

  var width = _this.formatPercentNumber(dialog.data("position").width, clientWidth) || dialog.width();

  var height = _this.formatPercentNumber(dialog.data("position").height, clientHeight) || dialog.height();

  width = width < 300 ? 300 : width;

  height = height < 450 ? 450 : height;

  $(dialog).css({

  "width": width + "px",

  "height": height + "px",

  "top": Math.ceil((clientHeight - height) / 2) + "px",

  "left": Math.ceil((clientWidth - width) / 2) + "px"

  });

  dialogBody = dialogBody || $(".Dialog_Body");

  if (dialogBody[0]) {

  minusHeight = minusHeight || ($(".Dialog_Head").outerHeight() + $(".Dialog_Foot").outerHeight());

  var dialogBodyHeight = height - minusHeight;

  dialogBody.height(dialogBodyHeight);

  }

  }

  }

  }

  var createDialogTemplate = function (optionArg, contentHtml, saveBtnClickHandler) {

  var options = {

  "Action": "",

  "Title": "",

  "Width": "50%",

  "Height": "50%"

  };

  if (optionArg) {

  for (var prop in optionArg) {

  options[prop] = optionArg[prop];

  }

  }

  var newDialog = $("<div class='ShowDialogDiv' id='Dialog_" + options.Title + "'>");

  var DialogHead = $("<div class='Dialog_Head'>").appendTo(newDialog);

  $("<span class='HeadLabel'>").html(options.Action + " " + options.Title).appendTo(DialogHead);

  var DialogClose = $("<span class='DialogClose'>").appendTo(DialogHead);

  var DialogBody = $("<div class='Dialog_Body'>").html(contentHtml).appendTo(newDialog);

  var DialogFoot = $("<div class='Dialog_Foot'>").appendTo(newDialog);

  var newDiv = $("<div class='Right'>").appendTo(DialogFoot);

  var ActionCancelDiv = $("<div class='ActionButtonContainer' title='Cancel'>").appendTo(newDiv);

  DialogClose.on("click", function() {

  dialogHelper.remove();

  });

  ActionCancelDiv.on("click", function() {

  dialogHelper.remove();

  });

  var newA = $("<div class='ActionButton' id='ActionButtonCancel'>").appendTo(ActionCancelDiv);

  $("<div class='Icon Cancel'>").appendTo(newA);

  $("<div class='Title IconTitle'>").html("Cancel").appendTo(newA);

  var ActionSaveDiv = $("<div class='ActionButtonContainer' title='Save'>").appendTo(newDiv);

  var newB = $("<div class='ActionButton ActionButtonAttention' id='ActionButtonSave'>").appendTo(ActionSaveDiv);

  newB.on('click', function () {

  if (typeof saveBtnClickHandler == "function") {

  saveBtnClickHandler();

  }

  });

  $("<div class='Icon Save'>").appendTo(newB);

  $("<div class='Title IconTitle SaveButton'>").html("Save").appendTo(newB);

  var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight();

  newDialog.data("position", {

  width: options.Width,

  height: options.Height

  });

  dialogHelper.position(newDialog, DialogBody, minusHeight);

  return newDialog;

  };

  var changeDialogLayout = function(optionArg, dialogObj) {

  var options = {

  "Width": "70%",

  "Height": "90%"

  };

  if (optionArg) {

  for (var prop in optionArg) {

  options[prop] = optionArg[prop];

  }

  }

  var DialogBody = $(dialogObj).find(".Dialog_Body");

  var DialogHead = $(dialogObj).find(".Dialog_Head");

  var DialogFoot = $(dialogObj).find(".Dialog_Foot");

  var other =  Math.round(DialogBody.css("padding-top").replace(/[a-z]/ig, "")) + Math.round(DialogBody.css("padding-bottom").replace(/[a-z]/ig, ""));

  var minusHeight = DialogHead.outerHeight() + DialogFoot.outerHeight() + other;

  dialogObj.data("position", {

  width: options.Width,

  height: options.Height

  });

  dialogHelper.position(dialogObj, DialogBody, minusHeight);

  };

  以上就是本文所分享的全部内容了,希望大家能够喜欢。