Skip to content

Commit

Permalink
fix #42
Browse files Browse the repository at this point in the history
  • Loading branch information
@minghe
minghe committed Oct 12, 2012
1 parent ad0805b commit f26ae17
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 24 deletions.
82 changes: 64 additions & 18 deletions gallery/form/1.3/checkbox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,57 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
S.extend(Checkbox, Radio);
//方法
S.extend(Checkbox, Base, /** @lends Checkbox.prototype*/ {
/**
* 改变指定的多选框的选中状态
* @param {Number} targetIndex 多选框的索引值
*/
change:function(targetIndex){
var self = this;
var kfbtn = $(self.get('kfbtn')[targetIndex]);
var targets = self.get('target');
var $target = $(targets[targetIndex]);
var getCls = this.get('cls');
var selectedClass = getCls.selected;
var isChecked = self.isChecked(targetIndex);
var isUiClick = self.get('isUiClick');
var isHtmlClick = self.get('isHtmlClick');
kfbtn[isChecked && 'removeClass' || 'addClass'](selectedClass);
if(isChecked){
kfbtn.removeClass(selectedClass);
kfbtn.removeClass(getCls.hover);
if(!isHtmlClick) $target.prop('checked',true);
}else{
kfbtn.addClass(selectedClass);
if(!isHtmlClick) $target.prop('checked',false);
}
self.set('isHtmlClick',false);
},
/**
* 多选框是否是选中状态
* @param {Number} index 多选框的索引值
* @return {Boolean}
*/
isChecked:function(index){
var self = this;
var kfbtns = $(self.get('kfbtn'));
var kfbtn = kfbtns.item(index);
var getCls = self.get('cls');
var selectedClass = getCls.selected;
return kfbtn && kfbtn.hasClass(selectedClass) || false;
},
/**
* 监听原生表单元素的click事件
* @private
*/
_onClick:function(target,index){
var self = this;
target.on('click',function(){
var isUiClick = self.get('isUiClick');
self.set('isHtmlClick',true);
!isUiClick && self.change(index);
self.set('isUiClick',false);
})
},
/**
* 模拟的checkbox全选
* @return {Object} return self
Expand All @@ -41,7 +92,7 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
if (self._isSelected(value) || self._isDisabled(value)) return;
value.addClass(self.get('cls').selected);
$(targets[key]).prop('checked',true);
})
});
return self;
},
/**
Expand All @@ -53,12 +104,10 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
kfbtns = self.get('kfbtn'),
oClass = self.get('cls'),
selectedClass = oClass.selected,
hoverClass = self.get('cls').hover,
targets = self.get('target');
$(kfbtns).each(function(value, key) {
//alert(selectedClass);
if (!self._isSelected(value)) return;
value.removeClass(selectedClass)// +' ' + hoverClass);
value.removeClass(selectedClass);
$(targets[key]).prop('checked',false);
})
return self;
Expand All @@ -68,12 +117,10 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
* @param {Number} targetIndex 一组input的索引
*/
_clickHandler: function(targetIndex) {
var self = this,
targets = self.get('target'),
kfbtns = self.get('kfbtn'),
checkedClass = self.get('cls').selected;
$(targets[targetIndex]).fire('click');
$(kfbtns[targetIndex]).toggleClass(checkedClass);
var self = this;
var isUiClick = self.get('isUiClick');
self.set('isUiClick',true);
self.change(targetIndex);
},
/**
* 获取所有选中的key
Expand Down Expand Up @@ -102,7 +149,6 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
oClass = self.get('cls'),

selectedClass = oClass.selected,
disabledClass = oClass.disabled,
hoverClass = oClass.hover,


Expand Down Expand Up @@ -132,15 +178,13 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
value.detach('mouseenter');
}
value.addClass(hoverClass);
//value.fire('mouseenter');
}).on('mouseleave', function() {
if (self._isDisabled(radios[key])) return;

if (elLabel.contains(value)) {
value.detach('mouseleave');
}
value.removeClass(hoverClass);
//value.fire('mouseleave');
})
},
/**
Expand All @@ -151,9 +195,7 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
kfbtns = $(self.get('kfbtn')),
hoverClass = this.get('cls').hover,
hasLabel = self.get('hasLabel'),
targets = self.get('target'),
getLabelFunc = self.get('getLabelFunc'),
nextLabel;
getLabelFunc = self.get('getLabelFunc');
kfbtns.each(function(value, key) {
value.on('mouseenter mouseleave', function(ev) {
//如果本身是选中状态或者是禁用状态，则不做处理
Expand Down Expand Up @@ -258,9 +300,13 @@ KISSY.add('gallery/form/1.3/checkbox/index', function(S, Base, Node, Radio) {
*/
accessible: {
value: false
}
},
//是否是模拟UI触发change
isUiClick:{value:false},
//是否是原生表单元素触发change
isHtmlClick:{value:false}
}
})
});
return Checkbox;
}, {
requires: ['base', 'node', 'gallery/form/1.3/radio/index']
Expand Down
7 changes: 7 additions & 0 deletions gallery/form/1.3/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,7 @@ <h5>Auth</h5>
<ol class="list detail-list">
<li>[+] #34消息采用更简单属性配置方式</li>
<li>[+] #37可以通过msg-wrapper来配置消息层容器</li>
<li>[+] 自定义规则可以传送验证配置值</li>
<li>[!] add方法返回Field实例</li>
<li>[!] 第一个参数可以为空</li>
<li>[!] #35修复消息层显示后无法隐藏的bug</li>
Expand Down Expand Up @@ -300,6 +301,12 @@ <h5>Radio</h5>
<ol class="list detail-list">
<li>[+] 监听原生click事件，触发模拟radio的选中</li>
</ol>
<h5>Checkbox</h5>
<ol class="list detail-list">
<li>[+] 新增change方法</li>
<li>[+] 新增isChecked方法</li>
<li>[-] 去掉fire原生多选框的click事件</li>
</ol>
<h3>V1.2.7 change</h3>
<h5>Uploader</h5>
<ol class="list detail-list">
Expand Down
19 changes: 13 additions & 6 deletions gallery/form/1.3/radio/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ KISSY.add('gallery/form/1.3/radio/index', function(S, Node, Base) {
}
//遍历
target.each(function(value,index) {
value.hide();
//value.hide();
if (self._isDisabled(value)) {
kfbtn = $(disabledHTML).insertBefore(value).attr('ks-kfbtn-disabled', 'disabled').removeAttr('tabindex');
} else {
Expand All @@ -99,14 +99,21 @@ KISSY.add('gallery/form/1.3/radio/index', function(S, Node, Base) {
}
}
kfbtnArr.push(kfbtn);

value.on('click',function(){
if (self._isDisabled(value)) return;
self._clickHandler.call(self, index);
})
self._onClick(value,index);
});
self.set('kfbtn', kfbtnArr);
},
/**
* 监听原生表单元素的click事件
* @private
*/
_onClick:function(target,index){
var self = this;
target.on('click',function(){
if (self._isDisabled(target)) return;
self._clickHandler.call(self, index);
})
},
/**
* 加载css
*/
Expand Down

0 comments on commit f26ae17

Please sign in to comment.