Archive for the ‘ 前端 ’ Category

KISSY的Switchable组件

通过Slide来学习Switchable的实现方式。

神马是Slide，就是每天我们在淘宝首页之类的地方看见的轮播图

image

Slide的初始化很简单：

Slide(‘#demo2′, {
effect: ‘scrolly’,
// slide特效组件其实不需要
aria:false,
easing: ‘easeOutStrong’
});

阅读全文

2011
12/28
分类：
前端
抢沙发

postMessage与window.name实现全系列浏览器跨域通讯

先引用一段

在那些浏览器下会有跨域问题：http://www.36ria.com/3890

postMessage方式对于ie这样顽固的浏览器是无效的，我们采用一个变通的方式window.name来实现ie6、7下面的跨域。 阅读全文

2011
12/05
分类：
前端
抢沙发

background-image在ie6和某个版本的搜狗下面失效的bug

很简单的一段，有一个button：

image

这个button正常情况下是有背景图片的

image

第一次的写法是这样，

看起来完全没问题,但是在ie6下面,有可能(某些版本的ie6、sogou,具体未知)就没有背景了。然后把background-image换成background就好了

image

记录一下，希望有用。

2011
11/23
分类：
前端
抢沙发

KISSY1.2.0学习笔记-2

version {String} 属性

作用：属性，返回KISSY的版本号

参数：无

举例：

Code:

KISSY.version;//1.1.6

buildTime {String} 属性

作用：属性，返回KISSY的打包时间

参数：无

举例： 

KISSY.buildTime;// 20110825162101

merge {Object} function(a1,a2,a3……)

作用：将所传的对象一次合并，并返回一个新的对象

说明：这个函数是调用mix方法来多次合并对象，不会覆盖前面对象的属性，主要用于简单的对象合并

参数：{Object} a1 对象

举例： 

var a1 = {a:1,b:2},a2 = {a:2,c:3};
KISSY.merge(a1,a2);//{a:1,b:2,c:3}
KISSY.merge(a2,a1);//{a:2,b:2,c:3}

augment {Object} function(/*r, s1, s2, …, ov, wl*/)

作用：将s1，s2……的原型（prototype，如果没有就复制成员）复制到r上面

说明：这个函数也是由mix方法派生出来的，但是和merge相比会复制原型链，主要用于方法类的复制。

参数：

{Function} r 目标对象

{Function|Object} s1（s2……） 源对象

{Boolean} ov 是否是覆盖模式（override），如果r存在A属性，那么是否要用s的A属性覆盖之,默认为false

{Array} wl 白名单（write List）,如果非空就只拷贝wl数组里面的属性

举例： 

function animal(){
this.name= ‘animal’;
this.eat = function(){};
this.say=function(){alert(‘miaomiao’);}
}
KISSY.augment(animal,{color:’white’});
new animal();//此时已经有color属性了

extend {Object} function(r, s, px, sx)

作用：将s1，s2……的原型（prototype，如果没有就复制成员）复制到r上面

说明：这个函数也是由mix方法派生出来的，但是和merge相比会复制原型链，主要用于方法类的复制。

参数：

{Function} r 目标对象

{Function } s 需要继承的对象

{Object} px 需要添加(或者覆盖)到原型链（prototype）的参数列表

{Object} sx 需要直接添加(或者覆盖)的方法列表

举例： 

function Animal(){}
Animal.prototype.name= ‘animal’;
Animal.prototype.eat = function(){};
Animal.prototype.say=function(){alert(‘miaomiao’);}
function Cat(){}
Cat.name=‘mimi’;
KISSY.extend(Cat,Animal);
new Cat();//此时已经有color属性了
 

主要是三个重要的方法：merge、augment、extend这是面向对象编程的重要方法，这三个方法在不同的场合使用，有些时候可以通用。细节还是要多多体会。

2011
09/16
分类：
前端
抢沙发

自定义样式的radio控件

先看效果

image

 

在有些地方默认的radio效果已经不能满足很多交互需求

 

image

 

如果抛弃默认的radio控件又会丢失很多重要的属性,比如后退或者F5之后表单信息的存储.

 

利用label与input的对应关系,把radio隐藏,显示label标签

 

然后根据name属性利用js对表单分组处理

 

原理就是这样的

 

html代码:

CSS部分：

.form .tb-radio {
	display: none;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	position: absolute;
}
.form .tb-radio-label {
	line-height: 26px;
	height: 26px;
	border: 1px solid #ddd;
	display: inline-block;
	padding: 1px 17px;
	outline: none;
	cursor: pointer;
	margin-top: 15px;
}
.form .tb-radio-label.crt,
.form .tb-radio-label:hover,
.form .tb-radio-label.hover,
.form .tb-radio-label:focus {
	border: 2px solid #ff6600;
	line-height: 26px;
	*line-height: 27px;
	_line-height: 26px;
	height: 26px;
	padding: 0 16px;
	background-color: #eaeaea;
	outline: none;
}
.form .tb-radio-label.crt {
	background: url(images/sprites.png) no-repeat 100% -702px;
	background-color: #eaeaea;
}

JS部分：

			KISSY.ready(function(S){
				//代码开始
				var DOM = S.DOM,
					Event = S.Event;
				var TBRadioLabels = S.query('.J_Radio');
				//从checked状态中读取选择情况
				S.each(TBRadioLabels,function(i){
					var t_radio = getInputByLabel(i);
					if(t_radio.checked){
						DOM.addClass(i,'crt');
					}
				});

				//点击或者回车触发选择
				Event.on(TBRadioLabels,'click keydown',function(ev){
					if(!S.isUndefined(ev.keyCode) && ev.keyCode != 13 && ev.keyCode != 0) return ;
					var radioGroup = DOM.attr(getInputByLabel(ev.currentTarget),'name');
					S.each(TBRadioLabels,function(i){
						if(DOM.attr(getInputByLabel(i),'name') === radioGroup){
							DOM.removeClass(i,'crt');
						}
					});
					getInputByLabel(ev.currentTarget).checked = true;
					DOM.addClass(ev.currentTarget,'crt');
				});
			//通过label获取对应的input
			function getInputByLabel(label){
				var inputId = '#'+DOM.attr(label,'for');
				return S.get(inputId);
			}

		});

附上demo:http://lansepink.appspot.com/media/aglsYW5zZXBpbmtyDQsSBU1lZGlhGJqJJAw/radio.htm

2011
08/01
分类：
前端
抢沙发