`
PrisonBreak
  • 浏览: 97504 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs4学习笔记-Ext.util.KeyNav

阅读更多

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>

 

  • 大小: 39.1 KB
  • 大小: 50 KB
  • 大小: 36.1 KB
  • 大小: 6.5 KB
  • 大小: 7 KB
  • 大小: 6.3 KB
3
2
分享到:
评论

相关推荐

    Ext API详解--笔记

    `EXT核心API详解(一) - Ext类.txt`介绍了Ext的基础类,包括`Ext.util.Observable`(观察者模式的实现)、`Ext.app.Application`(管理应用生命周期)等。理解这些类的用法对于构建可维护的应用至关重要。 4. **Ext...

    个性化的E-MAIL软件 Icredimail2001b

    个性化的E-MAIL软件 Icredimail2001b 充满个性化E-MAIL软件,可以选择信纸动画和声音及签名

    《基于YOLOv8的蹦床馆识别系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    MOCD207M 产品规格书

    MOCD207M 丝印D207 SOP8 1.25V 150mA晶体管输出光耦

    2024年迎接上市公司重组并购浪潮推动出版行业企业数字化转型报告.pdf

    2024年迎接上市公司重组并购浪潮推动出版行业企业数字化转型报告

    基于Andorid的闹钟功能设计.zip

    基于Andorid的闹钟功能设计实现源码,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。

    电商_微信小程序_学习项目_电商功能演示_1742849441.zip

    电商_微信小程序_学习项目_电商功能演示_1742849441.zip

    《基于YOLOv8的网球发球分析系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    React_应用开发_github-notetaker_实战_1742847797.zip

    app开发

    《基于YOLOv8的隧道安全监测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    5小时零基础入门小程序云开发-2.7G课程网盘链接提取码下载.txt

    本套课程带领大家零基础入门小程序云开发。摆脱后台自己实现小程序后台,学会音视频小程序的开发,学会小程序图片的上传与管理,学习人工智能识别图片,用小程序模仿微信朋友圈,实现一个云相册。

    移动开发_Android_MVC_调试工具框架BeeFram_1742846880.zip

    移动开发_Android_MVC_调试工具框架BeeFram_1742846880.zip

    vue3-element-admin基础框架带权限参考文档:https://vue3-element-admin-site.midfar.com

    vue3-element-admin基础框架带权限 参考文档:https://vue3-element-admin-site.midfar.com

    《基于YOLOv8的儿童行为监测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    Python网页文本爬虫:基于小说网站的基础爬虫实现与解析

    内容概要:本文介绍了Python网页文本爬虫的基本概念及其应用,特别是针对小说网站的爬虫实现。文中详细讲解了爬虫的工作原理和技术要点,如urllib库的使用、字符串操作以及正则表达式的初步应用。此外,还提供了完整的爬虫代码示例,涵盖从HTML页面下载到数据提取和处理的全过程。通过对小说网站的具体案例分析,展示了如何利用Python编写简单的爬虫程序来抓取并保存所需信息。 适合人群:对Python编程有一定基础的学习者,尤其是希望了解和掌握网页爬虫技术的初学者。 使用场景及目标:适用于想要快速入门Python爬虫技术的人群,帮助他们理解爬虫的基本原理和实现方法,为后续深入学习打下坚实基础。具体应用场景包括但不限于自动化数据收集、信息检索系统构建等。 其他说明:虽然本文主要关注于基础爬虫的实现,但同时也提到了一些进阶的技术方向,如HTTP长连接和多线程的应用,供有兴趣进一步探索的读者参考。

    jiguang.zip

    jiguang.zip

    weifuchenggg_JKBD_1742849495.zip

    weifuchenggg_JKBD_1742849495.zip

    移动开发_iOS_Safari快捷方式_应用内功能演示_1742853882.zip

    app开发

    移动开发_iOS_Scriptable_TSX_自动化脚本库_1742849101.zip

    app开发

Global site tag (gtag.js) - Google Analytics