WinJS实用开发技巧（4）：Appbar中使用自定义图片

在WinJS中，我们可以使用系统提供的Appbar图标，下图是所有系统自带图片的截图

但有时我们有用到自定义的图标，那么如何在WinJS中使用自定义的图标呢。

我们最终制作的图片为（160*80）：

分以下几个步骤：

1、准备一个40*40的图标文件（即你要使用的icon文件，png格式），如

2、使用PhotoShop制作Appbar选中状态以及禁用状态的图片。一般默认状态颜色为 #ffffff，选中时为#000000，禁用：#666666，如下图

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>

WinJS实用开发技巧（4）：Appbar中使用自定义图片相关推荐

WinJS实用开发技巧（2）：使用artTemplate打造对话列表
WinJS中提供了列表控件ListView,但是对于一些有一些逻辑判断的处理不是十分友好,我们可以使用JavaScript中的模版机制来自己生成列表,然后添加到DOM中.今天要讲的是artTempla ...
WinJS实用开发技巧（3）：仿微博信息流JK快捷键滚动
Twitter.微博.Google Reader等网页版都有一套快捷键,J:快速查看上一条:K:快速查看下一条. 数据基于上一篇博客.增加当前项的样式:宽度为2的白色边框: .current-comm ...
WinJS实用开发技巧（5）：学习资料推荐
一.HTML5 & CSS & JavaScript 1,Internet Explorer 10 开发者指南 2,HTML5 presentation 3,html5 rocks 4 ...
Windows Phone 实用开发技巧（9）：自定义Windows Phone 页面切换动画
在Silverlight for Windows Phone ToolKit 中默认中有自带的页面Transitions:RollTransition.RotateTransition.SlideTr ...
Windows Phone 实用开发技巧（10）：Windows Phone 中处理图片的技巧
在开发Windows Phone应用程序的时候,或多或少会与图片打交道,下面总结下Windows Phone 中处理图片的一些技巧 1. 图片格式. 2. 图片编译方式 3. 图片加载方式 4. ...
ES6 实用开发技巧
Javascript - ES6 实用开发技巧本文只罗列出在 ES6 开发过程中相对实用的内容,并非一个高大全的文档,如果希望查阅详细的内容,可购买阮一峰老师所出版的 ES6 相关图书.另外阮一峰老 ...
ES6 javascript 实用开发技巧
Javascript - ES6 javascript 实用开发技巧本文只罗列出在 ES6 开发过程中相对实用的内容,并非一个高大全的文档,如果希望查阅详细的内容,可购买阮一峰老师所出版的 ES6 ...
深入体验JavaWeb开发内幕——简述JSP中的自定义标签叫你快速学会
转载自深入体验JavaWeb开发内幕--简述JSP中的自定义标签叫你快速学会自定义标签,顾名思义,就是自己定义的标签.那么我们为什么要自己定义一些标签呢? 我们知道,如果要在JSP中获取数据我 ...
Spring Boot 实用开发技巧————Eclipse 远程调试
引言在之前的开发当中,都会进行本地项目启动,然后向本地服务发起请求来进行 Debug 调试代码,这也是开发人员最常见的调试操作.但是当项目逐渐成型,慢慢的将各个模块部署到服务器后,调试的手段可能就仅 ...

WinJS实用开发技巧（4）：Appbar中使用自定义图片

WinJS实用开发技巧（4）：Appbar中使用自定义图片相关推荐

最新文章

热门文章