脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → xmlplus组件选项卡

xmlplus组件设计系列之选项卡（Tabbar)（5）

 更新时间：2017年05月03日 09:28:17   作者：qudou  
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

这一章将设计一个选项卡组件，选项卡组件在手持设备上用的比较多，下面是一个示意图：

选项卡组成

在具体实现之前，想像一下目标组件是如何使用的，对于设计会有莫大的帮助。通过观察，可以将选项卡组件分为容器部分和子项部分，正如下面的 XML 结构所展示的。

<Tabbar id="tabbar">
  <TabItem id="home" label="首页"/>
  <TabItem id="setting" label="设置"/>
  <TabItem id="logs" label="日志"/>
  <TabItem id="about" label="关于"/>
</Tabbar>

现在我们把目光切换到选项卡组件的子项部分，来看看子项部分是如何分解的。通过示意图，你可以发现子项部分可以分解为子项容器以及包含一个图标和一个文本的子级部分。

<a id="tabitem">
  <Icon id="icon"/>
  <span id="label">首页</span>
</a>

所以，现在我们的目标已经很明确了，主要设计三个组件：图标组件 Icon、选项卡组件的子项 TabItem 以及选项卡组件的容器 Tabbar。

结构图

由于该组件比较简单，所以可以将三种子组件放置在同一层级。但请注意，我们还有四个图标组件，可以创建一个子级用于容纳它们。下面给出我们的组件结构图：

Tabbar/
├── Tabbar
├── TabItem
└── Icon/
     ├── About
     ├── Home
     ├── Logs
     └── Setting

图标的实现

我们从最简单的开始，先看四个图标组件，图标组件主要通过封装 SVG 文本来实现，由于图标文本较长，所以这里仅截取每个图标文本的一段。

