您的位置：首页 > Web前端 > JavaScript

5、手把手教你Extjs5(五)使用图标字体来美化按钮)

2015-11-20 18:28 555 查看

sencha 的例子中，有使用图标字体来美化按钮的例子，这个用起来又方便风格又统一，例如下图：

上面图标字体的使用方法也很简单，只要下载Font Awesome的css和图标文件，放到项目里就可以了。部分图标截图：

Font Awesome的网站为：点击打开链接。进入网站后，先下载Font Awesome 3.0,解压缩后，将css和font目录拷贝到war目录下。

(Font Awesome最新版本为4.0,网址为：http://fontawesome.io/ )

文件拷贝进来以后，需要在index.html中引入css文件。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">

<title>app</title>

<!-- 引入Font Awesome的css文件 -->
<link type="text/css" rel="stylesheet" href="css/font-awesome.css">

<!-- The line below must be kept intact for Sencha Cmd to build your application -->
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>

</head>
<body></body>
</html>

至此准备工作结束，可以字体文件可以使用了。对于一个Button来说，在其文字前面放一个图标可以使用属性icon,iconCls,对于图标字体来说，可以使用iconCls属性，也可以使用glyph这个属性。我们先来看一段该css之中的设置：

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
readers do not read off random characters that represent icons */
.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope-alt:before { content: "\f003"; }

从其css的描述中可以看出，其命名中就表示了该图标的名称，比如说icon-search是一个搜索的图标，在Button使用的时候,可以这样加入属性：

{
text : '搜索',
iconCls : 'icon-search'
}, {
text : '设置',
glyph : 0xf0c9
}

这二种方式加入的icon会有不同之处：

可以看出来用glyph设置的更好一些。为了找到这个数字，你先要去Font Awesome 网站上找到你需要的图标，记下名称，然后打开 css 目录下的 font-awesome.css,从中找到该名称的.class值，然后记下content的值。现在我们对top和bottom中的相应按钮加入图标字体。

Ext.define('app.view.main.region.Top', {

extend: 'Ext.toolbar.Toolbar',

alias: 'widget.maintop', // 定义了这个组件的xtype类型为maintop

items: [{
xtype: 'image',
bind: { // 数据绑定到MainModel中data的system.iconUrl
hidden: '{!system.iconUrl}', // 如果system.iconUrl未设置，则此image不显示
src: '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype: 'label',
bind: {
text: '{system.name}' // text值绑定到system.name
},
style: 'font-size : 20px; color : blue;'
}, {
xtype: 'label',
bind: {
text: '{system.version}'
}
}, '->', {
text: '菜单',
glyph: 0xf0c9,
menu: [{
text: '工程管理',
menu: [{
text: '工程项目'
}, {
text: '工程标段'
}]
}]
}, ' ', ' ', {
text: '主页',
glyph: 0xf015
}, {
text: '帮助',
glyph: 0xf059
}, {
text: '关于',
glyph: 0xf06a
}, {
text: '注销',
glyph: 0xf011
}, '->', '->', {
text: '搜索',
glyph: 0xf002
}, {
text: '设置',
glyph: 0xf013
}]

});

Ext.define('app.view.main.region.Bottom', {

extend: 'Ext.toolbar.Toolbar',

alias: 'widget.mainbottom',

items: [{
bind: {
text: '使用单位:{user.company}'
},
glyph: 0xf0f7
}, {
bind: {
text: '用户:{user.name}'
},
glyph: 0xf007
}, '->', {
bind: {
text: '{service.company}'
},
glyph: 0xf059

}, {
bind: {
text: '{service.name}'
}
}, {
bind: {
text: '{service.phonenumber}'
},
glyph: 0xf095
}, {
bind: {
hidden: '{!service.email}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
text: 'eMail:{service.email}'
},
glyph: 0xf003
}, {
bind: {
text: '©{service.copyright}'
}
}]
});
在修改了上面的glyph之后，还不能正确的显示图标，必须指定一下字体才行。修改Main.js,在里面加入初始化函数。

initComponent : function() {
Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件，只有设置了以后才能用glyph属性
this.callParent();
},

经过以上的操作，图标字体就可以正常显示了。具体效果如下：

细节决定成败，虽然加了图标字体的按钮比较好看，但是最好把外框和背景去掉，只有鼠标移上去的时候才显示。下一节我们继续Button创建一个自定义的Button,让他的背景是透明的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航