博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【翻译】在Ext JS应用程序中使用自定义图标
阅读量:5860 次
发布时间:2019-06-19

本文共 1674 字,大约阅读时间需要 5 分钟。

原文:

作者:Lee Boonstra

Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.

正如我所做的,你喜欢Ext JS 4.2的glyphs(字形)属性么?对于glyphs,可以实现从字体中创建图标。使用图标字体的优势是,他们是矢量的,因此永远不会失真,而且可以在不使用Photoshop的情况下很容易实现样式图标,以及只需要做一次页面请求就可以下载所有的图标。

属性glyphs可应用于Ext JS按钮和面板。可以从IcoMoon这样的网站下载自定义的字体或者根据自己的样式表来实现字体。属性glyphs的值是映射到它所代表的图标的Unicode字符的十进制代码。将自定义字体的名称添加到该属性会更好,如以下代码:

glyph: '115@MyIconFont',

有大量的Ext JS组件会从面板扩展,但是否考虑过在不从Ext.panel.Panel或Ext.button.Button扩展的其他组件里实现图标字体吗?

要回答这个问题,可以从以下隐藏而实际正在实行的概念入手:
一个字符在插入到确定的DOM元素之前(或之后),能看到图标是因为该字符被样式化为包含所有图标的自定义字体(@font-face技术)。
下面自己来试试这个:

  1. 在浏览器的开发工具内,选择想实现图标的DOM元素。理想的情况下是在它的顶部放置一个CSS类(如:箭头),这样就可以很容易的从Sass中引用它。

  2. 下载图标字体并将它映射到一些字符(使用以下字符:>)。

  3. 在Sass实现图标字体。

    @font-face {    font-family: 'MyIconFont';    src: url('../resources/fonts/Nouveau.eot');    src: url('../resources/fonts/Nouveau.eot?#iefix') format('embedded-opentype'),    url('../resources/fonts/Nouveau.woff') format('woff'),    url('../resources/fonts/Nouveau.ttf') format('truetype'),    url('../resources/fonts/Nouveau.svg#Nouveau') format('svg');    font-weight: normal;    font-style: normal;}

  4.  好了,现在是见证奇迹的时刻。在Sass样式表,编写以下CSS规则:

    .arrow:before {    content: ">"; //the character mapped to an icon    font-family: 'MyIconFont'; //the name of the icon font    color: red; //set additional colors or dimensions...    margin-right: 10px;}

伪CSS选择符“:befor”会在DOM元素的左边创建图标。伪CSS选择符“:affter”会在DOM元素的右边创建图标。

现在已经了解了如何使用这项技术,就可以在任何组件来尝试它了,如模板、数据视图、表单字段等等。
想了解更多么?Sencha将在1月27日到31日在线直播提供高级Ext JS主题培训。鳄鱼看一看位于世界各地的开放式课程或参加网上培训。

转载地址:http://boejx.baihongyu.com/

你可能感兴趣的文章
Compare Version Numbers LC解题记录
查看>>
Mysql 中创建索引和索引的使用问题
查看>>
UIAlertController 介绍
查看>>
为Android开发者整理的Google I/O开发者大会第一弹
查看>>
(cons '(〇 . 前言) 《为自己写本-Guile-书》)
查看>>
JQuery tokeninput输入提示插件获取JSON数据
查看>>
一天一点linux(11):如何用U盘装Linux系统?
查看>>
Android动态设置控件长宽比的几种常见方法
查看>>
博客引入漂亮字体二三事
查看>>
ajax与jquery-pagination实现异步翻页功能
查看>>
SegmentFault 高效改版,快来内测啦!
查看>>
[LintCode] Valid Sudoku [数独]
查看>>
微信Android资源混淆打包工具,如何让应用安装包立减1M
查看>>
Druid 1.1.14 发布,阿里开源连接池
查看>>
史上最全的Java进阶书籍推荐
查看>>
docker学习系列13 实现 基于pxc 的mysql 多节点主主同步 ...
查看>>
2017-12-01 中英文代码对比之ZLOGO 4 & LOGO
查看>>
Javascript操作DOM常用API总结
查看>>
高性能计算--EHPC工业仿真最佳实践
查看>>
写技术博客那点事
查看>>