Maison > Article > interface Web > Comment implémenter une couche de zone de recherche de création pop-up avec HTML5 et jQuery

Comment implémenter une couche de zone de recherche de création pop-up avec HTML5 et jQuery

不言original: 2018-06-25 10:42:412716parcourir

Cet article partage principalement l'exemple de code de la couche de zone de recherche de créations contextuelles jQuery et HTML5. Il a une certaine valeur de référence, examinons-le ensemble

Cet effet convient aux appareils mobiles et vous pouvez utiliser des téléphones mobiles pour parcourir l'effet.

Le code HTML est le suivant :

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>jQuery+CSS3创意搜索框特效 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/default.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/26/css/search-form.css" />

</head>
<body>
<p>
<a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/sousuokuang.htm">原文</a>
</p>
<form onSubmit="submitFn(this, event);" name="yestop">
<p class="search-wrapper">
<p class="input-holder">
<input type="text" class="search-input" placeholder="请输入关键词" name="hewenqi" />
<input type="hidden" name="q" />
<button class="search-icon" onClick="searchToggle(this, event);"><span></span></button>
</p>
<span class="close" onClick="searchToggle(this, event);"></span>
<p class="result-container">
</p>
</p>
</form>
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.12.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/26/js/hovertreesearch.js"></script>
</body>
</html>

Le code de hovertreesearch.js est le suivant :

function searchToggle(obj, evt) {
var container = $(obj).closest(&#39;.search-wrapper&#39;);
if (!container.hasClass(&#39;active&#39;)) {
container.addClass(&#39;active&#39;);
evt.preventDefault();
}
else if (container.hasClass(&#39;active&#39;) && $(obj).closest(&#39;.input-holder&#39;).length == 0) {
container.removeClass(&#39;active&#39;);
// clear input
container.find(&#39;.search-input&#39;).val(&#39;&#39;);
// clear and hide result container when we press close
container.find(&#39;.result-container&#39;).fadeOut(100, function () { $(this).empty(); });
}
}
function submitFn(obj, evt) {
var value = $(obj).find(&#39;.search-input&#39;).val().trim();
var _html = "您搜索的关键词： ";
if (!value.length) {
_html = "关键词不能为空。";
}
else {
window.open("http://cn.bi" + "ng.com/search?q=site%3Ahove" + "rtree.com " + value + "&hewenqi=yestop");
_html += "<b>" + value + "</b>";
}
$(obj).find(&#39;.result-container&#39;).html(&#39;<span>&#39; + _html + &#39;</span>&#39;);
$(obj).find(&#39;.result-container&#39;).fadeIn(100);
evt.preventDefault();
}

Ce qui précède représente l'intégralité du contenu de cet article , j'espère que cela sera utile à l'apprentissage de tout le monde. Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Comment implémenter des captures d'écran locales avec un canevas html5 et JavaScript

html5 et css3 et jquery à implémenter un lecteur de musique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment résoudre l'erreur plein écran du lecteur H5 dans la couche contextuelle du calqueArticle suivant：Comment résoudre l'erreur plein écran du lecteur H5 dans la couche contextuelle du calque

Articles Liés

Voir plus