WIN10UI—實現思路分享及程式碼

hellohellolady_86404發表於2019-02-27

Win10UI

如下是響應式下的介面:

如果大家想要原始碼：點選進入>>

開門見山的說,為什麼要把網頁做成這種樣式呢？

實話說：你們不覺得這樣的一個介面去做為我們後臺作業系統的介面。不僅美觀還很讓人易操作、易上手吧。

作者在借鑑win10UI官網的同時用我的思路進行開發。如果有什麼疑問和問題，可以隨時聯絡我....

構建底部

底部導航欄佈局

<!-- 底部-->
<footer>
	<!-- 開始按鈕 -->
	<div class="win-start">
	    <i class="icon start-icon"></i>
        </div>
        <!-- 搜尋 -->
        <div class="search">
            <div class="search-bar">
                <i class="fa fa-search"></i>
                <input type="text" name="search_input" placeholder="Win10搜尋此係統"/>
            </div>
            <div class="search-icon">
                <i class="fa fa-genderless"></i>
            </div>
        </div>
	<!-- 最小化視窗欄 -->
	<div class="task-bar">
	</div>
	<!-- 日曆 -->
	<div class="calendar">
	    <span id="hour">21:13</span>
	    <span id="date">2018/02/08</span>
	    <div class="time-piece">
	        <p><span id="time"></span></p>
		<p><span id="days"></span><span></span></p>
	    </div>
	</div>
	<!-- 工作管理員 -->
	<div class="taskmgr">
	    <i class="fa fa-angle-up"></i>
	</div>
</footer>
複製程式碼

//底部導航欄的樣式    
footer{
	position: fixed;//固定 定位
	bottom: 0;
	left: 0;
	width: 100%;//在此前設定了 html，body的寬高為100%
	height: 50px;
	background: rgb(38, 38, 38);
	/*設定文字不可被選中*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*設定z-index 必須先設定position*/
	z-index: 9999;
}複製程式碼

開始選單欄

    <!-- 選單 -->
    <div class="start-menu">
        <ul class="menu">
            <li id="user_info">
                <i class="fa fa-user-circle"></i>
                <span>Administrator</span>
            </li>
            <li id="lock_window">
                <i class="fa fa-unlock-alt"></i>
                <span>鎖屏</span>
            </li>
            <li id="cancel_window">
                <i class="fa fa-sign-out"></i>
                <span>登出</span>
            </li>
            <li id="close_window">
                <i class="fa fa-power-off"></i>
                <span>關閉</span>
            </li>
        </ul>
    </div>複製程式碼

點選window圖示上滑顯示開始選單欄。JS如下：

    //開始選單彈出
    var start_icon = $(".start-icon");
    var start_menu = $(".start-menu");
    start_icon.click(function(event){
        start_menu.css("display") == "none" ?//三目運算
	    (start_menu.show(),
	        start_menu.animate({
		    "bottom": "50px"//start_menu設定為position定位，動態設定left和bottom即可
            })) :
	    (start_menu.animate({
	        "bottom": "-200px"
	        },function(){
	        start_menu.hide()
	}));
        event=event||window.event;
        event.stopPropagation();//阻止事件冒泡到父元素
    });複製程式碼

搜尋欄

點選小圓圈，搜尋框緩緩展開：JS如下

    //搜尋框彈出
    var search_icon = $(".search-icon");
    var search_bar = $(".search-bar");
    var search = $(".search");
    search_icon.click(function(event){
        search_bar.width() <= 0 ?//如果隱藏，寬度等於0
            //此處一定要先show();否則看不到展開的效果
            (search_bar.show(),search.width(300),task_bar.css({left: "350px"}),
                search_bar.animate({
                    "width": "220px"
                })) : (search_bar.animate({
                    "width": "0px"
                },function(){
                    search_bar.hide();
                    search.width(50);
                task_bar.css({left: "110px"});
        }));
    });
複製程式碼

