Win10-UI是什麼？

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

手機

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

桌面

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

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

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

開源

特性

Win10的動態磁貼，可定義方塊大小，添加隨機動畫
桌面圖標自動排序
任務欄結合iframe子窗口，與windows一致的窗口管理體驗
開始菜單+消息提示中心，滿足後臺UI的設計需求
極少的API，大部分功能可用html元素定義完成
響應式兼容，在手機瀏覽器也有不錯的觀感
目前只保證對主流現代瀏覽器的兼容性支持

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

mac桌面

前置組件

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

如何使用

如何自定義桌面圖標？


 
  

 圖標底部文字

 

 
 自定義任意html內容

 圖標底部文字

 




圖標應設置為圖片或自定義html填充div

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

如何自定義開始菜單列表?


 一級菜單

 一級菜單

 二級菜單

 二級菜單

 二級菜單

 一級菜單

 一級菜單

一級菜單添加類item，二級添加sub-item。不需要用一級菜單“包裹”二級菜單，將自動識別二級菜單的歸屬，請注意排序。

如何自定義開始菜單磁貼?


 
 磁貼組標題1

 
 磁貼1

 

 
 磁貼2

 

 

 
 磁貼組標題2

 
 磁貼3

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

API

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

Win10.

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

更換壁紙

前綴。
所有方法都需要加

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

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

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

)

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

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

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

開源UI 框架-Win10 風格的前端響應式 UI 框架 Win10-UI

本著極簡的設計風格，所有圖標相關的輔助類都設置為'icon'


 
 Win10-UI官網

在桌面圖標中，設置img.icon聲明該圖片是一個圖標


 
 Win10-UI官網

Win10.openUrl("http://win10ui.yuri2.cn","Win10-UI官網");
Win10.openUrl("http://win10ui.yuri2.cn","字體圖標");

API測試

文檔圖片圖標


 
 我是主體
 

 
 我是封面

//典型用法(桌面菜單)
Win10.setContextMenu('#win10>.desktop',[
 '菜單標題', //單字符串，不帶回調
 ['進入全屏',function () {Win10.enableFullScreen()}], //菜單項+點擊回調
 ['退出全屏',function () {Win10.disableFullScreen()}],
 '|', //分隔符
 ['關於',function () {Win10.aboutUs()}],
]);
//設置menu為true會起到禁用系統默認菜單的作用
Win10.setContextMenu('#win10',true);點擊回調函數可以聲明一個參數e,將傳入點擊事件的對象。特別的，e.data是觸發右鍵菜單的對象。

 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']">
 
 百度