About: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M507.577907 23.272727C240.142852..."/>
     </svg>`
},
Home: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M949.082218 519.343245 508.704442..."/>
     </svg>`
},
Logs: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M576 125.344l32 0 0 64-32 0 0-64Z..."/>
     </svg>`
},
Setting: {
  xml: `<svg width="48" height="48" viewBox="0 0 1024 1024">
        <path d="M512 336.664c-96.68 0-175.336 78...."/>
     </svg>`
}

请注意，这些图标位于虚拟目录 /icon 之下，也就是你要像下面这样导入：

xmlplus("ui", function (xp, $_, t) {
  $_().imports({Tabbar: {... }, TabItem: {...}});

  $_("icon").imports({--这里包含了四个图标组件--});
});

下面来实现图标组件 Icon，这里的图标组件与上面是不同的，它会根据输入的图标类型实例化不同的图标。这样设计可以复用部分相同的代码，避免冗余。

Icon: {
  css: "#icon { width: 1.5em; height: 1.5em; display: inline-block; }",
  opt: { icon: "about" },
  xml: `<span id="icon"/>`,
  fun: function (sys, items, opts) {
    sys.icon.replace("icon/" + opts.icon).addClass("#icon");
  }
}

该组件的函数项根据输入的图标类型创建图标组件并替换已有的 span 元素对象。注意，替换完后需要重新添加样式。

子项的实现

按从内到外的原则，接下来实现选项卡组件的子项 TabItem。对于此组件，需要在组件的映射项中做一次异名的属性映射，把 id 属性值映射给内部的图标组件的 icon 属性。

TabItem: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  map: {"attrs": { icon: "id->icon" } },
  xml: `<a id="tabitem">
       <Icon id="icon"/>
       <span id="label">首页</span>
     </a>`,
  fun: function (sys, items, opts) {
    sys.label.text(opts.label);
    function select() {
      sys.tabitem.addClass("#primary");
    }
    function unselect() {
      sys.tabitem.removeClass("#primary");
    }
    return { select: select, unselect: unselect };
  }
}

此组件提供了用于选项切换时选中与非选中状态之间切换的接口。以供选项卡容器使用。

选项卡的实现

最后来看下选项卡组件 Tabbar 的实现。该组件侦听了用户触击选项卡时的事件，在侦听器里主要做两件事：一是维持选项卡状态的切换；另一是派发一选项卡切换时的状态改变事件。

Tabbar: {
  css: "这里是样式项部分，为便于组件整体展示，略去...",
  xml: `<nav id="tabbar"/>`,
  fun: function (sys, items, opts) {
    var sel = this.first();
    this.on("touchend", "./*[@id]", function (e) {
      sel.value().unselect();
      (sel = this).value().select();
      this.trigger("switch", this.toString());
    });
    if (sel) sel.value().select();
  }
}

至此，一个选项卡组件算是完成了，下面来看下具体的一个应用：

xmlplus("example", function (xp, $_, t) {
  $_().imports({
  Index: {
    xml: `<Footer id='footer'/>`,
    fun: function (sys, items, opts) {
      this.on("switch", (e, target) => console.log(target));
    }
  },
  Footer: {
    xml: `<Tabbar id="footer">
         <TabItem id="home" label="首页"/>
         <TabItem id="setting" label="设置"/>
         <TabItem id="logs" label="日志"/>
         <TabItem id="about" label="关于"/>
       </Tabbar>`
  }
  });
});

在组件 Index 中，你可以侦听来自选项卡的切换事件来做相应的操作。比如结合后续我们介绍的视图栈组件做页面之间的切换操作。

本系列文章基于 xmlplus 框架。如果你对 xmlplus 没有多少了解，可以访问 www.xmlplus.cn。这里有详尽的入门文档可供参考。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS简单实现多级Select联动菜单效果代码

    JS简单实现多级Select联动菜单效果代码

    这篇文章主要介绍了JS简单实现多级Select联动菜单效果代码,涉及JavaScript数组元素的遍历及动态设置select的实现技巧,需要的朋友可以参考下
    2015-09-09
  • js中查找最近的共有祖先元素的实现代码

    js中查找最近的共有祖先元素的实现代码

    司徒正美给出的题，也尝试着写一下。希望大家多多交流。
    2010-12-12
  • JavaScript对象原型链原理详解

    JavaScript对象原型链原理详解

    这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • javascript显示隐藏层比较不错的方法分析

    javascript显示隐藏层比较不错的方法分析

    通常的解决办法是把“答案”当作整个问题容器的子元素，然后点击父元素上的按钮后展开对应的子元素。通过父子元素的对应关系来匹配标题和答案。
    2008-09-09
  • JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false

    JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false

    这篇文章主要给大家介绍了关于JS鲜为人知的问题之[] == ![]结果为true、而{} == !{}却为false的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

    JS中判断字符串中出现次数最多的字符及出现的次数的简单实例

    下面小编就为大家带来一篇JS中判断字符串中出现次数最多的字符及出现的次数的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS完成画圆圈的小球

    JS完成画圆圈的小球

    本文主要介绍了JS完成画圆圈的小球的实例，具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js实现json数组分组合并操作示例

    js实现json数组分组合并操作示例

    这篇文章主要介绍了js实现json数组分组合并操作,涉及javascript针对json数组的遍历、判断、添加、赋值等相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • 微信小程序分享海报生成的实现方法

    微信小程序分享海报生成的实现方法

    为了吸引更多的用户，设计好一个分享海报还是很有必要的，这篇文章主要介绍了微信小程序分享海报生成的实现方法，非常具有实用价值，需要的朋友可以参考下
    2018-12-12
  • JavaScript展开运算符用法及实际应用详解

    JavaScript展开运算符用法及实际应用详解

    展开运算符是JavaScript中的语法糖,用三个点(...)表示,广泛应用于数组和对象的操作,本文介绍了其基本用法,如在数组和对象中的应用,合并数组或对象,更新对象属性等,还探讨了展开运算符的高级应用,需要的朋友可以参考下
    2024-09-09

最新评论