📄 search.html

📁 prototype-150.很好的学习资料。和大家分享了。（也是分享别人的）
💻 HTML
字号:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Prototype API搜索</title>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="stylesheet" type="text/css" href="nav.css">
<script type="text/javascript" src="Prototype151.js"></script>
<script type="text/javascript">
function init()
{
	//Bind Events and add options into DropDownList SelectGenre
	var pages=$("pages").getElementsByTagName("li");
	var SelectGenre=$("GenreSelect");
	for(var i=0;i<pages.length;i++)
	{
		Event.observe(pages[i].firstChild,'click',popSub);
		var option=document.createElement("option");
		option.innerHTML=pages[i].firstChild.innerHTML;
		SelectGenre.appendChild(option);
	}

}
window.onload=init;
function popSub(event)
{
	//hidden all subs
	var src=Event.element(event);
	var genre=src.innerHTML.strip();
	
	if(src.parentNode.getElementsByTagName("ul").length==1)
	{
		var ul =src.parentNode.getElementsByTagName("ul")[0];
		ul.style.display=='none'?ul.style.display='':ul.style.display='none';
		src.parentNode.id==""?src.parentNode.id="on":src.parentNode.id="";
		return ;
	}
	
	
	var pages=$("pages").getElementsByTagName("li");
	for(var i=0;i<pages.length;i++)
	{
		
		pages[i].id="";
		var uls=pages[i].getElementsByTagName("ul");
		if(uls.length==1)
		{
			uls[0].parentNode.removeChild(uls[0]);
		}
	}
	//load current
	var ul=document.createElement("ul");
	var loading=document.createElement("span");
	loading.innerHTML="正在加载...";
	ul.appendChild(loading);
	src.parentNode.appendChild(ul);
	
	
	var oAjax=new Ajax.Request(genre+'.html',{method:'get',onComplete:popSubCallback});
}

function popSubCallback(req)
{
	if(req.status==200)
	{
		//alert(req.responseText);
		var frame=$("htmlContainer")
		frame.innerHTML=req.responseText;
		var titles=frame.getElementsByClassName("title");
		
		//find the Loading genre
		var targetLi=null;
		var pages=$("pages").getElementsByTagName("li");
		for(var i=0;i<pages.length;i++)
		{
			var uls=pages[i].getElementsByTagName("ul");
			if(uls.length!=0)
			{
				targetLi=uls[0].parentNode;
				targetLi.removeChild(uls[0]);// remove the loading ul
				break;
			}
		}	
		// append sub li
		
		var genre=targetLi.getElementsByTagName("span")[0].innerHTML.strip();
		var ul=document.createElement("ul");
		
		for(var j=0;j<titles.length;j++)
		{
			var li=document.createElement("li");
			li.innerHTML="<a href=\""+genre+".html?tab="+j+"\" target=\"page\">"+titles[j].innerHTML.strip().truncate(20,'')+"</a>";
			ul.appendChild(li);
		}
		targetLi.appendChild(ul);
		targetLi.id="on";
		Event.observe(targetLi,'click',function (){$('page').src=genre+'.html';});
	}
	else
	{
		alert("请求页面出错!请求状态:"+req.status);
	}
}



function toggle()
{
	$("index").toggle();
	$("pageContainer").style.width=="790px"?$("pageContainer").style.width="990px":$("pageContainer").style.width="790px";
	$("pageContainer").style.width!="790px"?$("status").src="Images/on.gif":$("status").src="Images/off.gif"
}

function tab(a)
{	
	var lies=$("navHeader").getElementsByTagName("ul")[0].getElementsByTagName("li");
	if(a!='index')
	{
		lies[0].id="";
		lies[1].id="current";
	}
	else
	{
		lies[1].id="";
		lies[0].id="current";
	}
	$("indexPannel").toggle();
	$("searchPannel").toggle();
}

function searchAPI()
{
	var key=$("txtKey").value;
	if(key==""){alert("关键字不能为空!");return ;}
	if($("GenreSelect").options[$("GenreSelect").selectedIndex].text.strip()=="请选择类别")
	{
		alert("请选择类别");
		return ;
	}
	var genre=$("GenreSelect").options[$("GenreSelect").selectedIndex].text.strip();
	$("txtKey").disable();
	$("GenreSelect").disable();
	$("searchResult").innerHTML="正在搜索...";
	var oAjax=new Ajax.Request(genre+'.html',{method:'get',onComplete:handleSearch});
}

