WIN10-UI介紹

Win10-UI是一款win10風(fēng)格的后臺(tái)UI，讓您輕松搭建一個(gè)別具一格的后臺(tái)界面。

官網(wǎng)：

http://win10ui.yuri2.cn/

演示地址：

http://win10ui.yuri2.cn/src/demo

開(kāi)源地址：

https://github.com/yuri2peter/win10-ui

版本

v1.1.2.5

該版本修正了兩個(gè)煩心的小bug。對(duì)于1.1.2.3版本的老用戶，替換該版本的win10.js文件即可。

WIN10-UI預(yù)覽

特性

• Win10的動(dòng)態(tài)磁貼，可定義方塊大小，添加隨機(jī)動(dòng)畫
• 桌面圖標(biāo)自動(dòng)排序
• 任務(wù)欄結(jié)合iframe子窗口，與windows一致的窗口管理體驗(yàn)
• 開(kāi)始菜單+消息提示中心，滿足后臺(tái)UI的設(shè)計(jì)需求
• 極少的API，大部分功能可用html元素定義完成
• 響應(yīng)式兼容，在手機(jī)瀏覽器也有不錯(cuò)的觀感
• 目前只保證對(duì)主流現(xiàn)代瀏覽器的兼容性支持

前置組件

• layer(v3.0.3)
• animated.css
• jquery(v2.2.4)
• font-awesome

快速入門

如何自定義桌面圖標(biāo)？

<div id="win10-shortcuts">
     <div class="shortcut" onclick="//do something...">
           <img src="圖片地址" class="icon" />
           <div class="title">圖標(biāo)底部文字</div>
     </div>
     <div class="shortcut" onclick="//do something...">
           <div class="icon">自定義任意html內(nèi)容</div>
           <div class="title">圖標(biāo)底部文字</div>
     </div>
</div>

圖標(biāo)應(yīng)設(shè)置為圖片或自定義html填充div

如何自定義開(kāi)始菜單列表?

<div class="list win10-menu-hidden animated animated-slideOutLeft">
     <div class="item">一級(jí)菜單</div>
     <div class="item">一級(jí)菜單</div>
     <div class="sub-item">二級(jí)菜單</div>
     <div class="sub-item">二級(jí)菜單</div>
     <div class="sub-item">二級(jí)菜單</div>
     <div class="item">一級(jí)菜單</div>
     <div class="item">一級(jí)菜單</div>
</div>

一級(jí)菜單添加類item，二級(jí)添加sub-item。不需要用一級(jí)菜單“包裹”二級(jí)菜單，將自動(dòng)識(shí)別二級(jí)菜單的歸屬，請(qǐng)注意排序。

如何自定義開(kāi)始菜單磁貼?

<div class="blocks">
    <div class="menu_group">
        <div class="title">磁貼組標(biāo)題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">磁貼組標(biāo)題2</div>
        <div loc="1,1" size="2,2" class="block">
            <div class="content">磁貼3</div>
        </div>
    </div>
</div>

磁貼區(qū)域被分成若干小格，每一行最多6格。loc='x,y'中的x表示橫坐標(biāo)，y表示縱坐標(biāo)（以左上方為1,1點(diǎn)）。size='w,h'中的w和h表示格子的寬度和高度（以格為單位）。

API

• 調(diào)用：Win10-ui的api應(yīng)當(dāng)在其初始化之后被調(diào)用

<script>
    Win10.onReady(function () {
        //Win10-ui初始化完成后將執(zhí)行此處代碼
    });
</script>

所有方法都需要加Win10.前綴。

