修正浏览器的联动效果屏蔽百度
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 562 B |
|
Before Width: | Height: | Size: 4.4 KiB After Width: | Height: | Size: 4.4 KiB |
|
|
@ -1,32 +1,35 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="utf-8">
|
||||||
<title>仿浏览器主页搜索</title>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="stylesheet" href="css/index.css">
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
||||||
|
<title>浏览器主页搜索</title>
|
||||||
|
<meta name="description" content="浏览器主页搜索">
|
||||||
|
<meta name="keywords" content="浏览器主页搜索">
|
||||||
|
<link rel='Shortcut Icon' type='image/x-icon' href='./img/favicon.ico'>
|
||||||
|
<link rel="stylesheet" href="css/index.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="logo" style="background-image: url(img/baidu.png)"></div>
|
<div class="logo"></div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input">
|
<input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input" />
|
||||||
<div class="picker">百度</div>
|
<div class="picker"></div>
|
||||||
<ul class="picker-list">
|
<ul class="picker-list"></ul>
|
||||||
<li style="background-image: url(img/ico_baidu.png)" data-logo="baidu.png">百度</li>
|
<div class="hot-list"></div>
|
||||||
<li style="background-image: url(img/ico_sogou.png)" data-logo="sogou.png">搜狗</li>
|
</div>
|
||||||
<li style="background-image: url(img/ico_bing.png)" data-logo="bing.png">bing</li>
|
<div class="search"></div>
|
||||||
<li style="background-image: url(img/ico_google.ico)" data-logo="google.png">Google</li>
|
</div>
|
||||||
</ul>
|
<script src="js/jquery-2.2.4.min.js"></script>
|
||||||
<div class="hot-list"></div>
|
<script type="text/javascript" src="js/index.js"></script>
|
||||||
</div>
|
<script type="text/javascript">
|
||||||
<div class="search"></div>
|
$(function () {
|
||||||
</div>
|
helangSearch.init();
|
||||||
<script src="js/jquery-2.2.4.min.js"></script>
|
});
|
||||||
<script type="text/javascript" src="js/index.js"></script>
|
</script>
|
||||||
<script type="text/javascript">
|
|
||||||
$(function () {
|
|
||||||
helangSearch.init();
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -5,11 +5,38 @@ var helangSearch = {
|
||||||
color: ['#ff2c00', '#ff5a00', '#ff8105', '#fd9a15', '#dfad1c', '#6bc211', '#3cc71e', '#3cbe85', '#51b2ef', '#53b0ff'],
|
color: ['#ff2c00', '#ff5a00', '#ff8105', '#fd9a15', '#dfad1c', '#6bc211', '#3cc71e', '#3cbe85', '#51b2ef', '#53b0ff'],
|
||||||
list: ['木子的忧伤', 'macUI', '猿码云', 'apecloud.cn', 'win10ui', 'https://github.com/1099438829/macUI']
|
list: ['木子的忧伤', 'macUI', '猿码云', 'apecloud.cn', 'win10ui', 'https://github.com/1099438829/macUI']
|
||||||
},
|
},
|
||||||
searchArr : [
|
searchObj : [
|
||||||
'https://www.baidu.com/s?ie=UTF-8&wd=',//百度
|
//废弃百度,百度不允许iframe
|
||||||
'https://www.sogou.com/web?query=', //搜狗
|
// {
|
||||||
'https://cn.bing.com/search?q=', //必应
|
// logo : 'img/baidu.png',
|
||||||
'https://www.google.com/search?q=',//谷歌
|
// ico : 'img/ico_baidu.png',
|
||||||
|
// title : '百度',
|
||||||
|
// url : 'https://www.baidu.com/s?wd=',
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
logo : 'img/sougou.png',
|
||||||
|
ico : 'img/ico_sougou.png',
|
||||||
|
title : '搜狗',
|
||||||
|
url : 'https://www.sogou.com/web?query=',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
logo : 'img/360.png',
|
||||||
|
ico : 'img/ico_360.ico',
|
||||||
|
title : '360',
|
||||||
|
url : 'https://www.so.com/s?ie=utf-8&q=',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
logo : 'img/bing.png',
|
||||||
|
ico : 'img/ico_bing.png',
|
||||||
|
title : '必应',
|
||||||
|
url : 'https://cn.bing.com/search?q=',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
logo : 'img/google.png',
|
||||||
|
ico : 'img/ico_google.ico',
|
||||||
|
title : '谷歌',
|
||||||
|
url : 'https://www.google.com/search?q=',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
init: function() {
|
init: function() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
|
|
@ -21,13 +48,29 @@ var helangSearch = {
|
||||||
input: $("#search-input"),
|
input: $("#search-input"),
|
||||||
button: $(".search")
|
button: $(".search")
|
||||||
};
|
};
|
||||||
this.els.hotList.html(function() {
|
function renderHotList(){
|
||||||
|
_this.els.hotList.html(function() {
|
||||||
|
var str = '';
|
||||||
|
$.each(_this.hot.list, function(index, item) {
|
||||||
|
str += '<a href="'+ _this.searchObj[_this.searchIndex].url + item + '" target="_self">' + '<div class="number" style="color: ' + _this.hot.color[index] + '">' + (index + 1) + '</div>' + '<div>' + item + '</div>' + '</a>';
|
||||||
|
});
|
||||||
|
return str;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
this.els.pickerList.html(function() {
|
||||||
var str = '';
|
var str = '';
|
||||||
$.each(_this.hot.list, function(index, item) {
|
$.each(_this.searchObj, function(index,item) {
|
||||||
str += '<a href="'+_this.searchArr[_this.searchIndex] + item + '" target="_self">' + '<div class="number" style="color: ' + _this.hot.color[index] + '">' + (index + 1) + '</div>' + '<div>' + item + '</div>' + '</a>';
|
str += '<li style="background-image: url(' + item.ico + ')" data-logo="' + item.logo + '">' + item.title + '</li>';
|
||||||
});
|
});
|
||||||
return str;
|
return str;
|
||||||
});
|
});
|
||||||
|
var firstSearchObj = _this.searchObj[0];
|
||||||
|
this.els.logo.css("background-image",'url('+ firstSearchObj.logo +')');
|
||||||
|
this.els.pickerBtn.text(function() {
|
||||||
|
renderHotList();
|
||||||
|
return firstSearchObj.title;
|
||||||
|
});
|
||||||
|
|
||||||
this.els.pickerBtn.click(function() {
|
this.els.pickerBtn.click(function() {
|
||||||
if (_this.els.pickerList.is(':hidden')) {
|
if (_this.els.pickerList.is(':hidden')) {
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
|
@ -36,9 +79,10 @@ var helangSearch = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.els.pickerList.on("click", ">li", function() {
|
this.els.pickerList.on("click", ">li", function() {
|
||||||
_this.els.logo.css("background-image", ('url(img/' + $(this).data("logo") + ')'));
|
_this.els.logo.css("background-image", ('url(' + $(this).data("logo") + ')'));
|
||||||
_this.searchIndex = $(this).index();
|
_this.searchIndex = $(this).index();
|
||||||
_this.els.pickerBtn.html($(this).html())
|
_this.els.pickerBtn.html($(this).html());
|
||||||
|
renderHotList();
|
||||||
});
|
});
|
||||||
this.els.input.click(function() {
|
this.els.input.click(function() {
|
||||||
if (!$(this).val()) {
|
if (!$(this).val()) {
|
||||||
|
|
@ -53,7 +97,7 @@ var helangSearch = {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
this.els.button.click(function() {
|
this.els.button.click(function() {
|
||||||
location.href = _this.searchArr[_this.searchIndex] + _this.els.input.val();
|
location.href = _this.searchObj[_this.searchIndex].url + _this.els.input.val();
|
||||||
});
|
});
|
||||||
$(document).click(function() {
|
$(document).click(function() {
|
||||||
_this.els.pickerList.hide();
|
_this.els.pickerList.hide();
|
||||||
|
|
|
||||||
22
demo.html
|
|
@ -20,9 +20,6 @@
|
||||||
<div id="win10_task_bar" class="backgroud_blur">
|
<div id="win10_task_bar" class="backgroud_blur">
|
||||||
<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"
|
|
||||||
onclick="Win10.openUrl('./app/safari','<span class=\'icon 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">
|
||||||
|
|
@ -38,6 +35,11 @@
|
||||||
<img class="icon" src="./img/icon/computer.png" />
|
<img class="icon" src="./img/icon/computer.png" />
|
||||||
<div class="title">OS官网</div>
|
<div class="title">OS官网</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="shortcut"
|
||||||
|
onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')">
|
||||||
|
<img class="icon" src="./img/icon/safari.png" />
|
||||||
|
<div class="title">safari</div>
|
||||||
|
</div>
|
||||||
<div class="shortcut"
|
<div class="shortcut"
|
||||||
onclick="Win10.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','note')">
|
onclick="Win10.openUrl('./app/todo','<img class=\'icon\' src=\'./img/icon/notes.png\'/>','note')">
|
||||||
<img class="icon" src="./img/icon/notes.png" />
|
<img class="icon" src="./img/icon/notes.png" />
|
||||||
|
|
@ -139,21 +141,17 @@
|
||||||
<!--bottom dock -->
|
<!--bottom dock -->
|
||||||
<div class="dock" id="dock">
|
<div class="dock" id="dock">
|
||||||
<div class="dock-container backgroud_blur">
|
<div class="dock-container backgroud_blur">
|
||||||
<a class="dock-item"
|
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"><span>finder</span><img src="./img/icon/finder.png" alt="finder"></a>
|
||||||
onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')">
|
<a class="dock-item" onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"><span>safari</span><img src="./img/icon/safari.png" alt="safari"></a>
|
||||||
<img src="./img/icon/finder.png"></a>
|
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png"
|
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||||
alt="appstore" /></a>
|
|
||||||
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png"
|
|
||||||
alt="gamecenter" /></a>
|
|
||||||
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||||
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||||
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
<a class="dock-item" href="#"><span>iTunes</span><img src="./img/icon/iTunes.png" alt="iTunes" /></a>
|
||||||
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
<a class="dock-item" href="#"><span>mail</span><img src="./img/icon/mail.png" alt="mail" /></a>
|
||||||
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
<a class="dock-item" href="#"><span>maps</span><img src="./img/icon/maps.png" alt="maps" /></a>
|
||||||
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png"
|
<a class="dock-item" href="#"><span>trashicon</span><img src="./img/icon/trashicon.png" alt="trashicon" /></a>
|
||||||
alt="trashicon" /></a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 14 KiB |
|
|
@ -19,7 +19,6 @@
|
||||||
<div id="win10_task_bar" class="backgroud_blur">
|
<div id="win10_task_bar" class="backgroud_blur">
|
||||||
<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" onclick="Win10.openUrl('./app/safari','<span class=\'icon 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">
|
||||||
|
|
@ -84,8 +83,9 @@
|
||||||
<div class="dock-container backgroud_blur">
|
<div class="dock-container backgroud_blur">
|
||||||
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <span>finder</span><img src="./img/icon/finder.png"></a>
|
<a class="dock-item" onclick="Win10.openUrl('./app/finder','<img class=\'icon\' src=\'./img/icon/finder.png\'/>','finder')"> <span>finder</span><img src="./img/icon/finder.png"></a>
|
||||||
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')" ><span>UI官网</span><img src="./img/icon/computer.png" alt="UI官网" /></a>
|
<a class="dock-item" href="#" onclick="Win10.openUrl('http://win10ui.yuri2.cn','<img class=\'icon\' src=\'./img/icon/computer.png\'/>','UI官网')" ><span>UI官网</span><img src="./img/icon/computer.png" alt="UI官网" /></a>
|
||||||
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
<a class="dock-item" onclick="Win10.openUrl('./app/safari','<img class=\'icon\' src=\'./img/icon/safari.png\'/>','safari')"> <span>safari</span><img src="./img/icon/safari.png"></a>
|
||||||
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
<a class="dock-item" href="#"><span>appstore</span><img src="./img/icon/appstore.png" alt="appstore" /></a>
|
||||||
|
<a class="dock-item" href="#"><span>gamecenter</span><img src="./img/icon/gamecenter.png" alt="gamecenter" /></a>
|
||||||
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
<a class="dock-item" href="#"><span>imusic</span><img src="./img/icon/imusic.png" alt="imusic" /></a>
|
||||||
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
<a class="dock-item" href="#"><span>notes</span><img src="./img/icon/notes.png" alt="notes" /></a>
|
||||||
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
<a class="dock-item" href="#"><span>setting</span><img src="./img/icon/icloud.png" alt="setting" /></a>
|
||||||
|
|
|
||||||