文档章节

xmlplus 组件设计系列之五 - 选项卡(Tabbar)

qudou
 qudou
发布于 2017/04/26 11:39
字数 1168
阅读 53
收藏 0
点赞 0
评论 0

选项卡

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

<img src="http://www.xmlplus.cn/img/tabbar.png" class="img-responsive"/>

选项卡组成

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

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

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

<!-- 05-01 -->
<a id="tabitem">
    <Icon id="icon"/>
    <span id="label">首页</span>
</a>

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

结构图

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

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

图标的实现

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

// 05-01
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 之下,也就是你要像下面这样导入:

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

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

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

// 05-01
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 属性。

// 05-01
TabItem: {
    css: `a#tabitem { display: table-cell; overflow: hidden; width: 1%; height: 50px; text-align: center; ... }
          #label { display: block; font-size: .75em; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; }
          a#primary { color: #337ab7; fill: currentColor; }`,
    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(bool) {
            sys.tabitem[bool ? 'addClass' : 'removeClass']("#primary");
        }
        return Object.defineProperty({}, "selected", { set: select});
    }
}

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

选项卡的实现

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

// 05-01
Tabbar: {
    css: `#tabbar { display: table; width: 100%; height: 50px; padding: 0; table-layout: fixed; -webkit-touch-callout: none; }
          #tabbar { z-index: 10; background-color: #f7f7f7; backface-visibility: hidden; }`,
    xml: `<nav id="tabbar"/>`,
    fun: function (sys, items, opts) {
        var sel = this.first();
        this.on("touchend", "./*[@id]", function (e) {
            sel.value().selected = false;
            (sel = this).value().selected = true;
            this.trigger("switch", this.toString());
        });
        if (sel) sel.value().selected = true;
    }
}

至此,一个选项卡组件算是完成了,下面来看下具体的一个测试示例。注意,最好在 chrome 浏览器的移动模式下做测试,这样 touchend 事件才会生效。

// 05-01
Index: {
    xml: `<Tabbar id="index">
              <TabItem id="home" label="首页"/>
              <TabItem id="setting" label="设置"/>
              <TabItem id="logs" label="日志"/>
              <TabItem id="about" label="关于"/>
          </Tabbar>`,
    fun: function (sys, items, opts) {
        this.on("switch", (e, target) => console.log(target));
    }
}

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

© 著作权归作者所有

共有 人打赏支持
qudou

qudou

粉丝 5
博文 11
码字总数 14933
作品 2
福州
程序员
全栈 JavaScript 框架 xmlplus 1.5.9 发布

该版本主要对全局函数 clearLibrary 作了简化,另外对文档的一些文字错误进行了修正,同时保持了 gitHub 与 npm 版本之间的同步。 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发...

qudou ⋅ 2017/04/30 ⋅ 16

全栈 JavaScript 框架--xmlplus

xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏的一个重要标准是封装度。基于 xmlplus 设计的组...

qudou ⋅ 2017/04/21 ⋅ 1

xmlplus v1.5.8 正式发布 - 全栈 JavaScript 框架

全栈 JavaScript 框架 xmlplus v1.5.8 正式发布 xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 基于组件设计 在 xmlplus 中,组件是基本的构造块。评价组件设计好坏...

qudou ⋅ 2017/04/27 ⋅ 2

JavaScript 框架 xmlplus 1.5.12 发布

JavaScript 框架 xmlplus 1.5.12 发布了。xmlplus 是一个设计非常独特 JavaScript 框架,用于快速开发前后端项目。 这个版本主要添加了一个全局接口 create。该函数是一个轻量的用于创建组件...

qudou ⋅ 2017/05/24 ⋅ 0

vue mint tabbar 组件 使用

网址 http://mint-ui.github.io/docs/#/zh-cn2/tabbar 底部选项卡,点击 tab 会切换显示的页面。依赖 tab-item 组件。 实现底部选项卡切换页面功能 是真滴方便。。。只需要设置图标和文字就行...

阿豪boy ⋅ 03/29 ⋅ 0

移动开发之微信小程序——资料集合

本文转载自:知乎 有需要下载的客官可可以点击知乎去下载相关资料 一:官方地址集合: 1:官方工具:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1476434678461 2:...

DJY1992 ⋅ 2016/12/21 ⋅ 0

