time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【WinJS开发教程】4、Appbar中使用自定义图片示例

【WinJS开发教程】4、Appbar中使用自定义图片示例

时间:2013-01-09 23:17 点击:1831次 字体:[ ]




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

 

【WinJS开发教程】4、Appbar中使用自定义图片示例_www.fengfly.com

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

我们最终制作的图片为(160*80):

【WinJS开发教程】4、Appbar中使用自定义图片示例_www.fengfly.com

分以下几个步骤:

1、准备一个40*40的图标文件(即你要使用的icon文件,png格式),如

【WinJS开发教程】4、Appbar中使用自定义图片示例_www.fengfly.com

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

【WinJS开发教程】4、Appbar中使用自定义图片示例_www.fengfly.com

3。使用CSS图片拼接工具gopng将图片拼接起来(或者PS软件)

Tips:可以分两次,第一次拼:白、白、黑、灰,选中四张图片,拖入浏览器中就可以生成160*40

4. 在HTML中使用图片即可。

  1.  <div id="appbar" data-win-control="WinJS.UI.AppBar"> 
  2. <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> 
  3. </div> 


本文地址 : http://www.fengfly.com/plus/view-211372-1.html
标签: 开发教程 示例 AppBar 自定义图片 WinJS
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: