Win10-UI是什么？

Win10-UI是一款win10風格的后臺UI框架。它使用了豐富的win10桌面元素，包括桌面圖標、窗口化子頁面管理、開始菜單、動態小磁貼等組件，兼容主流現代瀏覽器及移動端的屏幕尺寸，適合快速開發后臺管理系統的前端界面。

PC

手機

桌面

Win10-UI采用傳統UI框架的渲染設計，無須記住繁復的js代碼，只需要套用html結構就可以輕松渲染出桌面元素。同時也保留了主動調用的API，讓高級開發者可以定義UI的細節。

它并沒有定義太多的“規則”，你完全可以用css、js擴充它的功能，把它打造成屬于你的獨一無二的后臺UI。

開源

特性

• Win10的動態磁貼，可定義方塊大小，添加隨機動畫

• 桌面圖標自動排序

• 任務欄結合iframe子窗口，與windows一致的窗口管理體驗

• 開始菜單+消息提示中心，滿足后臺UI的設計需求

• 極少的API，大部分功能可用html元素定義完成

• 響應式兼容，在手機瀏覽器也有不錯的觀感

• 目前只保證對主流現代瀏覽器的兼容性支持

mac桌面

前置組件

• layer(v3.0.3)

• animated.css

• jquery(v2.2.4)

• font-awesome

如何使用

• 如何自定義桌面圖標？

<div id="win10-shortcuts">
 <div class="shortcut" onclick="http://do something...">
 <img src="圖片地址" class="icon" />
 <div class="title">圖標底部文字</div>
 </div>
 <div class="shortcut" onclick="http://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

• 調用：Win10-ui的api應當在其初始化之后被調用

Win10.

更換壁紙

• 前綴。

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

  所有方法都需要加

['class1','class2','class3-1 class3-2']

• 。磁貼將隨機選擇一個動畫來播放（最多3秒）。

[['30%','30%'],['50px','50px']]

• )

Win10.setBgUrl({main:'寬屏壁紙url',mobile:'豎屏壁紙url',})

• setBgUrl(bgs) 設置背景圖片

• openUrl(url,title,areaAndOffset) ** 打開一個子窗口,參數列表：url,標題，[尺寸，區域](同layer的area和offset的設置格式，也可以傳入'max'強制最大化，例如

• onReady(handle) win10-ui初始化完畢后的回調

• menuOpen() 開始菜單打開

• menuClose() 開始菜單關閉

• menuToggle() 開始菜單打開/關閉

• commandCenterOpen() 信息中心打開

• commandCenterClose() 信息中心關閉

• commandCenterToggle() 信息中心打開/關閉

• renderShortcuts() 重新渲染桌面圖標(可用與動態添加或刪除了桌面圖標之后)

• renderMenuBlocks() 重新渲染磁貼(可用與動態添加或刪除了磁貼之后)

• buildList() 重新預處理菜單列表(可用與動態添加或刪除了菜單項之后)

• newMsg(title, content,handle_click) 發送一個消息提醒，handle_click是點擊回調

• isSmallScreen() 如果屏幕寬度小于768px返回true，否則返回false

• setAnimated(animated_classes,animated_liveness) 用css的類來設置磁貼動畫。animated_liveness設置動畫的觸發概率(0~1)。animated_classes中存放css class數組，如

• exit() 關閉整個頁面（有確認提示）

• aboutUs() 關于信息

• lang(cn,en) 簡單的雙語支持，如果是中文環境返回cn，否則返回en

• getLayeroByIndex(index) 根據openUrl返回的索引，返回窗體的jq對象

• hideWins() 最小化所有窗口

• setContextMenu(jq_dom, menu) 右鍵菜單配置（詳見進階篇）

• getDesktopScene() 返回桌面舞臺的jq對象（用于高級用戶diy壁紙）

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一樣可以定義圖片圖標和字體圖標

小磁貼設計

• 小磁貼的尺寸固定位44px/格，方便開發者設計自己想要的樣式

• 靈活使用setAnimated函數

• 自定義一些hover的動畫能起到很好的效果哦

• vue等前端神器的支持

小磁貼輔助類

你可以放置兩個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>

父子頁溝通

• 要使用子頁工具集，請先引入win10.child.js

• 在子頁打開新窗口，請使用Win10_child.openUrl函數獲得更好的兼容

• 自由的使用Win10_child對象吧，目前包含close、newMsg、openUrl函數；也可以使用Win10_parent對象，將指向父頁的Win10對象。

• 父頁打開子窗口的函數openUrl會返回索引index，使用getLayeroByIndex(index)獲得子窗口對象,然后就可以方便的控制子窗口的行為了。

顏色預定義

各種顏色

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

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

這是所有可選項都用上的完整寫法。