类似于选项卡的搜索框, 基于MooTools

By Rainbow on // JavaScript // 2506 Views+ // (0) Comments

类似于选项卡的搜索框,在大型的门户网站上都有应用，多种类型选项的搜索最先是在google,,yahoo,baidu，bing这样的高级搜索引擎上应用的，它们有一个明显的特征就是：一种类型的搜索是不够的。

像这样大的搜索引擎都会提供 web search, video search, code search, blog search, image search和你能想到的任何其他类型的搜索。

当然，他们可以在不同的页面上使用不同的类型搜索，但很烦人。

使用JavaScript，我们可以在一个搜索框上合成多种类型的搜索，是比较方便和实用的。

search-opction

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 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计