• setBgUrl(bgs) 設(shè)置背景圖片 Win10.setBgUrl({main:'寬屏壁紙url',mobile:'豎屏壁紙url',})
• openUrl(url,title,areaAndOffset) ** 打開(kāi)一個(gè)子窗口,參數(shù)列表：url,標(biāo)題，[尺寸，區(qū)域](同layer的area和offset的設(shè)置格式，也可以傳入'max'強(qiáng)制最大化，例如[['30%','30%'],['50px','50px']])
• onReady(handle) win10-ui初始化完畢后的回調(diào)
• menuOpen() 開(kāi)始菜單打開(kāi)
• menuClose() 開(kāi)始菜單關(guān)閉
• menuToggle() 開(kāi)始菜單打開(kāi)/關(guān)閉
• commandCenterOpen() 信息中心打開(kāi)
• commandCenterClose() 信息中心關(guān)閉
• commandCenterToggle() 信息中心打開(kāi)/關(guān)閉
• renderShortcuts() 重新渲染桌面圖標(biāo)(可用與動(dòng)態(tài)添加或刪除了桌面圖標(biāo)之后)
• renderMenuBlocks() 重新渲染磁貼(可用與動(dòng)態(tài)添加或刪除了磁貼之后)
• buildList() 重新預(yù)處理菜單列表(可用與動(dòng)態(tài)添加或刪除了菜單項(xiàng)之后)
• newMsg(title, content,handle_click) 發(fā)送一個(gè)消息提醒，handle_click是點(diǎn)擊回調(diào)
• isSmallScreen() 如果屏幕寬度小于768px返回true，否則返回false
• setAnimated(animated_classes,animated_liveness) 用css的類來(lái)設(shè)置磁貼動(dòng)畫。animated_liveness設(shè)置動(dòng)畫的觸發(fā)概率(0~1)。animated_classes中存放css class數(shù)組，如['class1','class2','class3-1 class3-2']。磁貼將隨機(jī)選擇一個(gè)動(dòng)畫來(lái)播放（最多3秒）。
• exit() 關(guān)閉整個(gè)頁(yè)面（有確認(rèn)提示）
• aboutUs() 關(guān)于信息
• lang(cn,en) 簡(jiǎn)單的雙語(yǔ)支持，如果是中文環(huán)境返回cn，否則返回en
• getLayeroByIndex(index) 根據(jù)openUrl返回的索引，返回窗體的jq對(duì)象
• hideWins() 最小化所有窗口
• setContextMenu(jq_dom, menu) 右鍵菜單配置（詳見(jiàn)進(jìn)階篇）
• getDesktopScene() 返回桌面舞臺(tái)的jq對(duì)象（用于高級(jí)用戶diy壁紙）

進(jìn)階篇

推薦仔細(xì)查看demo的代碼，很多用法都有所提及

設(shè)計(jì)思路

• Win10-UI應(yīng)當(dāng)作為你網(wǎng)站模塊的主入口，而具體功能頁(yè)面適合用子窗口的形式打開(kāi)。子窗口是以iframe實(shí)現(xiàn)的，減少了js、css沖突，保證了獨(dú)立性。同時(shí)父子頁(yè)之間也可以通過(guò)Win10_child.js的API進(jìn)行溝通
• 桌面圖標(biāo)適用于最常用的操作，菜單適用于構(gòu)建所有操作的清單（這里的操作不限于打開(kāi)子窗口）
• 小磁貼視覺(jué)沖擊力強(qiáng)，除了可以做出醒目的按鈕，也可以用作信息展板，甚至于在磁貼的方塊空間內(nèi)構(gòu)建復(fù)雜的應(yīng)用（如音樂(lè)播放器）

icon輔助類

本著極簡(jiǎn)的設(shè)計(jì)風(fēng)格，所有圖標(biāo)相關(guān)的輔助類都設(shè)置為'icon'

<div class="shortcut">
     <img class="icon" src="./img/icon/win10.png"/>
     <div class="title">Win10-UI官網(wǎng)</div>
</div>

在桌面圖標(biāo)中，設(shè)置img.icon聲明該圖片是一個(gè)圖標(biāo)

<div class="shortcut">
     <i class="fa fa-camera-retro icon"></i>
     <div class="title">Win10-UI官網(wǎng)</div>
</div>

在桌面圖標(biāo)中，用.icon聲明一個(gè)字體圖標(biāo)（以font awesome為例）

Win10.openUrl("http://win10ui.yuri2.cn","<img class=\"icon\" src=\"./img/icon/win10.png\"/>Win10-UI官網(wǎng)");
Win10.openUrl("http://win10ui.yuri2.cn","<i class=\"fa fa-camera-retro icon\"></i>字體圖標(biāo)");

沒(méi)錯(cuò)！你也可以在openUrl函數(shù)的title參數(shù)中插入圖片圖標(biāo)或者字體圖標(biāo)！

<div class="item"><i class=" icon fa fa-wrench fa-fw"></i><span>API測(cè)試</span></div>
<div class="item"><img class="icon" src="./img/icon/doc.png"><span>文檔圖片圖標(biāo)</span></div>

在開(kāi)始菜單項(xiàng)中，使用icon一樣可以定義圖片圖標(biāo)和字體圖標(biāo)

