【限定72小时】Appbar中使用自定义图片示例
本教程转载网络，我只是个搬运工
在WinJS中，我们可以使用系统提供的Appbar图标，下图是所有系统自带图片的截图http://cdn.u1.huluxia.com/g3/M01/BE/6F/wKgBOV5waS6AGlfaAAK76V1VwVU654.png
但有时我们有用到自定义的图标，那么如何在WinJS中使用自定义的图标呢。
我们最终制作的图片为（160*80）：http://cdn.u1.huluxia.com/g3/M01/BE/6F/wKgBOV5waS6AHyfiAAARYrs3vBU711.png
分以下几个步骤：
1、准备一个40*40的图标文件（即你要使用的icon文件，png格式），如http://cdn.u1.huluxia.com/g3/M01/BE/6F/wKgBOV5waS6ARDfYAAAGzAL-3XU497.png
2、使用PhotoShop制作Appbar选中状态以及禁用状态的图片。一般默认状态颜色为 #ffffff，选中时为#000000，禁用：#666666，如下图http://cdn.u1.huluxia.com/g3/M01/BE/6F/wKgBOV5waS-AExOkAADJuFO-cxU304.png
3。使用CSS图片拼接工具gopng将图片拼接起来（或者PS软件）
Tips：可以分两次，第一次拼：白、白、黑、灰，选中四张图片，拖入浏览器中就可以生成160*40
4. 在HTML中使用图片即可。
<div id="appbar" data-win-control="WinJS.UI.AppBar">
<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmdBrightness', label:'调节亮度',icon:'url(/images/appbar.brightness.png)',section:'selection',tooltip:'调节亮度'}" type="button"></button>
</div>
页:
[1]