jQuery:使用css+jQuery模拟键盘 ---- Hiro技术站

分享到

新浪微博

豆瓣

QQ空间

Twitter

jQuery:使用css+jQuery模拟键盘

分类:jQuery, 案例分享发表时间:2009年07月14日字体大小:12号 14号

今天在阅读Nettuts+的Feed时看到了这个模拟键盘的效果，很是喜欢。便查看的源码后，了解了实现的原理，自己重新编写了CSS和JS代码，现效果如下：

外部链接查看效果：Demo,源代码下载：Download

1.html代码

<div id="container">
	<textarea id="write" rows="6" cols="60"></textarea>
	<ul id="keyboard">
		<li class="symbol"><span class="off">`</span><span class="on">~</span></li>
		<li class="symbol"><span class="off">1</span><span class="on">!</span></li>
		<li class="symbol"><span class="off">2</span><span class="on">@</span></li>
		<li class="symbol"><span class="off">3</span><span class="on">#</span></li>
		<li class="symbol"><span class="off">4</span><span class="on">$</span></li>
		<li class="symbol"><span class="off">5</span><span class="on">%</span></li>
		<li class="symbol"><span class="off">6</span><span class="on">^</span></li>
		<li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
		<li class="symbol"><span class="off">8</span><span class="on">*</span></li>
		<li class="symbol"><span class="off">9</span><span class="on">(</span></li>
		<li class="symbol"><span class="off">0</span><span class="on">)</span></li>
		<li class="symbol"><span class="off">-</span><span class="on">_</span></li>
		<li class="symbol"><span class="off">=</span><span class="on">+</span></li>
		<li class="delete lastitem">delete</li>
		<li class="tab">tab</li>
		<li class="letter">q</li>
		<li class="letter">w</li>
		<li class="letter">e</li>
		<li class="letter">r</li>
		<li class="letter">t</li>
		<li class="letter">y</li>
		<li class="letter">u</li>
		<li class="letter">i</li>
		<li class="letter">o</li>
		<li class="letter">p</li>
		<li class="symbol"><span class="off">[</span><span class="on">{</span></li>
		<li class="symbol"><span class="off">]</span><span class="on">}</span></li>
		<li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li>
		<li class="capslock">caps lock</li>
		<li class="letter">a</li>
		<li class="letter">s</li>
		<li class="letter">d</li>
		<li class="letter">f</li>
		<li class="letter">g</li>
		<li class="letter">h</li>
		<li class="letter">j</li>
		<li class="letter">k</li>
		<li class="letter">l</li>
		<li class="symbol"><span class="off">;</span><span class="on">:</span></li>
		<li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li>
		<li class="enter lastitem">enter</li>
		<li class="left-shift">shift</li>
		<li class="letter">z</li>
		<li class="letter">x</li>
		<li class="letter">c</li>
		<li class="letter">v</li>
		<li class="letter">b</li>
		<li class="letter">n</li>
		<li class="letter">m</li>
		<li class="symbol"><span class="off">,</span><span class="on">< </span></span></li>
		<li class="symbol"><span class="off">.</span><span class="on">></span></li>
		<li class="symbol"><span class="off">/</span><span class="on">?</span></li>
		<li class="right-shift lastitem">shift</li>
		<li class="space lastitem">space</li>
	</ul>
</div>

2. CSS代码：

* { margin:0; padding:0;}
body { font:10px Tahoma, Geneva, sans-serif; background:#eee;}
 
#container { width:430px; margin:10px;}
 
	#write { border:none; width:410px; height:120px; background:#fff; padding:5px; margin-bottom:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9; font-size:11px;}
 
		#keyboard { list-style:none;}
			#keyboard li { float:left; width:20px; height:20px; line-height:20px; text-align:center; background:#fff; margin:0 5px 5px 0; -moz-border-radius:5px; -webkit-border-radius:5px; border:1px solid #f9f9f9;}
 
			.tab, .capslock, .left-shift, .space { clear:left;}
 
			#keyboard li.lastitem { margin-right:0;}
			#keyboard li.delete { width:70px;}
			#keyboard li.tab { width:70px;}
			#keyboard li.capslock { width:75px;}
			#keyboard li.enter { width:40px;}
			#keyboard li.left-shift { width:80px;}
			#keyboard li.right-shift { width:65px;}
			#keyboard li.space { width:420px;}
 
			#keyboard li:hover, .hover { position:relative; top:1px; left:1px; cursor:pointer; border-color:#e5e5e5;}
 
			.on { display:none;}
			.uppercase { text-transform:uppercase;}

为了兼容IE6和IE7，需在head标签对间加上如下代码：

<!--[if lt ie 8]>
    <style type="text/css">
    	#write { margin-left:-10px;}
    </style>
< ![endif]-->

3. JS代码：

$(document).ready(function() {
 
	var $writeBox = $('#write'),
		shift = false,
		capslock = false;
 
	$('#keyboard li').hover(function() {
		$(this).addClass('hover');
	}, function() {
		$(this).removeClass('hover');
	}).click(function() {
		var $this = $(this),
			charater = $this.html();
 
		// 一键两意
		if($this.hasClass('symbol')) charater = $('span:visible', $this).html();
 
		// Button detele 
		if($this.hasClass('delete')) {
			var html = $writeBox.html();
			$writeBox.html(html.substring(0, html.length-1));
			return false;
		};
 
		// Button tab
		if($this.hasClass('tab')) charater = '\t';
 
		// Button capslock
		if($this.hasClass('capslock')) {
			$('.letter').toggleClass('uppercase');
			capslock = true;
			return false;
		};
 
		// Button enter
		if($this.hasClass('enter')) charater = '\n';
 
		// Button shift
		if($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
			$('.letter').toggleClass('uppercase');
			$('.symbol span').toggle();
 
			shift = (shift === true) ? false : true;
			capslock = false;
			return false;
		};
 
		// Button space
		if($this.hasClass('space')) charater = ' ';
 
		// 转换为大写
		if($this.hasClass('uppercase')) charater = charater.toUpperCase();
 
		// 输出所按的键值
		$writeBox.html($writeBox.html() + charater);
 
	});
 
});