function handleSearch(req)
{
	if(req.status==200)
	{
		//alert(req.responseText);
		var frame=$("htmlContainer")
		frame.innerHTML=req.responseText;
		var titles=frame.getElementsByClassName("title");
			
		// append sub li
		var genre=$("GenreSelect").options[$("GenreSelect").selectedIndex].text.strip();
		var key=$("txtKey").value; 
		$("searchResult").innerHTML="";
		for(var j=0;j<titles.length;j++)
		{
			if(titles[j].innerHTML.strip().indexOf(key)!=-1)
			{
				var div=document.createElement("div");
				div.className="resultItem";
				div.innerHTML="<a href=\""+genre+".html?tab="+j+"\" target=\"page\">"+titles[j].innerHTML.strip()+"</a>";
				$("searchResult").appendChild(div);
			}
		}
		$("txtKey").enable();
		$("GenreSelect").enable();
	}
	else
	{
		alert("请求页面出错!请求状态:"+req.status);
	}}

</script>

</head>

<body>
<div id="htmlContainer" style="display:none;"></div>

<div id="header">
<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="history.go(-1);"><img src="Images/arrow_left.gif" height="16" />后退</div>
<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="history.go(1)">
 <img src="Images/arrow_right.gif" height="16" />前进</div>

<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="$('page').src='Index.html'"> <img src="Images/home.gif" height="16" />首页</div>
<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="tab('index')"><img src="Images/Index.gif" height="16" />目录</div>
<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="tab('search')"><img src="Images/search.gif" height="16" />搜索</div>
<div  onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#ffffff';this.style.border='solid 1px #cbcbcb';" onmouseout="this.style.backgroundColor=currentcolor;this.style.border='none'" onclick="window.location='http://www.cnblogs.com/Hafeyang/archive/2007/09/06/Prototype_150_API.html'"><img src="Images/QA.gif" height="16" />参与讨论</div>
 <div style=" position:absolute; top:3px; left:400px; text-align:right; width:500px; font-size:14px; font-weight:bold; color:#768ef2;">
  
 <font size="+1">Prototype1.5.0 API</font>  Best View  at IE7 1024*768
 </div> 
 </div>

<div id="content">
<div class="item" id="index" style="width:200px; overflow:scroll; overflow-y:auto; overflow-x:auto;">
<div id="navHeader">
<ul>
<li id="current"><a href="#" onclick="tab('index')">目录</a></li>
<li><a href="#" onclick="tab('search')">搜索</a></li>
</ul>
</div>
<div id="pannels">
<!--searchPannel begin -->
<div id="searchPannel" style="display:none;">
<div id="searchBar" style="margin-top:5px; padding-left:10px;">
<input id="txtKey" name="" type="text" size="16" />
<input name="" type="button" value="搜索"  onclick="return searchAPI()"/>
<select id="GenreSelect" style="width:100%;"  onchange="searchAPI();">
	<option>请选择类别</option>
</select>
<div id="searchResult">
</div>
</div>
</div>
<!--searchPannel end -->
<!-- indexPannel start -->
<div id="indexPannel">
<div id="searchBar" style="margin-top:5px; padding-left:10px;">
<ul id="pages">
	<li><span>Utility</span></li>
	<li><span>Ajax</span></li>
	<li><span>Array</span></li>
	<li><span>Class</span></li>
    <li><span>Element</span></li>
    <li><span>Enumerable</span></li>
    <li><span>Event</span></li>
    <li><span>Form</span></li>
    <li><span>FormElement</span></li>
    <li><span>Function</span></li>
    <li><span>Hash</span></li>
    <li><span>Insertion</span></li>
    <li><span>Number</span></li>
    <li><span>Object</span></li>
    <li><span>ObjectRange</span></li>
    <li><span>PeriodicalExecuter</span></li>
    <li><span>Position</span></li>
    <li><span>Prototype</span></li>
    <li><span>String</span></li>
    <li><span>Template</span></li>
    <li><span>TimedObserver</span></li>
</ul>
</div>
</div>
<!-- indexPannel end -->
</div>
</div>
<div class="item" id="statusDiv" style=" width:14px; cursor:hand; background-color:#E9E9E9"   onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#d4d4d4';" onmouseout="this.style.backgroundColor=currentcolor;" onclick="toggle()">
<img id="status" src="Images/on.gif" style=" margin-top:280px;" />
</div>
<div id="pageContainer"  class="item" style="width:790px;">
<iframe id="page" name="page" src="Index.html" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
</body>
</html>
💿 文件大小 723 K
👤 上传用户 guigui2008q
📂 所属分类文章/文档
🏷️ 相关标签

#prototype #150 #分 #家
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -