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


Posted in Javascript onMay 05, 2017

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

PNG 图标

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

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

这里假定图标文件与组件所在文件在同级目录中,于是可以按如下的方式便捷地引用所需的图标。注意组件 Icon 巧妙地使 id 属性值与图片文件名关联,这样可以避免创建额外的属性。

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }",
  xml: "<div id='example' class='bs-example'>\
      <Icon id='msg'/>\
      <Icon id='home'/>\
      <Icon id='contact'/>\
     </div>"
}

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

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

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

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

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

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

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

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

字体图标

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

通过类名引用

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

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

直接引用unicode

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

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

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

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

SVG 图标

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

通过 xlink:href 引用

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

<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,下面是一个示例。

<svg>
  <use xlink:href='http://example.com/file.svg#icon'/>\
</svg>

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

<svg>
  <use xlink:href='#icon'/>\
</svg>

对svg 图标的直接封装

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

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 属性值给出。下面来看看如何使用该图标。

Example: {
  css: "#example > * { padding: 10px; background: #F9F9F9; }\
     #example > *:hover { fill: #fff; background: #563d7c; }",
  xml: "<div id='example'>\
      <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 中给出。就像下面这样子。

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 编码后的内嵌引用。下面是一个简单的示范:

Icon: {
  xml: "<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIcAAA..." />"
}

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本安需导入(装载)的三种模式的对比
Jun 24 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JavaScript严格模式详解
Nov 18 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
基于jquery插件实现拖拽删除图片功能
Aug 27 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 #Javascript
Vue中使用vux的配置详解
May 05 #Javascript
Angular directive递归实现目录树结构代码实例
May 05 #Javascript
微信小程序开发图片拖拽实例详解
May 05 #Javascript
javascript 中关于array的常用方法详解
May 05 #Javascript
You might like
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
PHP函数utf8转gb2312编码
2006/12/21 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP 搜索查询功能实现
2016/11/29 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
JavaScript中String和StringBuffer的速度之争
2010/04/01 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
python访问纯真IP数据库的代码
2011/05/19 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
大学生怎样进行自我评价
2013/12/07 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
小学运动会报道稿
2014/10/04 职场文书
2014年纪检工作总结
2014/11/12 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
婚礼答谢词范文
2015/09/29 职场文书
SQL Server数据库备份和恢复数据库的全过程
2022/06/14 SQL Server