网页上使用的图标分可为三种:文件图标、字体图标和 SVG 图标。对于文件图标,下面仅以 PNG 格式来说明。

PNG 图标

对于 PNG 图标的引用,有两种方式。一种是直接由 HTML 元素 img 的 src 属性给出。下面是一个简单的示例。

// 01-01
Icon: {
css: `#icon { width: 68px; height: 68px; }`,
xml: `<img id='icon'/>`,
fun: function (sys, items, opts) {
this.attr("src", "img/" + this + ".png");
}
}

这个示例的图标文件位于组件所在文件的子级目录 img/ 中。我们可以按如下的方式便捷地引用所需的图标。注意组件 Icon 巧妙地使 id 属性值与图片文件名关联,这样可以避免创建额外的属性。

// 01-01
<div id='index'>
<Icon id='msg'/>
<Icon id='home'/>
<Icon id='contact'/>
</div>

另一种引用 PNG 图标的方式是给相应的对象添加 background-image 样式,并且由样式中给出图标所在路径。下面是一个简单的示例。

// 01-02
Icon: {
css: `#icon { width: 68px; height: 68px; }`,
xml: `<div id='icon'/>`,
fun: function (sys, items, opts) {
this.css("background-image", "url(img/" + this + ".png)");
}
}

这种形式与前面由 img 标签给出的图标有许多相似之处。不同的是,前者动态指定的是 img 标签的 src 值 ,而后者动态指定的则是 div 元素的 css 样式。该组件与前面给出的 Icon 组件的使用方式完全一致,这里就不重复了。

对于以上给出的组件 Icon,使用的是离散的图标文件。实际应用中,通常给出的是一个包含许多图标的 PNG 文件。这种情况下该如何构建图标组件呢?请看下面给出的一种较为实用的方案。

// 01-03
Icon: {
css: `#msg { background-position: 0 0; }
#home { background-position: 0 -48px; }
#contact { background-position: 0 -96px; }
#icon { width: 68px; height: 68px; background-image: url(img/icons.png); }`,
xml: `<div id='icon'/>`,
fun: function (sys, items, opts) {
sys.icon.addClass("#" + this);
}
}

此组件在样式项 css 中直接给出了图标文件所在路径,以及各种图标在文件内的位置。并且图标实例 id 与相应图标类名对应。当然,组件的使用方式与前面给出的组件是一致的。

下面给出的是另一种组件设计方案,它把位置信息移到了函数项中。此方案是可行的,但组件的执行效率不如前者。该组件每次实例化都要生成位置信息一次,而对于前者,由于样式项在组件实例化时,仅生成一次,所以保证了组件的执行性能。

// 01-04
Icon: {
css: `#icon { width: 48px; height: 48px; background-image: url(img/icons.png); }`,
xml: `<div id='icon'/>`,
fun: function (sys, items, opts) {
var positions = {
"msg": "0 0",
"home": "0 -48px",
"contact": "0 -96px"
};
sys.icon.css("background-position", positions[this]);
}
}

注意,以上给出的一些图标组件的设计技巧同样也适用于图片组件的设计。

字体图标

字体图标通过引入包含图标的字体文件,将图标像文字一样使用。它与 PNG 图标相比,最关键一点在于它的矢量性。字体图标的引用方式有两种:通过类名的引用方式以及直接引用 unicode 的方式。

通过类名引用

这种类型的图标内容定义在样式项中,HTML 元素通过类名进行关联。

// 01-05
Msg: {
css: `#msg { font-size: 48px; width: 48px; height: 48px; line-height: 48px; }
#msg:before { content: '\\e608'; }`,
xml: "<div id='msg'/>"
}

直接引用 unicode

这种引用方式与前一种在本质上没什么不同,它只是将图标内容由样式项转移到视图项中而已。

// 01-05
Home: {
css: `#home { font-size: 48px; width: 48px; height: 48px; line-height: 48px; }`,
xml: `<div id='home'><div/>`
}

