类似于选项卡的搜索框, 基于MooTools
类似于选项卡的搜索框,在大型的门户网站上都有应用,多种类型选项的搜索最先是在google,,yahoo,baidu,bing这样的高级搜索引擎上应用的,它们有一个明显的特征就是:一种类型的搜索是不够的。
像这样大的搜索引擎都会提供 web search, video search, code search, blog search, image search和你能想到的任何其他类型的搜索。
当然,他们可以在不同的页面上使用不同的类型搜索,但很烦人。
使用JavaScript,我们可以在一个搜索框上合成多种类型的搜索,是比较方便和实用的。
The HTML / PHP
点击搜索框上方的类型标题来改变你的搜索类型。
1 2 3 4 5 6 7 8 9 10 11 | <div id="search-container" class="active video"> <div id="search-options"> <a class="" href="?type=web">Web</a> <a class="" href="?type=image">Image</a> <a class="active video" href="?type=video">Video</a> </div> <form id="search-form" action="?type=video" method="get"> <input id="query" type="text" name="query"/> <input id="submit" type="submit" name="submit" value="Video Search"/> </form> </div> |
以上就是简单的HTML结构 —要注意这些元素的ID与样式和 javascript 功能有密切关系.
The CSS
1 2 3 4 5 6 7 8 9 10 | #search-container { position:relative; padding:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } #search-options { } #search-options a { top:-20px; position:absolute; font-size:11px; padding:3px 6px; color:#00f; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; } #search-options a.active { z-index:5; text-decoration:none; font-weight:bold; color:#000; } #query { font-size:24px; padding:4px; background:#fff; } #submit { font-size:24px; } .web { background:#ccc; } .image { background:#fffea1; } .video { background:#5872aa; } |
The MooTools
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | window.addEvent('domready',function() { var lynx = $$('#search-options a'), activeItem = $$('#search-options a.active')[0] || lynx[0], button = $('submit'), oTerm = 'Search'; var searchForm = $('search-form'), container = $('search-container').set('class',activeItem.get('text').toLowerCase()); lynx.addEvent('click',function(e) { //brick event e.stop(); //manage "active" class activeItem.className = ''; this.addClass('active ' + this.get('text').toLowerCase()); activeItem = this; //manage URL and color class searchForm.set('action',this.get('href')); container.className = this.get('class'); button.set('value',this.get('text') + ' ' + oTerm); }); }); |
该系统的工作原理就是添加和删除CSS 类名.我们通过点击每个搜索类型来交换form actions。
演示:View Demo
文章评论 已经有 0 条评论!