小磁貼設(shè)計(jì)

• 小磁貼的尺寸固定位44px/格，方便開(kāi)發(fā)者設(shè)計(jì)自己想要的樣式
• 靈活使用setAnimated函數(shù)
• 自定義一些hover的動(dòng)畫能起到很好的效果哦
• vue等前端神器的支持

小磁貼輔助類

你可以放置兩個(gè)content，并賦予detail和cover的輔助類，將得到炫酷的封面切換主體的動(dòng)畫效果。

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

父子頁(yè)溝通

• 要使用子頁(yè)工具集，請(qǐng)先引入win10.child.js
• 自由的使用Win10_child對(duì)象吧，目前包含close、newMsg、openUrl函數(shù)；也可以使用Win10_parent對(duì)象，將指向父頁(yè)的Win10對(duì)象。
• 父頁(yè)打開(kāi)子窗口的函數(shù)openUrl會(huì)返回索引index，使用getLayeroByIndex(index)獲得子窗口對(duì)象,然后就可以方便的控制子窗口的行為了。

顏色預(yù)定義

各種顏色 具體效果見(jiàn) 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) 可接管系統(tǒng)默認(rèn)的右鍵菜單。 其中jq_dom是jq對(duì)象或選擇器字符串,menu是菜單配置項(xiàng)(true表示禁用默認(rèn)菜單,null表示恢復(fù)默認(rèn)菜單,[數(shù)組]表示自定義菜單)

//典型用法(桌面菜單)
Win10.setContextMenu('#win10>.desktop',[
   '菜單標(biāo)題', //單字符串，不帶回調(diào)
   ['進(jìn)入全屏',function () {Win10.enableFullScreen()}], //菜單項(xiàng)+點(diǎn)擊回調(diào)
   ['退出全屏',function () {Win10.disableFullScreen()}],
   '|', //分隔符
   ['關(guān)于',function () {Win10.aboutUs()}],
]);

//設(shè)置menu為true會(huì)起到禁用系統(tǒng)默認(rèn)菜單的作用
Win10.setContextMenu('#win10',true);

點(diǎn)擊回調(diào)函數(shù)可以聲明一個(gè)參數(shù)e,將傳入點(diǎn)擊事件的對(duì)象。特別的，e.data是觸發(fā)右鍵菜單的對(duì)象。

桌面舞臺(tái)

為了讓廣大開(kāi)發(fā)者能更自由的定義自己的桌面，Win10-UI自v1.1.2.3版本起加入桌面舞臺(tái)。 桌面舞臺(tái)是一個(gè)id為win10-desktop-scene的div，位于#win10>.desktop下。桌面舞臺(tái)預(yù)定義了css，使其浮動(dòng)于桌面圖標(biāo)的下方。 借助此特性，你甚至可以發(fā)揮想象力，制作出動(dòng)態(tài)壁紙。

使用getDesktopScene函數(shù)可以快捷獲取桌面舞臺(tái)的jq對(duì)象。 v1.1.2.3之前的版本，如果想要臨時(shí)體驗(yàn)桌面舞臺(tái)的支持特性，可以去官方群下載補(bǔ)丁win10_desktop_scene_support.js。

子窗口事件自動(dòng)綁定

所有#win10下的元素加入類win10-open-window即可自動(dòng)綁定openUrl函數(shù)，無(wú)須用onclick手動(dòng)綁定

v1.1.2.3之前的版本，如果想要臨時(shí)體驗(yàn)桌面子窗口事件自動(dòng)綁定支持特性，可以去官方群下載插件win10_bind_open_windows.js。

• 標(biāo)簽屬性說(shuō)明
• data-title:窗口標(biāo)題
• data-url:窗口url地址
• data-icon-image:圖片圖標(biāo)的url
• data-icon-font:字體圖標(biāo)名 如star
• data-icon-bg:圖標(biāo)背景色 black-green,green,black,blue,orange,red,dark,purple
• data-area-offset:窗口 [區(qū)域,偏移]
• 特別的，如果子節(jié)點(diǎn)有icon和title的css類，可以自動(dòng)識(shí)別為圖標(biāo)和標(biāo)題，無(wú)須設(shè)置data-title和data-icon-image(font)

<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>

這是所有可選項(xiàng)都用上的完整寫法。

<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>

這是推薦的簡(jiǎn)潔寫法，可以滿足大部分場(chǎng)景的需要。

