Extjs4学习笔记-Ext.util.KeyNav

最新推荐文章于 2017-08-12 15:07:12 发布

愤怒的根号三

最新推荐文章于 2017-08-12 15:07:12 发布

阅读量258

点赞数

分类专栏： ExtJS 文章标签： extjs

ExtJS 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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>

愤怒的根号三

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4学习笔记-Ext.util.KeyNav

KeyNav封装的的键盘导航事件，从而可以轻松的在页面中设置键盘导航。可用的导航键包括回车键、空格键、4个箭头、tab键、esc键、PageUp键、PageDown键、del键、backspace键、home键、end键。&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/...
复制链接

扫一扫