如何使用点导航构建UIkit灯箱

在本教程中，您将学习如何从UIkit（一个前端框架）扩展超级有用的灯箱组件，通过添加一个点导航，这要归功于它的dotnav 组件。

咱们的 UIkit 灯箱扩展

事不宜迟，这就是咱们将要创建的内容（单击图像以显示灯箱）：

See the Pen How to Build a UIkit Lightbox With Dot Navigation by Envato Tuts+ (@tutsplus) on CodePen.

1.包括所需的资产

与任何第三方框架或库一样，要使用它，咱们首先必须安装它所需的文件。

UIkit 至少需要两个文件：一个 css 和一个 javascript 文件。如果您想使用UIkit 图标，可以选择包含另一个 JavaScript 文件。

考虑到这一点，如果您查看咱们演示笔的设置选项卡，您会看到有一个外部 CSS 文件和一个外部 javaScript 文件。

2.创建图像网格

首先，咱们将利用UIkit 的网格系统来构建一个简单的图像网格。

让咱们做一些笔记：

该article元素将充当灯箱容器。它里面的所有链接都是灯箱链接。他们每个人都有一个data-caption和一个data-alt属性。alt他们的工作是为相关的灯箱图像添加标题和属性。
稍后咱们将通过 JavaScript 初始化灯箱。
对于图像，咱们将使用从最近的教程中拍摄的一些Unsplash照片。
由于图像组件，咱们将延迟加载图像。

这是所需的标记：

<article class="post">
  <div class="uk-container">
    <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <figure>
          <a href="ireland1.jpg" data-caption="Ring of Kerry, County Kerry, Ireland" data-alt="Ring of Kerry, County Kerry, Ireland">
            <img width="1920" height="1280" data-src="ireland1.jpg" alt="Ring of Kerry, County Kerry, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="ireland2.jpg" data-caption="Fintown, Ireland" data-alt="Fintown, Ireland">
            <img width="1920" height="1280" data-src="ireland2.jpg" alt="Fintown, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="ireland3.jpg" data-caption="Anne Street, Dublin, Ireland" data-alt="Anne Street, Dublin, Ireland">
            <img width="1920" height="1280" data-src="ireland3.jpg" alt="Anne Street, Dublin, Ireland" uk-img>
          </a>
        </figure>
      </div>
      <div>
        <figure>
          <a href="ireland4.jpg" data-caption="Doonagore Castle, Doolin, Ireland" data-alt="Doonagore Castle, Doolin, Ireland">
            <img width="1920" height="1280" data-src="ireland4.jpg" alt="Doonagore Castle, Doolin, Ireland" uk-img>
          </a>
        </figure>
      </div>
    </div>
  </div>
</article>

3.创建 UIkit 灯箱

虽然可以选择通过将uk-lightbox属性添加到.post元素来激活 UIkit 灯箱，但让咱们通过 JavaScript 来完成，因为咱们想稍后调用它的show()方法：

1	const postLightbox = UIkit.lightbox(".post");

正如您在下面的演示中所见，只需一行代码，咱们就成功地创建了一个功能齐全的 UIkit 灯箱。

See the Pen How to Build a UIkit Lightbox by Envato Tuts+ (@tutsplus) on CodePen.

关于 UIkit 事件

在这一点上，咱们已经准备好更进一步，按照咱们的意愿扩展灯箱。为了完成这个任务，咱们将使用灯箱的可用自定义事件。让咱们在这里稍作停留并解释一些事情。

UIkit 使用一种特殊的语法来捕获事件，如此处所述，如下所示：

UIkit.util.on("#offcanvas", "show", function () {...});

在咱们的例子中，灯箱不是初始 dom 的一部分，所以这样的事情不会起作用：

UIkit.util.on(".uk-lightbox", "beforeshow", function () {...});

相反，咱们应该这样做：

UIkit.util.on(document, "beforeshow", function (e) {...});

// or more specifically this
UIkit.util.on(document, "beforeshow", ".uk-lightbox", function (e) {...});

请注意，咱们利用了事件委托并将事件附加到document元素。然后，通过target 特定事件的属性，咱们将检查发生事件的元素。

咱们现在将看到他们的行动！

创建点导航

作为第一步，咱们必须创建点导航并将其附加到灯箱。为此，咱们将监听灯箱的beforeshow事件并执行以下操作：

根据灯箱项目的数量构建点导航标记。同样，此标记将来自 dotnav 组件。
将点导航附加到灯箱，并通过uk-position-top-center实用程序类将其放置在顶部中心位置。
将uk-light实用程序类添加到灯箱中，为点指示器提供浅色（白色）。

这是所需的代码：

UIkit.util.on(document, "beforeshow", function (e) {
  // 1
  const target = e.target;
  const lightboxItems = target.queryselectorAll(".uk-lightbox-items li").length;
  let markup = '<ul class="uk-dotnav">';
  for (let i = 0; i < lightboxItems; i++) {
    markup += '<li><a href=""></a></li>';
  }
  markup += "</ul>";
  // 2
  const dotNav = document.createElement("div");
  dotNav.setAttribute("class", "uk-position-top-center");
  dotNav.innerhtml = markup;
  target.appendChild(dotNav);
  // 3
  target.classList.add("uk-light");
});

设置活动点项目

作为第二步，咱们必须声明活动的点导航项。为此，咱们将监听灯箱的itemshown事件并执行以下操作：

uk-active从（预先存在的）活动点项目中删除类，如果有的话。
查找当前活动灯箱项目（图像）的索引。
将uk-active类分配给其索引与此灯箱项目的索引匹配的点项目。

这是所需的代码：

const ukActiveClass = "uk-active";

UIkit.util.on(document, "itemshown", function (e) {
  const target = e.target;
  const dotNav = document.querySelector(".uk-dotnav");
  // 1
  const dotNavActiveItem = dotNav.querySelector("li.uk-active");
  if (dotNavActiveItem) {
    dotNavActiveItem.classList.remove(ukActiveClass);
  }
  // 2
  let index = [...target.parentElement.children].indexOf(target);
  // 3
  dotNav.querySelector(`li:nth-child(${++index})`).classList.add(ukActiveClass);
});

点击点链接

最后，点链接应在单击时显示相应的灯箱项目。为此，每次单击此类链接时，咱们将执行以下操作：

阻止其默认操作。
找到它的索引。
使用 availableshow()方法显示关联的灯箱项目。

这是所需的代码：

document.addeventListener("click", function (e) {
  const target = e.target;
  if (target.tagName.toLowerCase() === "a" && target.closest(".uk-dotnav")) {
    // 1
    e.preventDefault();
    // 2
    const parentListItem = target.parentElement;
    const index = [...parentListItem.parentElement.children].indexOf(
      parentListItem
    );
    // 3
    postLightbox.show(index);
  }
});