Extjs4学习笔记-Ext.util.KeyNav

PrisonBreak

浏览: 96093 次
性别:
来自: 北京

最近访客更多访客>>

zzy7075

littlerare

yongmeixin

Eventhought

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

extjs

KeyNav封装的的键盘导航事件，从而可以轻松的在页面中设置键盘导航。可用的导航键包括回车键、空格键、4个箭头、tab键、esc键、PageUp键、PageDown键、del键、backspace键、home键、end键。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Ext.util.KeyNav</title>
		
		<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
		<script type="text/javascript" src="../extjs/bootstrap.js"></script>
		<script type="text/javascript" src="../extjs/ext-lang-zh_CN.js"></script>
		
		<style type="text/css">
			#div1 {
				margin: 20px 0 0 20px;
				width: 650px;
				display: block;
			}
			
			span {
				width: 165px;
				display: block;
				padding: 1px;
				float: left;
			}
			
			.select {
				border: 2px solid #cdcdcd;
			}
		</style>
		
		<script type="text/javascript">
		
			/**
			 * 功能描述：在浏览图片时，通过键盘在操作使小图片列表焦点移动，从而刷新大图片区域的图片。
			 */
			Ext.onReady(function() {
				
				//所有小图片的节点
				var els = Ext.select(".smallImg");
				
				//大图片的节点
				var bigImg = Ext.getDom("bigImg");
				
				//设置索引值
				var index = 0;
				
				//定义函数
				var fn = function(v) {
					var ell = els;
					ell.item(index).removeCls("select");
					index = index + v;
					if(index < 0) {
						index = 2;
					} else if(index > 2) {
						index = 0;
					}
					
					var el = ell.item(index);
					el.radioCls("select");
					var src = el.dom.src;
					bigImg.src = src.substr(0, src.length - 6) + src.substr(src.length - 5);
				}
				
				//创建KeyNav对象
				Ext.create("Ext.util.KeyNav", "div1", {
					up: function() {
						fn(-1);
					},
					
					down: function() {
						fn(1);
					},
					
					scope: this
					
				});
				
			});
						
		</script>
		
	</head>
	<body>
		
		<!--注意：一定要给div加上tabIndex属性，不然div就不能获取焦点，绑定的导航事件会因为没有焦点而不能执行-->
		<div tabIndex="1" id="div1">
			<span>
				<img width: "160" class="smallImg select" src="../images/s1.jpg" />
				<img width: "160" class="smallImg select" src="../images/s2.jpg" />
				<img width: "160" class="smallImg select" src="../images/s3.jpg" />
			</span>
			
			<span style="width: 478px;">
				<img height="320" id="bigImg" src="../images/1.jpg" />
			</span>
		</div>
		
		
	</body>
</html>