muzi
/
macUI
mirror of https://github.com/1099438829/macUI.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增浏览器组件

This commit is contained in:
muzi 2019-10-05 01:28:43 +08:00
parent 0841281cb0
commit de32fa14d0
14 changed files with 96 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/safari/css/index.css Normal file
View File

@ -0,0 +1 @@
body{padding:0;margin:0;font-family:microsoft yahei,segoe ui,lucida grande,Helvetica,Arial,sans-serif;font-size:14px;color:#333}.container{width:590px;margin:0 auto;padding-top:100px;position:relative}.container:after{content:'';display:block;clear:both}.container>div{float:left}.container .logo{width:100%;height:120px;margin:0 auto 10px;background-position:center;background-repeat:no-repeat;background-size:auto 120px}.container .input{position:relative;width:500px;height:44px;border-top:#ccc solid 1px;border-right:0;border-bottom:#ccc solid 1px;border-left:#ccc solid 1px;border-radius:4px 0 0 4px}.container .input>input{outline:0;border:0;padding:0 80px 0 10px;margin:0;height:44px;width:410px;color:#333;font-size:16px;border-radius:4px 0 0 4px}.container .input>input::-webkit-input-placeholder{color:#999}.container .input .picker{width:40px;padding-right:30px;position:absolute;top:0;right:0;height:100%;line-height:44px;cursor:pointer;color:#999;font-size:12px;text-align:right;background-image:url(../images/down.png);background-position:50px center;background-repeat:no-repeat;user-select:none}.container .input .picker-list{list-style:none;padding:5px 0;width:100px;position:absolute;right:0;top:50px;margin:0;line-height:26px;font-size:12px;border-radius:2px;box-shadow:0 1px 5px rgba(0,0,0,.2);background-color:#fff;display:none}.container .input .picker-list>li{padding-left:36px;background-position:10px center;background-repeat:no-repeat;background-size:16px auto}.container .input .picker-list>li:hover{background-color:#ebf1f5;cursor:pointer}.container .input .hot-list{padding:10px 0;width:100%;position:absolute;left:0;top:50px;margin:0;line-height:32px;font-size:14px;border-radius:2px;box-shadow:0 1px 5px rgba(0,0,0,.2);background-color:#fff;display:none}.container .input .hot-list>a{display:block;color:#333;text-decoration:none;padding:0 10px;overflow:hidden}.container .input .hot-list>a:hover{background-color:#f3f3f3}.container .input .hot-list>a>div{float:left}.container .input .hot-list>a>div.number{text-align:center;width:40px}.container .search{width:89px;height:46px;background-color:#08f;background-image:url(../images/search.png);background-position:center;background-repeat:no-repeat;border-radius:0 4px 4px 0;cursor:pointer}

BIN
app/safari/images/baidu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
app/safari/images/down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 B

BIN
app/safari/images/ico_baidu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 178 B

BIN
app/safari/images/ico_bing.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 239 B

BIN
app/safari/images/ico_google.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
app/safari/images/ico_sogou.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 562 B

BIN
app/safari/images/search.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 297 B

32
app/safari/index.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿浏览器主页搜索</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="logo" style="background-image: url(images/baidu.png)"></div>
<div class="input">
<input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input">
<div class="picker">百度</div>
<ul class="picker-list">
<li style="background-image: url(images/ico_baidu.png)" data-logo="baidu.png">百度</li>
<li style="background-image: url(images/ico_sogou.png)" data-logo="sogou.png">搜狗</li>
<li style="background-image: url(images/ico_bing.png)" data-logo="bing.png">bing</li>
<li style="background-image: url(images/ico_google.ico)" data-logo="google.png">Google</li>
</ul>
<div class="hot-list"></div>
</div>
<div class="search"></div>
</div>
<script src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
$(function () {
helangSearch.init();
})
</script>
</body>
</html>

58
app/safari/js/index.js Normal file
View File

@ -0,0 +1,58 @@
var helangSearch = {
els: {},
searchIndex: 0,
hot: {
color: ['#ff2c00', '#ff5a00', '#ff8105', '#fd9a15', '#dfad1c', '#6bc211', '#3cc71e', '#3cbe85', '#51b2ef', '#53b0ff'],
list: ['1099438829@qq.com', 'qq:1099438829', '木子的忧伤', 'macUI', '猿码云', 'apecloud.cn', 'win10ui', 'https://github.com/1099438829/macUI']
},
init: function() {
var _this = this;
this.els = {
pickerBtn: $(".picker"),
pickerList: $(".picker-list"),
logo: $(".logo"),
hotList: $(".hot-list"),
input: $("#search-input"),
button: $(".search")
};
this.els.hotList.html(function() {
var str = '';
$.each(_this.hot.list, function(index, item) {
str += '<a href="https://www.baidu.com/s?ie=utf8&oe=utf8&tn=98010089_dg&ch=11&wd=' + item + '" target="_blank">' + '<div class="number" style="color: ' + _this.hot.color[index] + '">' + (index + 1) + '</div>' + '<div>' + item + '</div>' + '</a>';
});
return str;
});
this.els.pickerBtn.click(function() {
if (_this.els.pickerList.is(':hidden')) {
setTimeout(function() {
_this.els.pickerList.show();
}, 100);
}
});
this.els.pickerList.on("click", ">li", function() {
_this.els.logo.css("background-image", ('url(img/' + $(this).data("logo") + ')'));
_this.searchIndex = $(this).index();
_this.els.pickerBtn.html($(this).html())
});
this.els.input.click(function() {
if (!$(this).val()) {
setTimeout(function() {
_this.els.hotList.show();
}, 100);
}
});
this.els.input.on("input", function() {
if ($(this).val()) {
_this.els.hotList.hide();
}
});
this.els.button.click(function() {
var searchArr = ['百度', '搜狗', '必应', '谷歌'];
alert(searchArr[_this.searchIndex] + "搜索：" + _this.els.input.val());
});
$(document).click(function() {
_this.els.pickerList.hide();
_this.els.hotList.hide();
});
}
};

4
app/safari/js/jquery-2.2.4.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

68
css/index.css
View File

@ -698,7 +698,6 @@ body {
display: none; display: none;
} }
.win10-open-iframe .layui-layer-min cite{display: none;} .win10-open-iframe .layui-layer-min cite{display: none;}
.win10-open-iframe .layui-layer-max:hover{background-image:none} .win10-open-iframe .layui-layer-max:hover{background-image:none}
.win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none} .win10-open-iframe .layui-layer-max,.layui-layer-maxmin{background:none}
@ -769,73 +768,6 @@ body {
font: normal normal normal 16px/1 FontAwesome; font: normal normal normal 16px/1 FontAwesome;
} }
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
text-decoration: none;
}
.win10-layer-open-browser .layui-layer-ico{background-image:none;}
.win10-layer-open-browser textarea{
margin: 20px;
outline: none;
resize: none;
}
.win10-layer-open-browser .layui-layer-min cite{display: none;}
.win10-layer-open-browser .layui-layer-max:hover{background-image:none}
.win10-layer-open-browser .layui-layer-max,.layui-layer-maxmin{background:none}
.win10-layer-open-browser .layui-layer-setwin a.layui-layer-close:hover::before{
content:"\f057";
color: #FF6057;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-min::before{
content:"\f111";
color: #28CA40;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-min:hover::before{
content:"\f056";
color: #28CA40;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-max::before{
content:"\f111";
color: #FFBD2E;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-max:hover::before{
content:"\f055";
color: #FFBD2E;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max::before{
content:"\f111";
color: #FFBD2E;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-maxmin.layui-layer-max:hover::before{
content:"\f055";
color: #FFBD2E;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-close::before{
content:"\f111";
color: #FF6057;
font: normal normal normal 16px/1 FontAwesome;
}
.win10-layer-open-browser .layui-layer-min,.layui-layer-close,.layui-layer-max{
text-decoration: none;
}
/*右键菜单*/ /*右键菜单*/
#win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.75); border: #CCC 1px solid; display: block; border-radius: 5px; z-index: 99999999; } #win10 .win10-context-menu { left: 0;top: 0;position: fixed; width: 150px; height: auto; background-color: rgba(255, 255, 255,0.75); border: #CCC 1px solid; display: block; border-radius: 5px; z-index: 99999999; }
#win10 .win10-context-menu ul { margin: 0px; padding: 0px; } #win10 .win10-context-menu ul { margin: 0px; padding: 0px; }