下面给出的示例展示了两种不同的引用字体图标的方式。注意,此示例简化了样式项中与兼容性相关的内容,详情请查阅配套源码。

// 01-05
Index: {
css: `@font-face { font-family: 'iconfont'; url('font/iconfont.ttf') format('truetype');}
#msg, #home { font-family: 'iconfont'; font-style:normal; }
#index > * { display: inline-block; padding: 10px; background: #F9F9F9; }`,
xml: `<div id='index'>
<Msg id='msg'/>
<Home id='home'/>
</div>`
}

SVG 图标

最后来看看我们的重头戏,如何封装以及使用 SVG 图标。在 xmlplus 中,SVG 图标是推荐的图标使用形式,它允许直接嵌入代码,无需额外引用相关文件。

通过 xlink:href 引用

对于这种方式,首先你需要一个 svg 图标集,其包含的内容大概是下面这样子。

<!-- 01-06 -->
<svg>
<symbol id="icon" width='48px' height='48px' viewBox='0 0 24 24'>
<g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
</symbol>
<!-- 还可以有更多的symbol -->
</svg>

svg 图标集有两种存在方式,一个是以文件形式存在,这时 xlink:href 属性值需要明确指明文件的 url,下面是一个示例。

<!-- 01-06 -->
<svg>
<use xlink:href='http://example.com/file.svg#home'/>\
</svg>

另一种形式是,图标集直接存在于页内,这种方式叫做页内引用,它无需指明 url,只要指定相应 symbol 的 ID 值就好了。

<!-- 01-07 -->
<svg>
<use xlink:href='#home'/>\
</svg>

对 svg 图标的直接封装

相对于通过 xlink:href 引用图标,使用 xmlplus 的组件化技术直接封装会是一种更好的方式。请看下面的一个 SVG 图标组件。

// 01-08
Icon: {
xml: "<svg width='48px' height='48px' viewBox='0 0 24 24'>\
<g><polygon points='9,16.2 4.8,12 3.4,13.4 9,19 21,7 19.6,5.6'/></g>\
</svg>",
fun: function (sys, items, opts) {
this.attr("fill", '' + this);
}
}

这是一个钩形图标,组件中仅包含视图项以及函数项成份。根据函数项的内容可以知道,图标颜色由组件实例的 id 属性值给出。下面来看看如何使用该图标。

// 01-08
Index: {
css: `#example > * { padding: 10px; background: #F9F9F9; }
#example > *:hover { fill: #fff; background: #563d7c; }`,
xml: `<div id='index'>
<Icon id='red'/>
<Icon id='green'/>
<Icon id='blue'/>
</div>`,
fun: function (sys, items, opts) {
sys.example.on("click", "*", e => console.log(this + " clicked"));
}
}

此示例展示了三个不同颜色的图标,并且侦听了图标的点击事件,打开浏览器控制台,当点击不同图标时,可以看到相应的输出。

另外,有一种常见的 SVG 图标的封装方式,它把 SVG 文本经过 URL 编码后直接在 img 的 src 属性或者样式 background-image 中给出。就像下面这样子。

// 01-09
Icon: {
css: `#icon {width: 16px; height: 16px; background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D...')}`,
xml: "<div id='icon'/>"
}

这种方式与上一种方式比起来,有两个缺点:其一,你看不出 SVG 的源文件。其二,你失去了对 SVG 图标的操作权。当然,这种方式也并非不能用。如果你不需要对图标进行后续的操作,使用这种方式也是可以接受的。另外,与之相似的一种图标使用方式是对图标 base64 编码后的内嵌引用。下面是一个简单的示范:

// 01-10
Icon: {
xml: `<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA...' />`
}

这种方式与上一种 SVG 图标的封装方式是类似的。不过相对于 SVG 图标组件的直接封装,你同样失去了对图标的操作权。

xmlplus 组件设计系列之一 - 图标的更多相关文章

  1. xmlplus 组件设计系列之零 - xmlplus 简介

    xmlplus 是什么 xmlplus 是博主写的一个 JavaScript 框架,用于快速开发前后端项目. xmlplus 基于组件设计,组件是基本的构造块.评价组件设计好坏的一个重要标准是封装度. ...

  2. xmlplus 组件设计系列之五 - 选项卡

    这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...

  3. xmlplus 组件设计系列之二 - 按钮

    除了图标以外,按钮也许是最简单的组件了,现在来看看如何定义按钮组件. 使用原生按钮组件 在 xmlplus 中,HTML 元素也以组件的方式存在.所以,你可以直接通过使用 button 标签或者 in ...

  4. xmlplus 组件设计系列之九 - 树(Tree)

    树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对 ...

  5. xmlplus 组件设计系列之六 - 下拉刷新

    "下拉刷新"由著名设计师 Loren Brichter 设计,并应用于 Twitter 第三方应用 Tweetie 中.2010年4月,Twitter 收购 Tweetie 开发商 ...

  6. xmlplus 组件设计系列之八 - 分隔框(DividedBox)

    分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则 ...

  7. xmlplus 组件设计系列之十 - 网格(DataGrid)

    这一章我们要实现是一个网格组件,该组件除了最基本的数据展示功能外,还提供排序以及数据过滤功能. 数据源 为了测试我们即将编写好网格组件,我们采用如下格式的数据源.此数据源包含两部分的内容,分别是表头数 ...

  8. xmlplus 组件设计系列之四 - 列表

    列表组件是极其常用的一类组件,是许多视图组件系统的必须包含的.列表可以做的很简单,只显示简洁的内容.列表也可以做的很复杂,用于展示非常丰富的内容. 组成元素 列表离不开列表项以及包含列表项的容器.下面 ...

  9. xmlplus 组件设计系列之三 - 文本框

    文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...

随机推荐

  1. noip2008-t3

    [题目描述] 小渊和小轩是好朋友也是同班同学,他们在一起总有谈不完的话题.一次素质拓展活动中,班上同学安排做成一个m行n 列的矩阵,而小渊和小轩被安排在矩阵对角线的两端,因此,他们就无法直接交谈了.幸 ...

  2. 按Enter键后Form表单自动提交的问题

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  3. springMVC之applicationcontext.xml配置说明

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  4. jboss加密敏感信息

    默认情况下,我们配置在domain.xml或host.xml文件中的信息都是明文,对一些敏感信息就显得安全性不够,可以使用jboss提供的vault机制来进行加密 下面的内容来自 http://www ...

  5. repeater控件实现分页

    repeater控件实现排序的方法,今天我再向大家介绍repeater控件如何实现分页的效果. 分页分为真分页和假分页. 真分页:控件上一页需要显示多少数据,就从数据库取出并绑定多少数据,每次换页时都 ...

  6. robomongo

    Robomongo 是一个可视化的mongodb数据库工具,提供对mongodb的操作,javascript执行及语法高亮提示. 安装教程

  7. Python IDLE快捷键一览

    编辑状态时:Ctrl + [ .Ctrl + ] 缩进代码Alt+3 Alt+4 注释.取消注释代码行Alt+5 Alt+6 切换缩进方式 空格<=>TabAlt+/ 单词完成,只要文中出 ...

  8. CXF整合spring

    近公司需要弄webservics,还说不用框架整合(提倡使用hessian,他们既然说与操作系统有兼容问题,由于人员单薄,不得不屈服,哎),我想了老半天没弄明白他说的不用框架整合spring,尝试过直 ...

  9. 3rd,Python登录模拟

    需求: 1. 用户输入帐号密码进行登陆 2. 用户信息保存在文件内 3. 用户密码输入错误三次后锁定用户 #导入getpass库,用于密码验证 import getpass #定义用户名.密码 _us ...

  10. mybatis 相关

    一.mybatis转义问题 mybatis中SQL在 mapper.xml 中书写时,如果有  < .>.<=.>=  时会出错,应该使用转义的写法. 写法一  转义 < ...