日曆

    // 時鐘 定義一個函式用以顯示當前時間
    var nowHour = $("#hour");
    var nowDate = $("#date");
    var nowTime = $("#time");
    var nowDays = $("#days");
    var now = null,Days = null;
    displayTime();
    function displayTime() {
        now = new Date(); // 得到當前時間
        var D = now.getDay();
        var H = now.getHours();
        var M = cehckTime(now.getMinutes());
        var S = cehckTime(now.getSeconds());
        //這裡做日期判斷，如果相等則不去重新設定html,避免重複設定，降低系統效能
        Days = (Days == D ? D : showLunarCalendarTime(now));
        nowHour.html(H + ":" + M);
        nowTime.html(H + ":" + M + ":" + S);
        setTimeout(displayTime,1000); //在1秒後再次執行
    }
    //檢驗時間格式 1→01
    function cehckTime(i){
        return i < 10 ? i = "0" + i : i;
    }
    // 顯示時間(這裡需要對月份+1，因為JS獲取到的月份為0-12)
    function showLunarCalendarTime(now){
        var Y = 1990 + now.getYear();
        var O = cehckTime(now.getMonth() + 1);
        var D = cehckTime(now.getDate());
        nowDate.html(Y + "/" + O + "/" + D);
        nowDays.html(Y + "年" + O + "月" + D + "日");
        return now.getDay();
    }複製程式碼

    //日曆 漸顯
    $(".calendar").hover(function(){
        $(".time-piece").stop();//停止動畫，避免使用者重複hover過快
        $(".time-piece").fadeToggle();
    });複製程式碼

點選其他元素關閉開始選單，搜尋框展開

$(document).on("click", function (event) {
	//點選空白，關閉開始選單
	if(start_menu.css("display") != "none"){
	    start_menu.hide()
	}
});複製程式碼

桌面元素

    <!-- 桌面元素 -->
    <div id="desktop">
        <ul class="window">
            <li data-url="init.html">
                <img src="../img/icon/win10.png" />
                <span>Win10UI</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/baidu.png" />
                <span>百度首頁</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/blogger.png" />
                <span>Blog</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/demo.png" />
                <span>媒體視訊</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/download.png" />
                <span>下載資源</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/doc.png" />
                <span>線上文件</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/github.png" />
                <span>Github</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/kyzg.png" />
                <span>開源中國</span>
            </li>
            <li data-url="init.html">
                <img src="../img/icon/website.png" />
                <span>設定中心</span>
            </li>
        </ul>
    </div>複製程式碼

    /*桌面 start*/
    #desktop{
	position: fixed;
	top: 0;
	bottom: 50px;
	width: 100%;
	/*設定文字不可被選中*/
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 9;
    }
    .window li{
	position: absolute;//設定絕對定位，通過JS設定位置
	display: block;
	width: 70px;
	height: 70px;
	padding: 7px 15px;
	/*設定border-box 避免padding的畫素擴張*/
	box-sizing: border-box;
	border-radius: 5px;
	cursor: pointer;
    }桌面複製程式碼

元素定位(實現自適應,高度變化，每列元素個數也隨之變化)

這個函式比較難以理解。大家如果有什麼不懂或是更好的建議的地方，可以評論，我會一一回復。

    /*元素的定位函式*/
    //第一個元素的位置，之後的元素的位置 都需要加上這個初始值
    var heightTop = 10;
    var widthLeft = 10;
	
    //每列元素的個數
    var LisCount = 0;
    var Lis = $(".window > li");
	
    LisPosition(Lis);
    $(window).resize(function () {
        LisPosition(Lis);
    });
    //元素定位函式實現
    function LisPosition(obj){
        //獲取窗體的高度
        var windowHeight = $(window).height() - 50;
        //每列元素的最大個數， floor向下取整
        var LisMaxCount = Math.floor(windowHeight / 90);
        $(obj).each(function(index,item){
            var topHeight = heightTop + LisCount * 80;
            //如果元素的top值 大於視窗的最大高度 而且這一列元素的個數 大於每列最大的元素個數 
            //則執行重置操作
            if(LisMaxCount < LisCount){
                LisCount = 0;
		widthLeft = widthLeft + 80;
		topHeight = heightTop + LisCount * 80;
            }
            $(item).css({
                top: topHeight,
                left: widthLeft
            });
            //繫結點選事件
            $(item).bind("click",function(){
                openNewWindow(this);
            });
            LisCount ++;
        })
        heightTop = 10;
        widthLeft = 10;
        LisCount = 0;
        /*彈窗定位*/
        $(".pop-ups").css({
            left: ($(window).width() - $(this).outerWidth()) / 2,
            top: ($(window).height() - $(this).outerHeight()) / 2
        });
    }複製程式碼