Spark 架构和组件集的简要概述

Spark 架构和组件集的简要概述 Flex 4 提供的 Spark 组件 Flex 4 目前提供各种 Spark 组件。Flex 的后续版本将提供更多 Spark 控件,与 MX 组件集并驾齐驱。要进一步了解各个 Spark 组件或控...

付翔 ⋅ 2010/05/24 ⋅ 0

关于UITabBar各部分自定义的代码片段

一、自定义TabBar选项卡背景 默认UITabBarController的TabBar背景是黑色的,如何自定义成背景图片呢? UITabBarController *tabBarController = [[UITabBarController alloc] init];// 获取选...

萨斯辈的呼唤 ⋅ 2014/08/13 ⋅ 0

JavaScript 框架 xmlplus 1.5.14 发布

JavaScript 框架 xmlplus 1.5.14 发布了。更新如下: 将原先对于 xmldom 模块的依赖改为 exmldom。exmldom 模块是对 xmldom 模块的扩展,添加了事件支持。也就是说,你可以像前端那样在 dom ...

qudou ⋅ 2017/06/10 ⋅ 0

04、RN wx 实践01--基本架构搭建

微信基本框架.png 版权声明:本文为博主原创文章,未经博主允许不得转载 PS:转载请注明出处 作者: TigerChain 地址: http://www.jianshu.com/p/8743156d3b61 本文出自 TigerChain 简书 RN 系...

TigerChain ⋅ 2017/10/16 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

骰子游戏代码开源地址

因为阿里云现在服务器已经停用了,所以上面的配置已经失效。 服务端开源地址:https://gitee.com/goalya/chat4.git 客户端开源地址:https://gitee.com/goalya/client4.git 具体运行界面请参考...

算法之名 ⋅ 35分钟前 ⋅ 0

设计模式--装饰者模式

装饰者模式 定义 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比生成子类更为灵活。 通用类图 意图 动态地给一个对象添加一些额外的职责。就增加功能来说,装饰模式相比...

gaob2001 ⋅ 今天 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 今天 ⋅ 0

sbt网络问题解决方案

转自:http://dblab.xmu.edu.cn/blog/maven-network-problem/ cd ~/.sbt/launchers/0.13.9unzip -q ./sbt-launch.jar 修改 vi sbt/sbt.boot.properties 增加一个oschina库地址: [reposit......

狐狸老侠 ⋅ 今天 ⋅ 0

大数据,必须掌握的10项顶级安全技术

我们看到越来越多的数据泄漏事故、勒索软件和其他类型的网络攻击,这使得安全成为一个热门话题。 去年,企业IT面临的威胁仍然处于非常高的水平,每天都会看到媒体报道大量数据泄漏事故和攻击...

p柯西 ⋅ 今天 ⋅ 0

Linux下安装配置Hadoop2.7.6

前提 安装jdk 下载 wget http://mirrors.hust.edu.cn/apache/hadoop/common/hadoop-2.7.6/hadoop-2.7.6.tar.gz 解压 配置 vim /etc/profile # 配置java环境变量 export JAVA_HOME=/opt/jdk1......

晨猫 ⋅ 今天 ⋅ 0

crontab工具介绍

crontab crontab 是一个用于设置周期性被执行的任务工具。 周期性执行的任务列表称为Cron Table crontab(选项)(参数) -e:编辑该用户的计时器设置; -l:列出该用户的计时器设置; -r:删除该...

Linux学习笔记 ⋅ 今天 ⋅ 0

深入Java多线程——Java内存模型深入(2)

5. final域的内存语义 5.1 final域的重排序规则 1.对于final域,编译器和处理器要遵守两个重排序规则: (1)在构造函数内对一个final域的写入,与随后把这个被构造对象的引用赋值给一个引用...

江左煤郎 ⋅ 今天 ⋅ 0

面试-正向代理和反向代理

面试-正向代理和反向代理 Nginx 是一个高性能的反向代理服务器,但同时也支持正向代理方式的配置。

秋日芒草 ⋅ 今天 ⋅ 0

Spring 依赖注入(DI)

1、Setter方法注入: 通过设置方法注入依赖。这种方法既简单又常用。 类中定义set()方法: public class HelloWorldOutput{ HelloWorld helloWorld; public void setHelloWorld...

霍淇滨 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部