`

Kenxu Events.js 使用

MySQLIEJavaScriptXHTMLPHP 
阅读更多

之前写过 iamseseJS和__xu_init jS简易框架 , 好长时间不看,忘了,郁闷,今天要用个DOM事件做东西,平常都用JQ,突然发现并不需要这么大的东西,就整理了下 .... 用起来都忘了 郁闷 记个笔记,似乎事件代理有些问题,晚上回去再看了...

 

写道
demo 功能需要:

1. 单击行如果行未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
2. 单击复选框未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kenxu Event.js 使用demo</title>
<script type="text/javascript">

var Events = {
	
	onload: function(func){
		var one=window.onload ;
		if(typeof window.onload != 'function'){
			window.onload=func ;
		}
		else{
			window.onload=function(){
				one();
				func();
			}
		}
	} ,
	
	/*
	 * 为DOM元素 添/删事件 add,remove方法 摘自: jsTrace
	 *  
	 *  当fn为匿名函数时移除不成功,fn可接收event参数,如: function(evt)
	 */ 
	add: function( obj, type, fn ){
		if (obj.addEventListener) obj.addEventListener( type, fn, false );
		else if (obj.attachEvent){
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {
				obj["e"+type+fn]( window.event );
			};
			obj.attachEvent( "on"+type, obj[type+fn] );
		}
	} ,
	remove: function ( obj, type, fn ){
		if (obj.removeEventListener) obj.removeEventListener( type, fn, false );
		else if (obj.detachEvent) {
			obj.detachEvent( "on"+type, obj[type+fn] );
			obj[type+fn] = null;
			obj["e"+type+fn] = null;
		}
	} ,
	
	/**
	 * 使用事件监听器后,取消元素默认行为的方法
	 * @param evt||window.event evt
	 */		
	preventDefault: function(evt){
		evt = evt || window.event ;
		if (evt.preventDefault)
			evt.preventDefault();
		else
			evt.returnValue = false ;
	} ,	
	
	/**
	 * 使用事件监听器后,取消元素上层元素的事件冒泡
	 * @param evt||window.event evt
	 */		
	preventBubble: function(evt){
		evt = evt || window.event ;
		if (evt.stopPropagation)
			evt.stopPropagation();
		else
			evt.cancelBubble = true ;
	} ,	
		
	/**
	 * 事件委托 机制 -- 从上层元素捕捉事件源,并传到回调函数 
	 * 
	 * 兼容IE和FF
	 * @param DOM元素	proxyElement 
	 * @param string	type
	 * @param function	fn 传入参数为事件源对象
	 * @param bool		isPreventDefault 是否阻止元素的默认行为
	 */ 
	addProxy: function(proxyElement,type,fn,isPreventDefault){
		var handle_name = type + '_handleMethod' ;
		var _this = this ;
		proxyElement[handle_name] = function(evt){
			evt = evt || window.event ;
			var target = evt.target || evt.srcElement ;
			fn(target);
			if (isPreventDefault) _this.preventDefault(evt);
		} ; 
		this.add(proxyElement,type,proxyElement[handle_name]);
	},
	/**
	 * 移除 proxyElement的委托事件
	 * 
	 * @param DOM元素	proxyElement
	 * @param string	type
	 */
	removeProxy: function(proxyElement,type){
		var handle_name = type + '_handleMethod' ;
		this.remove(proxyElement,type,proxyElement[handle_name])
	} ,
	
	keyCode: function(evt){
		return (evt || window.event).keyCode ;
	} ,
	each: function(ar, insp) {
		var r = [];
		for (var i = 0; i < ar.length; i++) {
			var x = insp(ar[i], i);
			if (x !== null) {
				r.push(x);
			}
		}
		return r ;
	}
} ;

Events.onload(function(){
	var tbodyEle=document.getElementById('tbody');
	if (tbodyEle){
		var color1='#EDEDD3',color2='#EFEFEF',overcolor='#D8D7D2';
		var bgc = 'backgroundColor' ;
		
		Events.each(tbodyEle.rows,function(row,i){
			// 设置背景颜色
			row.style[bgc] = (i%2 == 0) ? color1 : color2;
			
			// 绑定特效事件
			Events.add(row,'mouseover',function(evt){
				this.bg_old=this.style[bgc] ;
				this.style[bgc]=overcolor;
				this.style['cursor']='hand';				
			});
			Events.add(row,'mouseout',function(evt){
				this.style[bgc]=this.bg_old;
			});			
			
			var boxes = row.getElementsByTagName('input');
			var pkbox = boxes && boxes[0].type=='checkbox' && boxes[0].name=='pk' ? boxes[0] : null ;
			
			// 绑定点击事件			
			if (pkbox){				
			
				Events.add(pkbox,'click',function(evt){
					Events.preventBubble(evt);
					if(this.checked){
						//row的mouseover事件
						row.bg_unslt = row.bg_old ; 
						row.bg_old=row.style[bgc]=overcolor ;						
					}else {
						//row的mouseout事件
						row.bg_old=row.style[bgc]=row.bg_unslt ;
					}
				});				
				
				Events.add(row,'click',function(evt){
					pkbox.checked = !pkbox.checked ;					
					if(pkbox.checked){
						this.bg_unslt = this.bg_old ; 
						this.bg_old=this.style[bgc]=overcolor ;						
					}else {
						this.bg_old=this.style[bgc]=this.bg_unslt ;
					}
				});
			}			
			
		});
		
	}
});
</script>
</head>
<body id="" class="">
<table width="100%" border="0" cellspacing="1" cellpadding="4" class="list">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody id='tbody'>
    <tr>
      <td><input type="checkbox" name="pk" value="1"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="pk" value="2"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
  
    </tr>
    <tr>
      <td><input type="checkbox" name="pk" value="3"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
     
    </tr>
  </tbody>
</table>
</body>
</html>

 

 

分享到：
| 我所崇拜的当代一位牛人
评论
2 楼 vb2005xu 2010-10-21  
加一个数据库支持的代码样例

class Kenxu_DB_Driver_Mysqlt extends Kenxu_DB_Driver_Mysql implements Kenxu_DB_TransactionSupport {
	
	/**
     * 指示数据库是否支持事务
     *
     * @var boolean
     */
    protected $_hasTransaction = true ;
    
	/**
     * Mysql 数据库事务支持类名
     *
     * @var string
     */
	protected $_transactionSupportClass = 'Kenxu_DB_Driver_Mysql_TransactionSupport' ;
	
	/**
	 * 获取数据库事务支持对象
	 *
	 * @return Kenxu_DB_Driver_Mysql_TransactionSupport
	 */
	function getTransaction(){
		if ( $this->_hasTransaction ){
			static $inst = null ;
		
			if (!$inst){
				$inst = Kenxu_DB_TransactionAdapter::getInstance($this->_transactionSupportClass) ;
				/* @var $inst Kenxu_DB_TransactionAdapter */
				$inst->setDBO($this);
			}
			return $inst ;
		}		
		return null ;		
	}
	
}
1 楼 vb2005xu 2010-10-19  
兼容IE/FF
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    C#ASP.NET网络进销存管理系统源码数据库 SQL2008源码类型 WebForm

    ASP.NET网络进销存管理系统源码 内含一些新技术的使用，使用的是VS .NET 2008平台采用标准的三层架构设计，采用流行的AJAX技术 使操作更加流畅，统计报表使用FLASH插件美观大方专业。适合二次开发类似项目使用，可以节省您 开发项目周期，源码统计报表部分需要自己将正常功能注释掉的源码手工取消掉注释。这是我在调试程 序时留下的。也是上传源码前的疏忽。 您下载后可以用VS2008直接打开将注释取消掉即可正常使用。 技术特点：1、采用目前最流行的.net技术实现。2、采用B/S架构，三层无限量客户端。 3、配合SQLServer2005数据库支持 4、可实现跨越地域和城市间的系统应用。 5、二级审批机制，简单快速准确。 6、销售功能手写AJAX无刷新，快速稳定。 7、统计报表采用Flash插件美观大方。8、模板式开发，能够快速进行二次开发。权限、程序页面、 基础资料部分通过后台数据库直接维护，可单独拿出继续开发其他系统 9、数据字典，模块架构图，登录页面和主页的logo图片 分别放在DOC PSD 文件夹中

    (源码)基于ZooKeeper的分布式服务管理系统.zip

    # 基于ZooKeeper的分布式服务管理系统 ## 项目简介 本项目是一个基于ZooKeeper的分布式服务管理系统，旨在通过ZooKeeper的协调服务功能，实现分布式环境下的服务注册、发现、配置管理以及分布式锁等功能。项目涵盖了从ZooKeeper的基本操作到实际应用场景的实现，如分布式锁、商品秒杀等。 ## 项目的主要特性和功能 1. 服务注册与发现通过ZooKeeper实现服务的动态注册与发现，支持服务的动态上下线。 2. 分布式锁利用ZooKeeper的临时顺序节点特性，实现高效的分布式锁机制，避免传统锁机制中的“羊群效应”。 3. 统一配置管理通过ZooKeeper集中管理分布式系统的配置信息，实现配置的动态更新和实时同步。 4. 商品秒杀系统结合分布式锁和ZooKeeper的监听机制，实现高并发的商品秒杀功能，确保库存的一致性和操作的原子性。 ## 安装使用步骤 1. 环境准备

    23python3项目.zip

    23python3项目

    技术资料分享AL422B很好的技术资料.zip

    技术资料分享AL422B很好的技术资料.zip

    c语言俄罗斯方块.rar

    c语言俄罗斯方块

    【CPO栅格地图】基于matlab豪猪算法CPO栅格地图路径规划（目标函数：最短距离）【含Matlab源码 9152期】.mp4

    Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    delphi人才信息管理系统.zip

    delphi人才信息管理系统

    安卓巴士总结了近百个Android优秀开源项.zip

    安卓巴士总结了近百个Android优秀开源项

    MATLAB蒙特卡洛仿真计算投资组合的VaR(Value at Risk )

    1.程序功能说明： MATLAB蒙特卡洛仿真计算投资组合的VaR(Value at Risk ) 根据协方差矩阵等参数先计算涨期权和看跌期权的价格，再采用蒙特卡洛模拟法计算该投资组合的VaR。 2.代码说明：注释清晰，参数和变量说明清晰，方便更改、方便初学者使用，模块化编程，方便替换目标函数。运行环境Windows7及以上操作系统，MATLAB2014a及以上版本。 3.适用专业：计算机、电子信息工程、数学、物理、机械工程、土木工程等专业的大学生、研究生毕业设计，各类专业的课程设计、海外留学生作业等。 4作者介绍：资深算法工程师, 从事Matlab、Python算法仿真工作15年，专业研究遗传算法、粒子群算法、蚁群算法、鲸鱼算法、狼群算法等. 有问题联系QQ: 1579325979

    SpringBoot - Async异步处理

    SpringBoot - Async异步处理

    完全退出程序的方法.zip

    完全退出程序的方法

    hutool工具操作excel表格的依赖jar包

    hutool.all操作excel的依赖包，一共18个jar包，懒得去排查包的可以直接下载直接导入使用；我用eclipse和ideal接导入外部jar包。亲测可用；如果工程里面有相同的jar包，保留版本号高的； commons-cli-1.0.jar commons-codec-1.15.jar commons-collections4-4.4.jar commons-compress-1.21.jar commons-io-2.11.0.jar commons-lang3-3.4.jar commons-logging-api-1.1.jar commons-math3-3.6.1.jar hutool-all-5.8.21.jar log4j-1.2.12.jar log4j-api-2.20.0.jar log4j-core-2.20.0.jar poi-5.2.3.jar poi-ooxml-5.2.3.jar ……

    (源码)基于Python的微信签到管理系统.zip

    # 基于Python的微信签到管理系统 ## 项目简介 本项目是一个基于Python的微信签到管理系统，旨在通过微信自动收集和管理学生的宿舍签到信息。系统通过微信的群聊功能，自动识别并记录符合特定格式的签到信息，并将其存储在Excel表格中。该系统特别适用于学校或组织需要定期收集学生签到信息的场景。 ## 项目的主要特性和功能 1. 自动签到信息收集系统能够自动检测微信中大于三人的群聊，识别并记录符合特定格式的签到信息。 2. 灵活的签到格式支持自定义签到格式，通过正则表达式匹配签到信息，确保信息的准确性和一致性。 3. 自动生成签到表格每周自动生成新的签到表格，并根据开学周数计算当前学期的周数。 4. 转发补录功能支持通过转发信息的方式补录错过的签到信息，提高信息的完整性。 5. 路径和模板配置允许用户自定义签到表格的存储路径和模板信息，方便管理和维护。 ## 安装使用步骤 ### 1. 环境搭建

    (源码)基于Arduino和OpenWeatherMap的天气LED显示系统.zip

    # 基于Arduino和OpenWeatherMap的天气LED显示系统 ## 项目简介 此项目是一个基于天气数据的LED显示系统，主要用于展示当前的天气状况。它使用了WiFi连接的Arduino和LED灯带，通过OpenWeatherMap提供的API获取天气数据。项目旨在提高技术技能和软技能模块的学习成果。 ## 项目的主要特性和功能 ### 天气数据的展示 实时天气展示系统可以展示不同的天气状况，如晴朗、多云、降雨、雷电、雾等。 地点设置用户可以通过Blynk应用设置想要展示的地点，并实时获取该地点的天气数据。 更新间隔设置用户还可以设置数据更新的时间间隔。 ### 动画展示功能 天气模拟动画系统具有动画展示功能，用户可以选择不同的动画模式，如天气模拟动画。 LED颜色变换支持单个LED灯的颜色变换以及色彩淡入淡出动画等。 自动切换动画模式可以手动选择或通过定时设置自动切换。 ## 安装和使用步骤

    将jar文件转换为exe

    将jar文件转换为exe

    trumtime安装所需的全部资源以及步骤

    tdm64-gcc-9.2.0是一个编译器，如果大家在安装truetime运行中无法直接下载官方的编译器，就参考配置方法文档用这个编译器 大家需要首先安装vc++，可参考安装VScode 2019 版本

    SAE AS5756C-2021 中文.pdf

    SAE AS5756C-2021 中文.pdf

    c语言实现水波纹显示效果.rar

    c语言实现水波纹显示效果

    基于C语言的winform界面火车票订票系统项目资源.zip

    基于C语言的winform界面火车票订票系统项目资源

    2024年企业竞争模拟大赛河南大学校赛的通知(1) (1).pdf

    2024年企业竞争模拟大赛河南大学校赛的通知(1) (1).pdf

Magicbox
Global site tag (gtag.js) - Google Analytics