百度输入法

百度输入法，大家都很熟悉了。

javascript

<script>
	window.onload = function(){
		var oBtn = document.getElementsByTagName('button')[0];
		var oUl = document.getElementById('ime');
		var aLi = oUl.getElementsByTagName('li');
		var oResult = document.getElementById('result');
		var oTxt = '';
		oBtn.onclick = function(){
			oUl.style.display = oUl.style.display == 'block' ? 'none' : 'block';
		}
		
		for(var i=0; i<aLi.length; i++){
			aLi[i].onclick = function(){
				if(this.id == 'close'){
					oUl.style.display = "none";
				}else{
					oTxt = '';
					oTxt = this.innerHTML;
				}
				oResult.innerHTML = oTxt;
			}
		}
	}
	</script>

html

<div id="outer">
		<div id="result"></div>
	    <button>输入法</button>
	    <ul style="display: none;" id="ime">
	        <li><a href="javascript:;">手写</a></li>
	        <li><a href="javascript:;">拼音</a></li>
	        <li id="close"><a href="javascript:;">关闭</a></li>
	    </ul>
	</div>

css

<style>
	body,ul,li,button{margin:0;padding:0;}
	body{font:14px/1.5 Tahoma;}
	ul{list-style-type:none;}
	a{text-decoration: none; color:#333;}
	button{cursor:pointer;}
	#outer{width:70px;margin:10px auto;}
	#ime{margin-top:5px;background:#fff;border:1px solid #9a99ff;display:none;}
	#ime li{width:100%;line-height:24px;display:inline-block;vertical-align:top;}
	#close{border-top:1px solid #9a99ff;}
	#ime li a{padding:0 5px; display:block;text-decoration:none;}
	#ime li a:hover{background:#d9e1f6;} 
</style>