Sencha Touch 2.2以上自定义图标教程:字体与性能优化
需积分: 10 173 浏览量
更新于2024-08-13
收藏 1.76MB PPT 举报
在Sencha Touch 2.2及后续版本中,由于对移动设备屏幕特性的适应性和性能优化的需求,Sencha Touch开始采用字体图标(font icons)替代传统的图片图标。这是因为在HTML5开发中,为不同分辨率的设备提供清晰图片资源是一项挑战,因为位图图像在放大时容易失真。字体图标作为矢量图形,无论缩放多少倍都能保持清晰,并且通过CSS样式控制方便,还能减小文件大小和加快加载速度。
要使用Sencha Touch中的自定义图标,首先要知道Sencha Architect 3中默认集成了名为"Pictos"的字体图标集。这些图标包括如"user"和"locate"等,它们在`appPath\touch\resources\themes\stylesheets\sencha-touch\base\mixins\_Class.scss`文件中定义,通过`iconCls`属性引用。
以下是使用内置图标和自定义图标的方法:
1. **使用内置图标**:
- 在`appPath\resources\sass\app.scss`文件中添加需要使用的图标声明,例如:`@include icon('box')`。
- 打开命令行工具,进入`app.scss`所在的目录,运行`compass compile app.scss`命令,将SASS编译成CSS文件。
- 在组件的`iconCls`属性中设置为所选图标名称,如`box`,即可显示相应的内置图标。
2. **使用自定义图标**:
- 另一个流行的自定义图标服务是IcoMoon(<https://icomoon.io>),在这个网站上,你可以上传自己的设计或者选择现有的图标库。
- 创建或导入图标包后,获取生成的CSS代码,这通常包含一个自定义的CSS类名和一个URL前缀。
- 将这些CSS类名添加到`app.scss`中,或者创建一个新的SASS文件来组织自定义图标。
- 编译CSS文件并将其与默认的Sencha Touch样式合并。
- 在组件的`iconCls`属性中使用自定义的CSS类名,如`my-custom-icon`,以显示自定义图标。
Sencha Touch 2.2以后的版本鼓励开发者利用字体图标的优势,通过SASS管理和编译CSS,灵活地定制和使用各种图标,以提高应用的性能和用户体验。同时,自定义图标的能力让开发者可以根据项目需求创建独特且高效的图标集。
2012-06-20 上传
2011-05-29 上传
2023-09-15 上传
2024-02-06 上传
2023-03-28 上传
2023-04-03 上传
2023-06-09 上传
2023-06-13 上传
![](https://profile-avatar.csdnimg.cn/958f7011be15435f83738a105cc39fcd_weixin_42197129.jpg!1)
韩大人的指尖记录
- 粉丝: 27
- 资源: 2万+
最新资源
- 解决Eclipse配置与导入Java工程常见问题
- 真空发生器:工作原理与抽吸性能分析
- 爱立信RBS6201开站流程详解
- 电脑开机声音解析:故障诊断指南
- JAVA实现贪吃蛇游戏
- 模糊神经网络实现与自学习能力探索
- PID型模糊神经网络控制器设计与学习算法
- 模糊神经网络在自适应PID控制器中的应用
- C++实现的学生成绩管理系统设计
- 802.1D STP 实现与优化:二层交换机中的生成树协议
- 解决Windows无法完成SD卡格式化的九种方法
- 软件测试方法:Beta与Alpha测试详解
- 软件测试周期详解:从需求分析到维护测试
- CMMI模型详解:软件企业能力提升的关键
- 移动Web开发框架选择:jQueryMobile、jQTouch、SenchaTouch对比
- Java程序设计试题与复习指南