mirror of
https://github.com/caojiezi2003/Snavigation.git
synced 2024-09-20 05:12:52 +00:00
Fix 搜索框无法点击 #2
This commit is contained in:
底层用户
parent
75c6e6b3d9
commit
6f48c6ed2d
@ -134,6 +134,46 @@ img.error {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
/*
|
||||
搜索框点击后更改样式
|
||||
*/
|
||||
|
||||
/*搜索框*/
|
||||
.onsearch .all-search {
|
||||
background-color: var(--main-text-form-hover-color);
|
||||
transform: translateY(-140%);
|
||||
transition: ease 0.3s !important;
|
||||
}
|
||||
|
||||
/*背景模糊*/
|
||||
.onsearch #bg {
|
||||
transform: scale(1.08) !important;
|
||||
filter: blur(10px) !important;
|
||||
transition: ease 0.3s !important;
|
||||
}
|
||||
|
||||
/*搜索引擎按钮*/
|
||||
.onsearch #icon-se {
|
||||
color: var(--main-text-form-color) !important;
|
||||
transition: ease 0.5s;
|
||||
}
|
||||
|
||||
/*搜索按钮*/
|
||||
.onsearch #icon-sou {
|
||||
color: var(--main-text-form-color) !important;
|
||||
transition: ease 0.5s;
|
||||
}
|
||||
|
||||
/*时间上移*/
|
||||
.onsearch .tool-all {
|
||||
transform: translateY(-140%) !important;
|
||||
}
|
||||
|
||||
/*搜索引擎选择上移*/
|
||||
.onsearch .search-engine {
|
||||
transform: translateY(-38%) !important;
|
||||
}
|
||||
|
||||
|
||||
/*时间*/
|
||||
.tool-all {
|
||||
@ -372,7 +412,7 @@ img.error {
|
||||
#keywords {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 46%;
|
||||
top: 46.5%;
|
||||
font-size: small;
|
||||
color: var(--main-text-color);
|
||||
background-color: var(--main-background-color);
|
||||
@ -405,7 +445,8 @@ img.error {
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
.keyword:hover {
|
||||
.keyword:hover,
|
||||
.keyword.choose {
|
||||
cursor: pointer;
|
||||
/* font-weight: bold; */
|
||||
transition: 0.3s;
|
||||
@ -1011,4 +1052,4 @@ input[type="radio"]:checked+label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
1
css/style.min.css
vendored
Normal file
1
css/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
17
js/main.js
17
js/main.js
@ -130,12 +130,21 @@ $(function () {
|
||||
})
|
||||
})
|
||||
|
||||
//输入框为空时阻止跳转
|
||||
$(window).keydown(function (e) {
|
||||
var key = window.event ? e.keyCode : e.which;
|
||||
if (key.toString() == "13") {
|
||||
if ($(".wd").val() == "") {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//点击搜索按钮
|
||||
$(".sou-button").click(function () {
|
||||
iziToast.show({
|
||||
message: '问题未修复，请点击键盘上的确认键以搜索',
|
||||
});
|
||||
// $('#search-submit').click();
|
||||
if ($("body").attr("class") === "onsearch") {
|
||||
$("#search-submit").click();
|
||||
}
|
||||
});
|
||||
|
||||
//控制台输出
|
||||
|
||||
205
js/set.js
205
js/set.js
@ -250,74 +250,16 @@ function setBgImgInit() {
|
||||
|
||||
// 搜索框高亮
|
||||
function focusWd() {
|
||||
//输入框
|
||||
$(".all-search").css({
|
||||
"background-color": 'var(--main-text-form-hover-color)',
|
||||
"transition": "ease 0.4s",
|
||||
"transform": "translateY(-140%)"
|
||||
});
|
||||
//背景模糊
|
||||
$('#bg').css({
|
||||
"transform": "scale(1.08)",
|
||||
"filter": "blur(10px)",
|
||||
"transition": "ease 0.3s",
|
||||
});
|
||||
//搜索引擎按钮
|
||||
$('#icon-se').css({
|
||||
"color": 'var(--main-text-form-color)',
|
||||
"transition": "ease 0.5s"
|
||||
});
|
||||
//搜索按钮
|
||||
$('#icon-sou').css({
|
||||
"color": "var(--main-text-form-color)",
|
||||
"transition": "ease 0.5s"
|
||||
});
|
||||
//时间上移
|
||||
$(".tool-all").css({
|
||||
"transform": "translateY(-140%)"
|
||||
});
|
||||
//搜索引擎选择上移
|
||||
$(".search-engine").css({
|
||||
"transform": "translateY(-30%)"
|
||||
});
|
||||
$("body").addClass("onsearch");
|
||||
}
|
||||
|
||||
// 搜索框取消高亮
|
||||
function blurWd() {
|
||||
//输入框
|
||||
$(".all-search").css({
|
||||
"background-color": "",
|
||||
"transition": "ease 0.4s",
|
||||
"transform": ""
|
||||
});
|
||||
//背景模糊
|
||||
$('#bg').css({
|
||||
"transform": "scale(1)",
|
||||
"filter": "blur(0px)",
|
||||
"transition": "ease 0.3s",
|
||||
});
|
||||
//搜索引擎按钮
|
||||
$('#icon-se').css({
|
||||
"color": "var(--main-text-color)",
|
||||
"transition": "ease 0.5s"
|
||||
});
|
||||
//搜索按钮
|
||||
$('#icon-sou').css({
|
||||
"color": 'var(--main-text-color)',
|
||||
"transition": "ease 0.5s"
|
||||
});
|
||||
$("body").removeClass("onsearch");
|
||||
//隐藏输入
|
||||
$(".wd").val("");
|
||||
//时间下移
|
||||
$(".tool-all").css({
|
||||
"transform": "translateY(-120%)"
|
||||
});
|
||||
//隐藏搜索建议
|
||||
$("#keywords").hide();
|
||||
//搜索引擎选择恢复
|
||||
$(".search-engine").css({
|
||||
"transform": "translateY(0)"
|
||||
});
|
||||
}
|
||||
|
||||
// 搜索建议提示
|
||||
@ -333,9 +275,13 @@ function keywordReminder() {
|
||||
$("#keywords").css("width", $('.sou').width());
|
||||
$("#keywords").empty().show();
|
||||
$.each(data.s, function (i, val) {
|
||||
$('#keywords').append("<div class=\"keyword\" data-id=\"" + (i + 1) + "\">" + "<i class='iconfont icon-sousuo'></i>" + val + "</div>");
|
||||
$('#keywords').append(`<div class="keyword" data-id="${i + 1}"><i class='iconfont icon-sousuo'></i>${val}</div>`);
|
||||
});
|
||||
$("#keywords").attr("data-length", data.s["length"]);
|
||||
$(".keyword").click(function () {
|
||||
$(".wd").val($(this).text());
|
||||
$("#search-submit").click();
|
||||
});
|
||||
},
|
||||
error: function () {
|
||||
$("#keywords").empty().show();
|
||||
@ -374,7 +320,8 @@ function seList() {
|
||||
var html = "";
|
||||
var se_list = getSeList();
|
||||
for (var i in se_list) {
|
||||
html += "<div class='se-li' data-url='" + se_list[i]["url"] + "' data-name='" + se_list[i]["name"] + "' data-icon='" + se_list[i]["icon"] + "'><a class='se-li-text'><i id='icon-sou-list' class=' " + se_list[i]["icon"] + " '></i><span>" + se_list[i]["title"] + "</span></a></div>";
|
||||
html += `<div class='se-li' data-url='${se_list[i]["url"]}' data-name='${se_list[i]["name"]}' data-icon='${se_list[i]["icon"]}'>
|
||||
<a class='se-li-text'><i id='icon-sou-list' class='${se_list[i]["icon"]}'></i><span>${se_list[i]["title"]}</span></a></div>`;
|
||||
}
|
||||
$(".search-engine-list").html(html);
|
||||
}
|
||||
@ -385,20 +332,20 @@ function setSeInit() {
|
||||
var se_list = getSeList();
|
||||
var html = "";
|
||||
for (var i in se_list) {
|
||||
var tr = "<div class='se_list_div'><div class='se_list_num'>" + i + "</div>";
|
||||
var tr = `<div class='se_list_div'><div class='se_list_num'>${i}</div>`;
|
||||
if (i === se_default) {
|
||||
tr = "<div class='se_list_div'><div class='se_list_num'>\
|
||||
<i class='iconfont icon-home'></i></div>";
|
||||
tr = `<div class='se_list_div'><div class='se_list_num'>
|
||||
<i class='iconfont icon-home'></i></div>`;
|
||||
}
|
||||
tr += "<div class='se_list_name'>" + se_list[i]["title"] + "</div>\
|
||||
<div class='se_list_button'>\
|
||||
<button class='set_se_default' value='" + i + "' style='border-radius: 8px 0px 0px 8px;'>\
|
||||
<i class='iconfont icon-home'></i></button>\
|
||||
<button class='edit_se' value='" + i + "'>\
|
||||
<i class='iconfont icon-xiugai'></i></button>\
|
||||
<button class='delete_se' value='" + i + "' style='border-radius: 0px 8px 8px 0px;'>\
|
||||
<i class='iconfont icon-delete'></i></button></div>\
|
||||
</div>";
|
||||
tr += `<div class='se_list_name'>${se_list[i]["title"]}</div>
|
||||
<div class='se_list_button'>
|
||||
<button class='set_se_default' value='${i}' style='border-radius: 8px 0px 0px 8px;'>
|
||||
<i class='iconfont icon-home'></i></button>
|
||||
<button class='edit_se' value='${i}'>
|
||||
<i class='iconfont icon-xiugai'></i></button>
|
||||
<button class='delete_se' value='${i}' style='border-radius: 0px 8px 8px 0px;'>
|
||||
<i class='iconfont icon-delete'></i></button></div>
|
||||
</div>`;
|
||||
html += tr;
|
||||
}
|
||||
$(".se_list_table").html(html);
|
||||
@ -431,14 +378,11 @@ function quickData() {
|
||||
var html = "";
|
||||
var quick_list = getQuickList();
|
||||
for (var i in quick_list) {
|
||||
html += "<div class='quick'>\
|
||||
<a href='" + quick_list[i]['url'] + "' target='_blank'>\
|
||||
" + quick_list[i]['title'] + "\
|
||||
</a>\
|
||||
</div>";
|
||||
html += `<div class="quick">
|
||||
<a href="${quick_list[i]['url']}" target="_blank">${quick_list[i]['title']}</a>
|
||||
</div>`;
|
||||
}
|
||||
$(".quick-all").html(html + "<div class='quick'><a id='set-quick'>\
|
||||
<i class='iconfont icon-tianjia-'></i></a></div>");
|
||||
$(".quick-all").html(html + `<div class="quick"><a id="set-quick"><i class="iconfont icon-tianjia-"></i></a></div>`);
|
||||
}
|
||||
|
||||
// 设置-快捷方式加载
|
||||
@ -446,24 +390,24 @@ function setQuickInit() {
|
||||
var quick_list = getQuickList();
|
||||
var html = "";
|
||||
for (var i in quick_list) {
|
||||
tr = "<div class='quick_list_div'>\
|
||||
<div class='quick_list_div_num'>" + i + "</div>\
|
||||
<div class='quick_list_div_name'>" + quick_list[i]['title'] + "</div>\
|
||||
<div class='quick_list_div_button'>\
|
||||
<button class='edit_quick' value='" + i + "' style='border-radius: 8px 0px 0px 8px;'>\
|
||||
<i class='iconfont icon-xiugai'></i></button>\
|
||||
<button class='delete_quick' value='" + i + "' style='border-radius: 0px 8px 8px 0px;'>\
|
||||
<i class='iconfont icon-delete'></i></button>\
|
||||
</div>\
|
||||
</div>\
|
||||
</div>";
|
||||
tr = `
|
||||
<div class='quick_list_div'>
|
||||
<div class='quick_list_div_num'>${i}</div>
|
||||
<div class='quick_list_div_name'>${quick_list[i]['title']}</div>
|
||||
<div class='quick_list_div_button'>
|
||||
<button class='edit_quick' value='${i}' style='border-radius: 8px 0px 0px 8px;'>
|
||||
<i class='iconfont icon-xiugai'></i></button>
|
||||
<button class='delete_quick' value='${i}' style='border-radius: 0px 8px 8px 0px;'>
|
||||
<i class='iconfont icon-delete'></i></button>
|
||||
</div>
|
||||
</div>`;
|
||||
html += tr;
|
||||
}
|
||||
$(".quick_list_table").html(html);
|
||||
}
|
||||
|
||||
/**
|
||||
* 下載文本为文件
|
||||
* 下载文本为文件
|
||||
* @param filename 文件名
|
||||
* @param text 内容
|
||||
*/
|
||||
@ -619,6 +563,7 @@ $(document).ready(function () {
|
||||
if ($("#content").attr("class") === "box") {
|
||||
closeBox();
|
||||
closeSet();
|
||||
blurWd();
|
||||
} else {
|
||||
openBox();
|
||||
}
|
||||
@ -647,34 +592,34 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
// 搜索框点击事件
|
||||
$(document).on('click', '.sou', function(event) {
|
||||
$(document).on('click', '.sou', function () {
|
||||
focusWd();
|
||||
$(".search-engine").slideUp(160);
|
||||
})
|
||||
|
||||
$(document).on('click', '.wd', function(event) {
|
||||
});
|
||||
|
||||
$(document).on('click', '.wd', function () {
|
||||
focusWd();
|
||||
keywordReminder();
|
||||
$(".search-engine").slideUp(160);
|
||||
})
|
||||
});
|
||||
|
||||
// 点击其他区域关闭事件
|
||||
$(document).on('click', '.close_sou', function() {
|
||||
$(document).on('click', '.close_sou', function () {
|
||||
blurWd();
|
||||
closeSet();
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
// 点击搜索引擎时隐藏自动提示
|
||||
$(document).on('click', '.se', function() {
|
||||
$(document).on('click', '.se', function () {
|
||||
$('#keywords').toggle();
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
// 恢复自动提示
|
||||
$(document).on('click', '.se-li', function() {
|
||||
$(document).on('click', '.se-li', function () {
|
||||
$('#keywords').show();
|
||||
})
|
||||
|
||||
// 自动提示( 调用百度 api ）
|
||||
});
|
||||
|
||||
// 自动提示 (调用百度 api）
|
||||
$('.wd').keyup(function (event) {
|
||||
var key = event.keyCode;
|
||||
// 屏蔽上下键
|
||||
@ -694,32 +639,32 @@ $(document).ready(function () {
|
||||
});
|
||||
|
||||
// 自动提示键盘方向键选择操作
|
||||
// $(".wd").keydown(function (event) { //上下键获取焦点
|
||||
// var key = event.keyCode;
|
||||
// if ($.trim($(this).val()).length === 0) return;
|
||||
$(".wd").keydown(function (event) { //上下键获取焦点
|
||||
var key = event.keyCode;
|
||||
if ($.trim($(this).val()).length === 0) return;
|
||||
|
||||
// var id = $(".keyword-active").attr("data-id");
|
||||
// if (id === undefined) id = 0;
|
||||
var id = $(".choose").attr("data-id");
|
||||
if (id === undefined) id = 0;
|
||||
|
||||
// if (key === 38) {
|
||||
// /*向上按钮*/
|
||||
// id--;
|
||||
// } else if (key === 40) {
|
||||
// /*向下按钮*/
|
||||
// id++;
|
||||
// } else {
|
||||
// return;
|
||||
// }
|
||||
// var length = $("#keywords").attr("data-length");
|
||||
// if (id > length) id = 1;
|
||||
// if (id < 1) id = length;
|
||||
if (key === 38) {
|
||||
/*向上按钮*/
|
||||
id--;
|
||||
} else if (key === 40) {
|
||||
/*向下按钮*/
|
||||
id++;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
var length = $("#keywords").attr("data-length");
|
||||
if (id > length) id = 1;
|
||||
if (id < 1) id = length;
|
||||
|
||||
// $(".keyword[data-id=" + id + "]").addClass("keyword-active").siblings().removeClass("keyword-active");
|
||||
// $(".wd").val($(".keyword[data-id=" + id + "]").text());
|
||||
// });
|
||||
$(".keyword[data-id=" + id + "]").addClass("choose").siblings().removeClass("choose");
|
||||
$(".wd").val($(".keyword[data-id=" + id + "]").text());
|
||||
});
|
||||
|
||||
// 菜单点击
|
||||
$("#menu").click(function (event) {
|
||||
$("#menu").click(function () {
|
||||
if ($(this).attr("class") === "on") {
|
||||
closeSet();
|
||||
} else {
|
||||
@ -1268,4 +1213,4 @@ $(document).ready(function () {
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user