视频加载中...
Win10-UI官网
在桌面图标中,设置img.icon公告该图片是一个图标
在桌面图标中,用.icon公告一个字体图标(以font awesome为例)
Win10.openUrl("http://win10ui.yuri2.cn","Win10-UI官网");
Win10.openUrl("http://win10ui.yuri2.cn","字体图标");
没错!你也可以在openUrl函数的title参数中插入图片图标或者者字体图标!
API测试
文档图片图标 在开始菜单项中,使用icon一样可以定义图片图标和字体图标
小磁贴设计
- 小磁贴的尺寸固定位44px/格,方便开发者设计自己想要的样式
- 灵活使用setAnimated函数
- 自己设置少量hover的动画能起到很好的效果哦
- vue等前台神器的支持
小磁贴辅助类
你可以放置两个content,并赋予detail和cover的辅助类,将得到炫酷的封面切换主体的动画效果。
父子页沟通
- 要使用子页工具集,请先引入win10.child.js
- 自由的使用Win10_child对象吧,目前包含close、newMsg、openUrl函数;也可以使用Win10_parent对象,将指向父页的Win10对象。
- 父页打开子窗口的函数openUrl会返回索引index,使用getLayeroByIndex(index)取得子窗口对象,而后即可以方便的控制子窗口的行为了。
颜色预约义
各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010
- black-green{background:#009688}
- green{background:#5FB878}
- black{background:#393D49}
- blue{background:#1E9FFF}
- orange{background:#F7B824}
- red{background:#FF5722}
- dark{background:#2F4056}
右键菜单配置
Win10.setContextMenu(jq_dom, menu) 可接管系统默认的右键菜单。 其中jq_dom是jq对象或者选择器字符串,menu是菜单配置项(true表示禁用默认菜单,null表示恢复默认菜单,[数组]表示自己设置菜单)
//典型用法(桌面菜单)
Win10.setContextMenu('#win10>.desktop',[
'菜单标题', //单字符串,不带回调
['进入全屏',function () {Win10.enableFullScreen()}], //菜单项+点击回调
['退出全屏',function () {Win10.disableFullScreen()}],
'|', //分隔符
['关于',function () {Win10.aboutUs()}],
]);
//设置menu为true会起到禁用系统默认菜单的作用
Win10.setContextMenu('#win10',true);
点击回调函数可以公告一个参数e,将传入点击事件的对象。特别的,e.data是触发右键菜单的对象。
桌面舞台
为了让广大开发者能更自由的定义自己的桌面,Win10-UI自v1.1.2.3版本起加入桌面舞台。 桌面舞台是一个id为win10-desktop-scene的div,位于#win10>.desktop下。桌面舞台预约义了css,使其浮动于桌面图标的下方。 借助此特性,你甚至可以发挥想象力,制作出动态壁纸。
使用getDesktopScene函数可以快捷获取桌面舞台的jq对象。 v1.1.2.3之前的版本,假如想要临时体验桌面舞台的支持特性,可以去官方群下载补丁win10_desktop_scene_support.js。
子窗口事件自动绑定
所有#win10下的元素加入类win10-open-window就可自动绑定openUrl函数,毋庸用onclick手动绑定
v1.1.2.3之前的版本,假如想要临时体验桌面子窗口事件自动绑定支持特性,可以去官方群下载插件win10_bind_open_windows.js。
- 标签属性说明
- data-title:窗口标题
- data-url:窗口url地址
- data-icon-image:图片图标的url
- data-icon-font:字体图标名 如star
- data-icon-bg:图标背景色 black-green,green,black,blue,orange,red,dark,purple
- data-area-offset:窗口 [区域,偏移]
- 特别的,假如子节点有icon和title的css类,可以自动识别为图标和标题,毋庸设置data-title和data-icon-image(font)
data-url="http://www.baidu.com"
data-title="我是百度"
data-icon-image="https://www.baidu.com/img/bd_logo1.png"
data-icon-fOnt="star"
data-icon-bg="red"
data-area-offset="[['300px', '380px'],'rt']">
百度
这是所有可选项都用上的完整写法。
这是推荐的简洁写法,可以满足大部分场景的需要。
未来开发计划
- 可拖拽磁贴
- 多主题切换
- 主题生成器
- 日历、音乐播放器等小组件