文档章节

xmlplus 组件设计系列之一 - 图标(ICON)

qudou
 qudou
发布于 2017/04/26 10:04
字数 1748
阅读 17
收藏 0
点赞 0
评论 0

图标

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

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

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'>&#xe609;<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 图标组件的直接封装,你同样失去了对图标的操作权。

© 著作权归作者所有

共有 人打赏支持
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

WPF编游戏系列 之一 布局设计

本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流。言归正传,在编写一个软件前首先要思考软件的结构与布局,图片...

junwong ⋅ 2012/03/09 ⋅ 0

移动端重构实战系列5——form元素

移动端重构实战系列5——form元素 W3CPlus2016-07-1141 阅读 重构移动元素form form 大概要实现的效果如下图(具体demo可见 sheral form ): 粗略一看,跟line list差不多,好像可以直接套用...

W3CPlus ⋅ 2016/07/11 ⋅ 0

iphone7和iphone6系列尺寸和分辨率对比图

作为一个专业的APP设计网站,每一款手机的面世,我们必须了解这个手机的尺寸、视觉效果和分辨率等参数。 然后拿现在市面上主流的手机的尺寸、分辨率、显示效果来进行对比。 之前25学堂分享的...

北方人在上海 ⋅ 2016/10/17 ⋅ 0

【开发者福利】最全面的移动端免费素材合集

在移动端设计风起云涌的今天,移动端的UI和UX设计师任重而道远。巧妇难为无米之炊,好素材就是设计师的底气。这次搜集的移动端免费素材覆盖全面,从教学资源到UI Kit,从开发工具到图标合集,...

拉偶有所依 ⋅ 2015/01/06 ⋅ 1

JavaScript 框架 xmlplus 1.5.14 发布

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

qudou ⋅ 2017/06/10 ⋅ 0

Java eleven按钮组件

1、JButton Swing的按钮组件类 构造方法 说明 JButton() 无图标,文字 JButton(Icon icon) 有图标 JButton(String text) 有文字 JButton(String text,Icon icon) 有图标文字 package Eleven...

DouDouLee ⋅ 2016/03/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

中标麒麟(龙芯版)7.0优盘安装

########################################## 制作U盘安装盘: 1.准备U盘: PMON环境下U盘必须格式化成ext3; 昆仑固件环境下可以格式化成ext3,ext4 2.把整个镜像 xxx.iso 复制到U盘下面 3....

gugudu ⋅ 2分钟前 ⋅ 0

老司机写的大数据建模五步走

本文将尝试来梳理一下数据建模的步骤,以及每一步需要做的工作。 01 第一步:选择模型或自定义模式 这是建模的第一步,我们需要基于业务问题,来决定可以选择哪些可用的模型。 比如,如果要预...

gulf ⋅ 11分钟前 ⋅ 0

PacificA 一致性协议解读

PacificA 的 paper 在 08 年左右发出来的,比 Raft 早了 6,7 年。 在 PacificA 论文中,他们强调该算法使用范围是 LAN (Local Area Network),讲白了就是对跨机房不友好。 不管是 ZAB,Raf...

黑客画家 ⋅ 14分钟前 ⋅ 0

盘符图标个性化

设置自己的专属盘符图标 准备ico格式的图片文件一个,在根目录下创建autorun.inf文件 文件内容 [Autorun]icon=logo.ico 重新启动或者插拔U盘即可看到结果...

阿豪boy ⋅ 14分钟前 ⋅ 0

Windows下QQ聊天记录中图片的默认存放位置

Windows下QQ聊天记录中图片的默认存放位置在设置中是没有说明的。 实测位置在:D:\Documents\Tencent Files\974101467\Image 其中: “974101467”为对应的QQ号; “C2C”为个人之间的聊天图...

临江仙卜算子 ⋅ 20分钟前 ⋅ 0

GC 的三种基本实现方式

参考资料《代码的未来》(作者: [日] 松本行弘)。 由于并非本人原著(我只是个“搬运工“),SO 未经本人允许请尽情转载。 另外个人像说明一下这里所说的GC指泛指垃圾回收机制,而单指Jav...

xixingzhe ⋅ 21分钟前 ⋅ 0

Android双击退出

/** * 菜单、返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if(keyCode......

王先森oO ⋅ 26分钟前 ⋅ 0

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 31分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 34分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 38分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部