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