WIN10-UI

Win10-UI是一款win10风格的后台UI，让您轻松搭建一个别具一格的后台界面。

| 官网 | demo | github | 下载

版本

v1.1.2.4

该版本修正了两个烦心的小bug。对于1.1.2.3版本的老用户，替换该版本的win10.js文件即可。

预览

1

1

特性

前置组件

快速入门

如何自定义桌面图标？

<div id="win10-shortcuts">
     <div class="shortcut" onclick="//do something...">
           <img src="图片地址" class="icon" />
           <div class="title">图标底部文字</div>
     </div>
     <div class="shortcut" onclick="//do something...">
           <div class="icon">自定义任意html内容</div>
           <div class="title">图标底部文字</div>
     </div>
</div>

图标应设置为图片或自定义html填充div

如何自定义开始菜单列表?

<div class="list win10-menu-hidden animated animated-slideOutLeft">
     <div class="item">一级菜单</div>
     <div class="item">一级菜单</div>
     <div class="sub-item">二级菜单</div>
     <div class="sub-item">二级菜单</div>
     <div class="sub-item">二级菜单</div>
     <div class="item">一级菜单</div>
     <div class="item">一级菜单</div>
</div>

一级菜单添加类item，二级添加sub-item。不需要用一级菜单“包裹”二级菜单，将自动识别二级菜单的归属，请注意排序。

如何自定义开始菜单磁贴?

<div class="blocks">
    <div class="menu_group">
        <div class="title">磁贴组标题1</div>
        <div loc="1,1" size="1,1" class="block">
            <div class="content">磁贴1</div>
        </div>
        <div loc="2,1" size="1,1" class="block">
            <div class="content">磁贴2</div>
        </div>
    </div>
    <div class="menu_group">
        <div class="title">磁贴组标题2</div>
        <div loc="1,1" size="2,2" class="block">
            <div class="content">磁贴3</div>
        </div>
    </div>
</div>

磁贴区域被分成若干小格，每一行最多6格。loc='x,y'中的x表示横坐标，y表示纵坐标（以左上方为1,1点）。size='w,h'中的w和h表示格子的宽度和高度（以格为单位）。

API

进阶篇

推荐仔细查看demo的代码，很多用法都有所提及

设计思路

icon辅助类

本着极简的设计风格，所有图标相关的辅助类都设置为'icon'

<div class="shortcut">
     <img class="icon" src="./img/icon/win10.png"/>
     <div class="title">Win10-UI官网</div>
</div>

在桌面图标中，设置img.icon声明该图片是一个图标

<div class="shortcut">
     <i class="fa fa-camera-retro icon"></i>
     <div class="title">Win10-UI官网</div>
</div>

在桌面图标中，用.icon声明一个字体图标（以font awesome为例）

Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官网");
Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字体图标");

没错！你也可以在openUrl函数的title参数中插入图片图标或者字体图标！ 

<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>API测试</span></div>
<div class="item"><img class="icon" src="./img/icon/doc.png"><span>文档图片图标</span></div>

在开始菜单项中，使用icon一样可以定义图片图标和字体图标

小磁贴设计

小磁贴辅助类

你可以放置两个content，并赋予detail和cover的辅助类，将得到炫酷的封面切换主体的动画效果。 

<div loc="1,1" size="6,3" class="block">
   <div class="content red detail" >
       我是主体
   </div>
   <div class="content red cover">
       我是封面
   </div>
</div>

父子页沟通

颜色预定义

各种颜色 具体效果见 https://www.kancloud.cn/qq85569256/xzui/350010

右键菜单配置

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。 

<div class="shortcut win10-open-window"
        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']">
        <i class="icon fa fa-fw fa-user-circle blue" ></i>
        <div class="title">百度</div>
</div>

这是所有可选项都用上的完整写法。

<div class="shortcut win10-open-window" data-url="www.baidu.com" >
        <i class="icon fa fa-fw fa-user-circle blue" ></i>
        <div class="title">百度</div>
</div>

这是推荐的简洁写法，可以满足大部分场景的需要。

未来开发计划

联系作者

联系邮箱：yuri2peter@qq.com

欢迎关注尤里2号的博客:https://yuri2.cn

写在最后

2017/7/31

TODO

更新日志

v1.1.2.4

v1.1.2.3

v1.1.2.2

v1.1.2.1

更早的版本