未來(lái)開(kāi)發(fā)計(jì)劃

• 可拖拽磁貼
• 多主題切換
• 主題生成器
• 日歷、音樂(lè)播放器等小組件

聯(lián)系作者

聯(lián)系郵箱：yuri2peter@qq.com

歡迎關(guān)注尤里2號(hào)的博客:https://yuri2.cn

寫在最后

2017/7/31

• 本來(lái)只是想做一個(gè)UI給自己的php框架后臺(tái)使用，沒(méi)想到一干起來(lái)就完全停不下來(lái)呢~
• 剛上線就有很多小伙伴表示了支持，在此尤里衷心的跟大家說(shuō)一句：謝謝！
• 由于是剛開(kāi)始，會(huì)有很多新點(diǎn)子，版本迭代會(huì)比較快，對(duì)于更新強(qiáng)迫癥的小伙伴可能會(huì)不太友好，這種情況很快就會(huì)有所改觀（為偷懶做鋪墊）。
• 如果你用Win10-UI做了自己的網(wǎng)站，歡迎聯(lián)系我投稿展示。
• 對(duì)于項(xiàng)目的發(fā)展有著重大貢獻(xiàn)的小伙伴我會(huì)記錄在contributor.md文件中。啥叫貢獻(xiàn)？好的建議，重大bug，推廣等等。
• 如果有一些賊蠢的錯(cuò)誤請(qǐng)見(jiàn)諒，空閑時(shí)間一個(gè)人維護(hù)一個(gè)項(xiàng)目還是蠻蛋疼的（寫于23:42的一句話）。
• ** 如果你喜歡我的項(xiàng)目不妨點(diǎn)一個(gè)贊，如果不嫌累的話最好在官網(wǎng)、開(kāi)源中國(guó)和github都點(diǎn)點(diǎn)贊（捂臉）！**

TODO

• 關(guān)閉回調(diào)
• 取消iframe讀取時(shí)的菊花圖標(biāo)
• 多壁紙切換API

更新日志

v1.1.2.4

• 2017/11/14 [修復(fù)]修復(fù)手機(jī)端瀏覽器輸入法導(dǎo)致窗口高度異常的問(wèn)題
• 2017/09/24 [修復(fù)]開(kāi)始菜單箭頭的小bug

v1.1.2.3

• 2017/9/13 [修復(fù)]修復(fù)手機(jī)端修改鏈接鍵盤影響窗口高度的問(wèn)題
• 2017/9/12 [增強(qiáng)]子窗口事件自動(dòng)綁定（詳情見(jiàn)進(jìn)階篇）
• 2017/9/12 [修復(fù)]修復(fù)了切換全屏下最大化窗口造成的子窗口高度溢出問(wèn)題
• 2017/9/6 [增強(qiáng)]添加了一個(gè)輔助函數(shù)getDesktopScene返回桌面舞臺(tái)對(duì)象;現(xiàn)在onReady函數(shù)可以被多次調(diào)用了，將按順序執(zhí)行(真實(shí)執(zhí)行順序是在DOM結(jié)構(gòu)基本確定之后)
• 2017/9/5 [增強(qiáng)]增加了一層div桌面舞臺(tái)，專門提供給高級(jí)桌面背景插件或自定義
• 2017/9/1 [修復(fù)]修復(fù)一處顏色的筆誤（藍(lán)色寫成了黑色）

v1.1.2.2