點選桌面元素彈窗

在上一步我們在元素排序的時候，已經給沒個元素繫結上點選事件openNewWindow(this);了。

第一步：判斷是否已經開啟同一視窗
第二步：判斷task_bar（底部顯示圖示的部位）的寬度夠不夠顯示
第三步：task_bar 增加桌面元素的圖示 + 新增彈窗
第四步：彈窗內容區域載入指定頁面
第五步：繫結底部的圖示點選事件(彈窗置頂：比如開啟了多個頁面，點選第一個視窗對應的底部圖示，開啟這個彈窗)
第六步：繫結最小化彈窗事件
第七步：繫結關閉彈窗事件
第八步：繫結最大化彈窗事件

//開啟視窗函式
function openNewWindow(obj){
	//判斷是否已經開啟同一視窗
	var pop_name = $(obj).find("span").text();
	if(pop_names.indexOf(pop_name) == -1){
		pop_names += (pop_name + ",");
	}else{
		layer.msg(pop_name +"視窗已經開啟了~");
		return null;
	}
	//首先應該判斷task_bar的寬度夠不夠顯示
	//footer增加標題
        //取消active的狀態
	task_bar.find("div").removeClass("task-active");
	var task = $("<div class='task task-active'></div>");
	task.append($(obj).find("img").clone()).append("<span></span>");
	if(task_width > task_bar.width()){
		layer.msg("您當前開啟的視窗太多了，休息一下吧~");
		return ;
	}else{
		task_bar.append(task);
		task_width += (task.width() + 3);
	}
	var pop_ups = $("<div class='pop-ups'></div>");
	var pop_menu = $("<div class='pop-menu'></div>");
	var pop_title = $("<div class='pop-title'></div>");
	var pop_func = $("<div class='pop-func'></div>");
	var pop_container = $("<div class='pop-container'></div>");
	var fa_refresh = $("<span><i class='fa fa-refresh'></i></span>");
	var fa_minus = $("<span><i class='fa fa-minus'></i></span>");
	var fa_window_maximize = $("<span><i class='fa fa-window-maximize'></i></span>");
	var fa_remove = $("<span><i class='fa fa-remove'></i></span>");
	pop_func.append(fa_refresh).append(fa_minus).append(fa_window_maximize).append(fa_remove);
	pop_ups.append(pop_menu.append(pop_title).append(pop_func)).append(pop_container);
	pop_title.html($(obj).find("*").clone());
	//新增彈窗
	$("body").append(pop_ups);
	//居中
	pop_left = ($(window).width() - pop_ups.outerWidth()) / 2 + pop_windows_count * 15;
	pop_top = ($(window).height() - pop_ups.outerHeight()) / 2 + pop_windows_count * 10;
	if(pop_left + pop_ups.outerWidth() > $(window).width() || 
		pop_top + pop_ups.outerHeight() > $(window).height()){
		pop_windows_count = 0;
		pop_left = ($(window).width() - pop_ups.outerWidth()) / 2 + pop_windows_count * 15;
		pop_top = ($(window).height() - pop_ups.outerHeight()) / 2 + pop_windows_count * 10;
	}
	pop_windows_count ++;
	pop_ups.css({
		left: pop_left,
		top: pop_top,
		"z-index": z_index++
        });
        //載入頁面
        pop_container.load($(obj).attr("data-url"));
	//底部的圖示 繫結事件
	task.bind("click",function(){
		pop_ups.css({"z-index": z_index++});
		task_bar.find("div").removeClass("task-active");
		$(this).addClass("task-active");
	});
	//最小化彈窗
	fa_minus.bind("click", function(){
		pop_ups.hide();
	});
	//關閉彈窗
	fa_remove.bind("click", function(){
		pop_ups.remove();
		task_width -= (task.width() + 3);
		if(-- pop_windows_count< 0){
			pop_windows_count = Math.floor(task_width /(task.width() + 3));
		}
		task.remove();
		z_index --;
		pop_names = pop_names.replace(pop_name + ",",",");
	});
	//最大化彈窗
	fa_window_maximize.bind("click", function(){
		if($(this).html() != '<i class="fa fa-window-restore"></i>'){
			pop_ups.css({
				left: 0,
				top: 0,
				width: "100%",
				height: "100%"
			});
			$(this).html("<i class='fa fa-window-restore'></i>");
		}else{
			var width = $(window).width() * 0.8 > 400 ? $(window).width() * 0.8 : 400;
			var height = $(window).height() * 0.8 > 400 ? $(window).height() * 0.8 : 400;
			pop_ups.css({
				left: ($(window).width() - width) / 2,
				top: ($(window).height() - height) / 2,
				width: width,
				height: height
			});
			$(this).html("<i class='fa fa-window-maximize'></i>");
		}
	});
	
}複製程式碼

