浏览 1851 次
|
锁定老帖子 主题：Kenxu Events.js 使用
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2010-10-19
最后修改：2010-10-19
之前写过 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>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2010-10-19
兼容IE/FF
|
| 返回顶楼 | |
|
发表时间：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 ;
}
}
|
| 返回顶楼 | |