• 2017/8/31 [優(yōu)化]菜單項(xiàng)打開(kāi)機(jī)制改為手風(fēng)琴式
• 2017/8/31 [修復(fù)]修正菜單腳手架工具的一處筆誤（導(dǎo)致菜單項(xiàng)樣式異常）
• 2017/8/29 [優(yōu)化]一些a標(biāo)簽按鈕不會(huì)導(dǎo)致地址欄變動(dòng)了(小技巧：#改成javascript:void(0))
• 2017/8/22 [增強(qiáng)]為Ctrl+方向鍵設(shè)立了快捷鍵，快捷打開(kāi)菜單/消息，顯示/隱藏窗口
• 2017/8/22 [優(yōu)化]提高消息圖標(biāo)閃爍的頻率;修復(fù)了IE11的全屏功能

v1.1.2.1

• 2017/9/12 [增強(qiáng)]將win10_bind_open_windows插件整合進(jìn)了主框架，具體使用方法見(jiàn)“進(jìn)階篇”
• 2017/8/21 [優(yōu)化]減小了子窗口按鈕的寬度;手機(jī)屏幕openUrl打開(kāi)的子窗口現(xiàn)在默認(rèn)最大化了;消息提醒圖標(biāo)改為閃爍（感謝'Mr天明'的建議）
• 2017/8/18 [增強(qiáng)]預(yù)定義了磁貼.content.cover和.content.detail類，讓其擁有鼠標(biāo)經(jīng)過(guò)的翻頁(yè)動(dòng)畫
• 2017/8/15 [優(yōu)化]提高了通用背景色css的優(yōu)先級(jí)；優(yōu)化菜單圖標(biāo)大小與位置；三種代碼腳手架(懶人必備)
• 2017/8/07 [修復(fù)]修復(fù)了在小屏幕下打開(kāi)自定義網(wǎng)頁(yè)不會(huì)全屏的bug

更早的版本

• 2017/8/05 [增強(qiáng)]openUrl函數(shù)現(xiàn)在第三個(gè)參數(shù)可以自定義窗口的打開(kāi)大小和位置了
• 2017/8/05 [微調(diào)]win10.child.js增加了常用函數(shù)openUrl,父級(jí)對(duì)象句柄由Win10改名為Win10_parent;增加了一個(gè)紫色的css;優(yōu)化內(nèi)存釋放
• 2017/8/02 [增強(qiáng)]右鍵菜單
• 2017/7/31 [增強(qiáng)]iframe子頁(yè)js工具集
• 2017/7/31 [精簡(jiǎn)]去除了登錄相關(guān)的API，登錄頁(yè)現(xiàn)在作為獨(dú)立模板存在
• 2017/7/31 [增強(qiáng)]優(yōu)化任務(wù)欄和子窗口圖標(biāo)的表現(xiàn)，設(shè)立圖標(biāo)輔助類icon；背景圖片惰性加載（需要用api設(shè)置圖片的url）；newMsg函數(shù)現(xiàn)在可以傳入第三個(gè)參數(shù)設(shè)置點(diǎn)擊的回調(diào)
• 2017/7/28 [協(xié)議]修改開(kāi)源協(xié)議為SATA
• 2017/7/28 [修復(fù)]修正子窗口自動(dòng)置頂有時(shí)失效的bug
• 2017/7/28 [優(yōu)化]任務(wù)欄標(biāo)題文字改為左對(duì)齊；添加img輔助類"win10-btn-icon"服務(wù)于任務(wù)欄小圖標(biāo)
• 2017/7/27 [增強(qiáng)]openUrl現(xiàn)在可以傳入第三個(gè)參數(shù)max為true，強(qiáng)制以最大化打開(kāi)網(wǎng)頁(yè)
• 2017/7/26 [優(yōu)化]點(diǎn)擊子窗口的任意位置都會(huì)激活子窗口（不同于之前只有點(diǎn)擊標(biāo)題有效）
• 2017/7/25 [優(yōu)化]現(xiàn)在子窗口全屏不會(huì)超出底部了；微調(diào)菜單的默認(rèn)高度，看起來(lái)舒服一點(diǎn)；在時(shí)間刷新前和圖標(biāo)渲染前先行隱藏，防止影響觀感（感謝@typ1758提供的建議）
• 2017/7/24 [修復(fù)]修復(fù)了筆誤引起的自動(dòng)激活最上層子窗口失效
• 2017/7/24 [優(yōu)化]去除了窄屏幕切換菜單時(shí)偶爾產(chǎn)生的閃爍；微調(diào)桌面圖標(biāo)樣式，變得更加緊湊
• 2017/7/21 [增強(qiáng)]簡(jiǎn)單的中英雙語(yǔ)支持。對(duì)話框樣式微調(diào)；磁貼固定寬度為44px/格(固定的尺寸比較好布局)
• 2017/7/20 [修復(fù)]jq3.1有bug(真是坑爹)，換為jq2.2.4
• 2017/7/19 [增強(qiáng)]全局默認(rèn)不允許鼠標(biāo)選擇文字；優(yōu)化url打開(kāi)函數(shù)，自動(dòng)補(bǔ)全http協(xié)議頭

下載地址：

取件鏈接： https://c-t.work/s/fe0e4e70d4fd46

開(kāi)源地址：https://github.com/yuri2peter/win10-ui