2
index.html
View File

@ -52,7 +52,7 @@
<div id="win10_task_bar"> <div id="win10_task_bar">
<div id="win10_btn_group_left" class="btn_group"> <div id="win10_btn_group_left" class="btn_group">
<div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div> <div id="win10_btn_win" class="btn"><span class="fa fa-apple"></span></div>
<div class="btn" id="win10-btn-browser"><span class="fa fa-safari"></span></div> <div class="btn" onclick="Win10.openUrl('./app/safari','<span class=\'fa fa-safari\'></span>','safari')"><span class="fa fa-safari"></span></div>
</div> </div>
<div id="win10_btn_group_middle" class="btn_group"></div> <div id="win10_btn_group_middle" class="btn_group"></div>
<div id="win10_btn_group_right" class="btn_group"> <div id="win10_btn_group_right" class="btn_group">

17
js/mac.js
View File

@ -382,23 +382,6 @@ window.Win10 = {
e=e.next(); e=e.next();
} }
}); });
$("#win10-btn-browser").click(function () {
var area = ['100%', (document.body.clientHeight - 30) + 'px'];
var offset = ['0', '0'];
layer.prompt({
title: Win10.lang('访问网址','Visit URL'),
formType: 2,
value: '',
skin:'win10-layer-open-browser',
area: ['300px', '150px'],
zIndex:99999999999
}, function (value, i) {
layer.close(i);
layer.msg(Win10.lang('请稍候...','Hold on please...'),{time:1500},function () {
Win10.openUrl(value,'',value);
});
});
});
setInterval(function () { setInterval(function () {
//重新写mac时间 //重新写mac时间
var myDate = Win10.getLunarObj(); var myDate = Win10.getLunarObj();