重置右鍵

模擬PC，所以要重置右鍵。因為有可能應用後臺系統（表格），所以保留列印選項

<!-- 桌面 右鍵選單 -->
<div class="desktop-menu">
	<ul class="context">
		<li id="desktop_fullscreen">
			<i class="fa fa-window-maximize"></i>
			<span>進入全屏</span>
		</li>
		<li id="desktop_refresh">
			<i class="fa fa-refresh"></i>
			<span>重新整理本頁</span>
		</li>
		<li id="desktop_print">
			<i class="fa fa-print"></i>
			<span>列印本頁</span>
		</li>
		<hr class="layui-bg-gray" style="margin: 0;" />
		<li id="desktop_about">
			<i class="fa fa-star-half-o"></i>
			<span>關於</span>
		</li>
	</ul>
</div>複製程式碼

桌面右鍵JS事件

//桌面重置右鍵
$("#desktop").bind("contextmenu",function(e){
   context_menu.hide();
   var key = e.which; //獲取滑鼠鍵位
    if(key == 3)  //(1:代表左鍵； 2:代表中鍵； 3:代表右鍵)  
    {  
	//獲取右鍵點選座標  
        var x = ($(window).width() - e.clientX) < desktop_menu.width() ? 
        	e.clientX - desktop_menu.width() - 4 : e.clientX;
        var y = ($(window).height() - e.clientY) < desktop_menu.height() ? 
        	e.clientY  - desktop_menu.height() - 4 : e.clientY;
        desktop_menu.show().css({left:x,top:y});  
    }
    return false;
});
//全屏
$("#desktop_fullscreen").click(function (){
	if($(this).find("i").attr("class") == "fa fa-window-maximize"){
		$(this).html("<i class='fa fa-window-restore'></i><span>退出全屏</span>");
		var elem = document.body;
		if(elem.webkitRequestFullScreen){
	        elem.webkitRequestFullScreen();   
	    }else if(elem.mozRequestFullScreen){
	        elem.mozRequestFullScreen();
	    }else if(elem.requestFullScreen){
	        elem.requestFullscreen();
	    }else{
	        layer.msg("瀏覽器不支援全屏API或已被禁用");
	    }
	}else{
		$(this).html("<i class='fa fa-window-maximize'></i><span>進入全屏</span>");
		var elem = document;
	    if(elem.webkitCancelFullScreen){
	        elem.webkitCancelFullScreen();    
	    }else if(elem.mozCancelFullScreen){
	        elem.mozCancelFullScreen();
	    }else if(elem.cancelFullScreen){
	        elem.cancelFullScreen();
	    }else if(elem.exitFullscreen){
	        elem.exitFullscreen();
	    }else{
	        layer.msg("瀏覽器不支援全屏API或已被禁用");
	    }
	}
});
//列印
$("#desktop_print").click(function (){
	window.print();
});
//自重新整理
$("#desktop_refresh").click(function (){
	location.reload();
});複製程式碼

底部導航欄右鍵

<!-- footer右鍵選單 -->
<div class="context-menu">
	<ul class="context">
		<li id="context_all_show">
			<i class="fa fa-window-maximize"></i>
			<span>全部顯示</span>
		</li>
		<li id="context_all_hide">
			<i class="fa fa-minus"></i>
			<span>全部隱藏</span>
		</li>
		<li id="context_all_close">
			<i class="fa fa-remove"></i>
			<span>全部關閉</span>
		</li>
	</ul>
