如下是響應式下的介面:
如果大家想要原始碼：點選進入>>
開門見山的說,為什麼要把網頁做成這種樣式呢？
實話說：你們不覺得這樣的一個介面去做為我們後臺作業系統的介面。不僅美觀還很讓人易操作、易上手吧。
作者在借鑑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();
});複製程式碼分析大多都寫在註釋裡了。辛苦大家仔細看一下~了。。。
如果有更好的思路和或者有不理解的地方，歡迎共同討論。
不要吹滅你的靈感和你的想象力; 不要成為你的模型的奴隸。 ——文森特・梵高