mootools 选项卡_MooTools的搜索类型选项

mootools 选项卡

Advanced search engines like Google, Yahoo!, and Bing have discovered the obvious: one type of search isn't good enough. The big search engines offer web search, video search, code search, blog search, image search, and any other type of search you can think of. Of course they could use different search boxes on different pages but that's annoying. Using a bit of JavaScript we can consolidate all of our search types into one box.

诸如Google，Yahoo！和Bing之类的高级搜索引擎已经发现了显而易见的事实：一种类型的搜索还不够好。 大型搜索引擎提供Web搜索，视频搜索，代码搜索，博客搜索，图像搜索以及您可以想到的任何其他类型的搜索。 当然，他们可以在不同的页面上使用不同的搜索框，但这很烦人。 使用一些JavaScript，我们可以将所有搜索类型整合到一个框中。

View Demo 观看演示

HTML / PHP (The HTML / PHP)

<p>Click on the search type headers above the search box to change the type of search you'd like to make!'</p>
<p>&nbsp;</p>
<div id="search-container" style="width:500px">
	<div id="search-options">
		<a href="?type=web" <?php if($_GET['type'] != 'video' && $_GET['type'] != 'image') { echo 'class="web active"'; } ?> style="left:20px;">Web</a>
		<a href="?type=image" <?php if($_GET['type'] == 'image') { echo 'class="image active"'; } ?> style="left:70px;">Image</a>
		<a href="?type=video" <?php if($_GET['type'] == 'video') { echo 'class="video active"'; } ?> style="left:140px;">Video</a>
	</div>
	<form method="get" action="/search/web" id="search-form">
		<input type="text" id="query" name="query" />
		<input type="submit" value="<?php echo ucwords($_GET['type'] == 'video' || $_GET['type'] == 'image' ? $_GET['type'] : 'web'); ?> Search" name="submit" id="submit" />
	</form>
</div>

The HTML structure is simple -- be mindful of the element ID's for styling and JavaScript functionality.

HTML结构很简单-注意样式和JavaScript功能的元素ID。

CSS (The CSS)

#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; }
.images				{ background:#fffea1; }
.videos				{ background:lightblue; }

Style at will!

随心所欲！

MooTools (The MooTools)

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);
	});
});

The system works off of a system of adding and removing CSS class names. We also swap the form actions through each search type click.

该系统在添加和删除CSS类名的系统上工作。 我们还会通过每次搜索类型点击来交换表单操作。

View Demo 观看演示

Mapping out the the functionality for a system like this is fairly simple. What sets these type of systems is the great styling. Post in the comments if you've implemented a system like this!

映射这样的系统的功能非常简单。 设置这些类型的系统的是出色的样式。 如果您已经实现了这样的系统，请在评论中发布！

翻译自: https://davidwalsh.name/search-options

mootools 选项卡