</div>複製程式碼

JS事件

//底部導航條重置右鍵
$("footer").bind("contextmenu",function(e){
    desktop_menu.hide()
    var key = e.which; //獲取滑鼠鍵位
    if(key == 3)  //(1:代表左鍵； 2:代表中鍵； 3:代表右鍵)  
    {  
	//獲取右鍵點選座標  
        var x = ($(window).width() - e.clientX) < context_menu.width() ? 
        	e.clientX - context_menu.width() - 4 : e.clientX;  
        var y = e.clientY  - context_menu.height() - 4;
        context_menu.show().css({left:x,top:y});  
    }
    return false;
});複製程式碼

//全部關閉
$("#context_all_close").click(function(){
	task_bar.empty();
	$("body .pop-ups").remove();
	//重置彈窗引數
	pop_windows_count = 0;
	task_width = 53;
	z_index = 99;
});
//全部隱藏
$("#context_all_hide").click(function(){
	$("body .pop-ups").hide();
});
//全部顯示
$("#context_all_show").click(function(){
	$("body .pop-ups").show();
});複製程式碼

分析大多都寫在註釋裡了。辛苦大家仔細看一下~了。。。

如果有更好的思路和或者有不理解的地方，歡迎共同討論。

不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸。 ——文森特・梵高

瀑布流程式碼實現及思路
2019-10-09
HashTable實現程式碼分享
2021-10-27
ASP.NET 大檔案下載的實現思路及程式碼
2015-03-03
ASP.NET
android 自定義ScrollView實現背景圖片伸縮的實現程式碼及思路
2013-12-11
AndroidView
多執行緒-多執行緒方式2的思路及程式碼實現
2017-06-03
執行緒
DES原理及程式碼實現
2020-04-20
Swift實現俄羅斯方塊詳細思路及原始碼
2016-05-12
Swift原始碼
C語言二維陣列實現三子棋的思路及程式碼
2020-11-17
C語言陣列
Jquery實現的高亮效果程式碼分享
2021-09-09
jQuery
CNN介紹及程式碼實現
2019-01-24
CNN
BiLSTM介紹及程式碼實現
2018-10-24
棧的應用場景思路分析和程式碼實現
2021-03-04
php配置檔案與程式碼分離的實現思路
2017-11-12
PHP
[Android]程式碼實現ColorStateList及StateListDrawable
2017-06-09
Android
簡版排程中心搭建及實現思路
2019-04-22
中綴轉字尾表示式思路分析和程式碼實現
2021-03-04
實現動態驗證碼的思路
2014-07-03
JavaScript中的繼承及實現程式碼
2018-12-14
JavaScript繼承
Java實現SSH模式加密原理及程式碼
2016-01-07
Java模式加密
JavaScript簡單抽獎程式的實現及程式碼
2015-05-10
JavaScript
關於搶購秒殺的實現思路與事例程式碼
2018-10-30
html網頁中如何實現居中效果（程式碼分享）
2021-09-11
HTML網頁
微信域名檢測實現機制與程式碼分享
2021-04-01
分享一個c執行緒池實現程式碼
2011-11-21
執行緒
值得收藏的手寫程式碼面試題及思路解析
2019-10-30
面試題
layui 下拉框搜尋及程式碼實現
2020-12-31
UI
zookeeper 主要應用場景及程式碼實現
2017-03-26
ECharts實現資料圖表分析及程式碼
2015-05-30
Echarts
Android 熱更新實現原理及程式碼分析
2015-11-15
Android
MySQL藉助DB實現分散式鎖思路示例程式碼詳解
2019-10-14
MySql分散式
JavaScript：十大排序的演算法思路和程式碼實現
2019-06-02
JavaScript排序演算法
一個快速切換一個底層實現的思路分享
2022-06-26
例項程式碼分享Python實現Linux監控
2021-07-18
PythonLinux
小程式海報最佳實現思路，視覺化編輯直接生成程式碼使用
2019-09-25
視覺化
Toast 元件實現思路
2018-12-02
AST元件
promise基本實現思路
2018-06-12
Promise
Java高效能解析器實現思路及方法
2015-01-20
Java
簡單工廠模式(simple factory)及程式碼實現
2020-10-25
模式