WIN10-UI v1.1.2.5開源項目介紹及下載

WIN10-UI v1.1.2.5開源項目介紹及下載-墨澀網(wǎng)

IN10-UI介紹

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

官網(wǎng)：

http://win10ui.yuri2.cn/

演示地址：

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

開源地址：

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

版本

v1.1.2.5

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

WIN10-UI預(yù)覽

特性

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

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

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

進(jìn)階篇

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

設(shè)計思路

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

icon輔助類

本著極簡的設(shè)計風(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聲明該圖片是一個圖標(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聲明一個字體圖標(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)");

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

<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>文檔圖片圖標(biāo)</span></div>

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

小磁貼設(shè)計

小磁貼的尺寸固定位44px/格，方便開發(fā)者設(shè)計自己想要的樣式
靈活使用setAnimated函數(shù)
自定義一些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對象吧，目前包含close、newMsg、openUrl函數(shù)；也可以使用Win10_parent對象，將指向父頁的Win10對象。
父頁打開子窗口的函數(shù)openUrl會返回索引index，使用getLayeroByIndex(index)獲得子窗口對象,然后就可以方便的控制子窗口的行為了。

顏色預(yù)定義

各種顏色具體效果見 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對象或選擇器字符串,menu是菜單配置項(true表示禁用默認(rèn)菜單,null表示恢復(fù)默認(rèn)菜單,[數(shù)組]表示自定義菜單)

//典型用法(桌面菜單)Win10.setContextMenu('#win10>.desktop',[   '菜單標(biāo)題', //單字符串，不帶回調(diào)   ['進(jìn)入全屏',function () {Win10.enableFullScreen()}], //菜單項+點擊回調(diào)   ['退出全屏',function () {Win10.disableFullScreen()}],   '|', //分隔符   ['關(guān)于',function () {Win10.aboutUs()}],]);?//設(shè)置menu為true會起到禁用系統(tǒng)默認(rèn)菜單的作用Win10.setContextMenu('#win10',true);

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

桌面舞臺

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

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

子窗口事件自動綁定

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

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

標(biāo)簽屬性說明
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é)點有icon和title的css類，可以自動識別為圖標(biāo)和標(biāo)題，無須設(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>

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

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

這是推薦的簡潔寫法，可以滿足大部分場景的需要。

未來開發(fā)計劃

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

聯(lián)系作者

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

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

寫在最后

2017/7/31

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

TODO

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

更新日志

v1.1.2.4

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

v1.1.2.3

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

v1.1.2.2

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

v1.1.2.1

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

更早的版本

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

下載地址：

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

開源地址：https://github.com/yuri2peter/win10-ui

例

指定如何填充列：

div

{

column-fill:auto;

}

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。

屬性
column-fill	不支持	不支持	13.0 -moz-	不支持	不支持

屬性定義及使用說明

column-fill屬性指定如何填充列。

默認(rèn)值:	balance
繼承:	no
版本:	CSS3
JavaScript 語法:	object.style.columnFill="auto"

語法

column-fill: balance|auto;

值	說明
balance	列長短平衡。瀏覽器應(yīng)盡量減少改變列的長度
auto	列順序填充，他們將有不同的長度

Column-count

div元素的文本分成三列。

Column-gap

在div元素的文本分成三列，并指定一個30像素的列之間的差距。

Column-rule

指定列之間的規(guī)則：寬度，樣式和顏色。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

紹

介紹

今天福哥要跟跟大家說一說標(biāo)簽的樣式，上一課我們學(xué)習(xí)的標(biāo)簽的樣子就是它們的“默認(rèn)”樣子，實話實說這簡直太難看了！為了讓它們看起來更漂亮，為了可以使用這些標(biāo)簽勾勒出互聯(lián)網(wǎng)上我們看到的那些美輪美奐的網(wǎng)頁，我們需要通過標(biāo)簽樣式對它們進(jìn)行換裝、進(jìn)行美化。

標(biāo)簽樣式格式

使用標(biāo)簽樣式的語法，示例：我們給一個div設(shè)置邊框和背景顏色。

<div style="border: 1px solid #000; background: #ccc;"></div>

標(biāo)簽樣式

尺寸

可以使用width和height控制對象的寬度和高度，可以使用百分比也可以使用具體的數(shù)值。

width

height

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
">

    </div>

邊框

邊框指的是標(biāo)簽在網(wǎng)頁顯示的對象的邊框，控制邊框可以使用border這個樣式。還可以控制對象邊框的圓角。還可以單獨控制對象的上下左右四個方向的邊框的樣式。

border

border-radius

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
">

    </div>

邊距

對象邊距分為內(nèi)邊距和外邊距。

內(nèi)邊距

內(nèi)邊距指對象里面的子元素距離對象邊框的距離，使用padding樣式控制對象的內(nèi)邊距。

padding

外邊距

外邊距指對象邊框距離父元素邊框的距離，使用margin樣式控制對象的外邊距。

margin

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
">
        福哥教我學(xué)HTML樣式
    </div>

背景

背景是指對象區(qū)域內(nèi)的樣式，背景可以是一種顏色的填充，也可以是一張圖片的渲染。

background

background-color

background-image

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
        background: #c6b4f0;
">
        福哥教我學(xué)HTML樣式
    </div>

字體

字體是用來控制文字的樣式的，可以控制文字的字體和字號。但是要注意一點，給文字設(shè)置字體一定要客戶端的電腦上有這種字體才可以正常顯示。

font

font-family

font-size

color

<div style="
        display: block;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #c85e7c;
        border-radius: 15%;
        padding: 12px;
        margin: 12px;
        background: #c6b4f0;
        font-family: 黑體;
        font-size: 22px;
        color: #c85e7c;
">
        福哥教我學(xué)HTML樣式
    </div>

顯示

對象的顯示方式也有很多種，有獨占一行的，也有只占一小塊的，還有非快狀的。顯示方式使用display屬性控制。

display: block

獨占一行

display: inline-block

獨占一小塊

display: inline

非塊狀

display: none

隱藏對象，就是對象狀態(tài)不可見也不占位置了

總結(jié)

今天福哥給大家秀出了常用的標(biāo)簽樣式，同時給出了這個樣式的實際顯示效果。接下來我們就要使用這些知識來設(shè)計我們自己的頁面了。

把網(wǎng)頁上的基本元素都套上了漂亮的皮膚，可以使用這些漂亮的標(biāo)簽快速搭建好看的網(wǎng)頁，也是有捷徑可尋的。我們開發(fā)網(wǎng)站程序可以使用web框架輔助，那么設(shè)計漂亮的網(wǎng)頁也可以借助前端框架來完成。

下一課我們會跟大家介紹一款非常好用的前端框架——bootstrap，借助bootstrap前端框架就可以高效地設(shè)計網(wǎng)站的各種網(wǎng)頁了。

https://m.tongfu.net/home/35/blog/512895.html

在線咨詢

上一篇：學(xué)會這幾個插件，讓你的Notepad++使用起來更絲
下一篇：html5背景音樂不自動播放解密（原創(chuàng)）

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商