时间戳

首页 > 解决方案 > 有多个url参数时将2个函数合并为1个

javascript - 有多个url参数时将2个函数合并为1个

问题描述

我正在使用两个函数来打开一个 SharePoint 模式对话框，但是我看到这种情况在未来会增长，为多个 URL 创建多个函数可能会导致开销。

我不熟悉使用“选项”。是否有关于如何合并这两个功能的最佳实践？任何建议将不胜感激。谢谢！

<a href="#" onclick="OpenDashHelpDialog('Dashboard Help Desk Info');"><img src="/PublishingImages/help.png"></a>
<a href="#" onclick="OpenHRHelDeskpDialog('HR Help Desk Info');"><img src="/PublishingImages/help.png" </a>

function OpenHelpDeskDialog() {
  var options = {
    url: "/admin/Pages/IThelp.aspx",
    width: 275,
    height: 90,
    dialogReturnValueCallback: DialogCallback
  };
  SP.UI.ModalDialog.showModalDialog(options);
}

function OpenHRHelpDeskDialog() {
  var options = {
    url: "/admin/Pages/HRDesk.aspx",
    width: 400,
    height: 100,
    dialogReturnValueCallback: DialogCallback
  };
  SP.UI.ModalDialog.showModalDialog(options);
}

标签： javascriptjqueryhtmlonclicksharepoint-2013

解决方案

如果要合并事件处理程序，则需要将逻辑差异抽象到更高级别。在这种情况下，您可以使用元素本身的data属性来存储and ，并使用属性来存储 URL。像这样的东西：awidthheighthref

<a href="/admin/Pages/IThelp.aspx" class="dialog-trigger" data-width="275" data-height="90">
  <img src="/PublishingImages/help.png" />
</a>
<a href="/admin/Pages/HRDesk.aspx" class="dialog-trigger" data-width="400" data-height="100">
  <img src="/PublishingImages/help.png" />
</a>

$('.dialog-trigger').click(function(e) {
  e.preventDefault();
  var $a = $(this);

  SP.UI.ModalDialog.showModalDialog({
    url: $a.attr('href'),
    width: $a.data('width'),
    height: $a.data('height'),
    dialogReturnValueCallback: DialogCallback
  });
});

请注意，我在 jQuery 中创建了这个示例，因为这就是您的问题中标记的内容。您可以使用普通 JS 轻松实现相同的目标，尽管我强烈建议您在过时（且丑陋）的on*事件属性上使用不显眼的事件处理程序。

推荐阅读