Phiên bản đầy đủ: jsB@nk » Ứng dụng » Tìm kiếm » Hộp tìm kiếm cục bộ cho web
URL: https://www.javascriptbank.com/internal-search-box.html
Bạn có thể dùng hiệu ứng JavaScript này để tạo khung tìm kiếm trên trang web của mình giống như hộp tìm kiếm trên các diễn đàn thường sử dụng. Bạn cũng có thể tạo thêm các khung nhập liệu, khung chú thích, trình đơn,... dựa vào mã này.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Tìm kiếm » Hộp tìm kiếm cục bộ cho web
URL: https://www.javascriptbank.com/internal-search-box.html
<style type="text/css"><!--div.sample_attach, a.sample_attach { width: 100px; border: 1px solid #DFAD00; background: #FFFFEE; padding: 0px 5px; font-weight: 900; color: #00009C; text-align: center;}a.sample_attach { display: block; border-bottom: none; text-decoration: none;}form.sample_attach { position: absolute; visibility: hidden; border: 1px solid #DFAD00; background: #FFFFEE; color: #00009C; padding: 0px 5px 2px 5px; text-align: center;}--></style><script type="text/javascript"><!--// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.// Technical support: http://www.php-development.ru/// http://www.php-development.ru/javascripts/dropdown.php//// YOU MAY NOT// (1) Remove or modify this copyright notice.// (2) Distribute this code, any part or any modified version of it.// Instead, you can link to the homepage of this code:// http://www.php-development.ru/javascripts/dropdown.php.//// YOU MAY// (1) Use this code on your website.// (2) Use this code as a part of another product provided that// its main use is not creating javascript menus.//// NO WARRANTY// This code is provided "as is" without warranty of any kind, either// expressed or implied, including, but not limited to, the implied warranties// of merchantability and fitness for a particular purpose. You expressly// acknowledge and agree that use of this code is at your own risk.// ***** Popup Control *********************************************************function at_display(x) { var win = window.open(); for (var i in x) win.document.write(i+' = '+x[i]+'<br>');}// ***** Show Aux *****function at_show_aux(parent, child) { var p = document.getElementById(parent); var c = document.getElementById(child ); var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0; var left = (c["at_position"] == "x") ? p.offsetWidth +2 : 0; for (; p; p = p.offsetParent) { top += p.offsetTop; left += p.offsetLeft; } c.style.position = "absolute"; c.style.top = top +'px'; c.style.left = left+'px'; c.style.visibility = "visible";}// ***** Show *****function at_show() { var p = document.getElementById(this["at_parent"]); var c = document.getElementById(this["at_child" ]); at_show_aux(p.id, c.id); clearTimeout(c["at_timeout"]);}// ***** Hide *****function at_hide() { var c = document.getElementById(this["at_child"]); c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 333);}// ***** Click *****function at_click() { var p = document.getElementById(this["at_parent"]); var c = document.getElementById(this["at_child" ]); if (c.style.visibility != "visible") at_show_aux(p.id, c.id); else c.style.visibility = "hidden"; return false;}// ***** Attach *****// PARAMETERS:// parent - id of visible html element// child - id of invisible html element that will be dropdowned// showtype - "click" = you should click the parent to show/hide the child// "hover" = you should place the mouse over the parent to show// the child// position - "x" = the child is displayed to the right of the parent// "y" = the child is displayed below the parent// cursor - Omit to use default cursor or check any CSS manual for possible// values of this fieldfunction at_attach(parent, child, showtype, position, cursor) { var p = document.getElementById(parent); var c = document.getElementById(child); p["at_parent"] = p.id; c["at_parent"] = p.id; p["at_child"] = c.id; c["at_child"] = c.id; p["at_position"] = position; c["at_position"] = position; c.style.position = "absolute"; c.style.visibility = "hidden"; if (cursor != undefined) p.style.cursor = cursor; switch (showtype) { case "click": p.onclick = at_click; p.onmouseout = at_hide; c.onmouseover = at_show; c.onmouseout = at_hide; break; case "hover": p.onmouseover = at_show; p.onmouseout = at_hide; c.onmouseover = at_show; c.onmouseout = at_hide; break; }}// Multiple onload function created by: Simon Willison// http://simonwillison.net/2004/May/26/addLoadEvent/function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}addLoadEvent(function() { at_attach("src_parent", "src_child", "click", "x", "pointer");});//--></script><div style="cursor: pointer;" class="sample_attach" id="src_parent">Site Search</div><form style="position: absolute; visibility: hidden; top: 629px; left: 357px;" class="sample_attach" id="src_child"><b>Enter search terms:</b><br><input style="margin-bottom: 1px; width: 170px;" name="terms" type="text"><br><input value="Submit" type="submit"></form>