视频网站播放列表的简单实现

2008年08月24日 | 3,378 次浏览 | 标签:   

以前写的代码,写得比较简单。这里贴一下,我觉得可以作为演示Javascript操作cookie用:)

效果看这里,完整代码(代码中的CookieManager拷贝自O’Reilly的《JavaScript & DHTML Cookbook》,Utility.each函数拷贝自jQuery中的each)在这里


下面是关键的代码部分:

var PlayList = {
	cookieName:'PlayListIds',
	//保存要播放的视频id列表
	ids:[],
	//过期时间 单位秒
	expires:30,
	//读取cookie保存的播放列表信息 播放id保存格式为1232.1221.213.123  以.间隔
	read:function(){
		var cookieString = CookieManager.get(this.cookieName);
		return cookieString != '' ? cookieString.split('.') : [];
	},
	//获取视频id在数组中的索引
	indexOf:function(id){
		for(var i =0 ; i < this.ids.length; i++)
			if(this.ids[i] == id.toString())
				return i;
		return -1;
	},
	//更新cookie信息
	update:function(){
		CookieManager.set(
			this.cookieName,
			this.ids.join('.'),
			CookieManager.getExpiresDate(0,0,this.expires),
			'/',
			'.panweizeng.com'
		);
	},
	//增加视频
	add:function(id){
		if(typeof id != "number" || this.indexOf(id) != -1) return;
		this.ids.push(id.toString());
		this.update();
	},
	//移除视频
	remove:function(id){
		var index = -1;
		if(typeof id != "number" || (index = this.indexOf(id)) == -1) return;
		this.ids.splice(index,1);
		this.update();
	},
	//清空列表
	clear:function(){
		CookieManager.clear();
		var pItem = null,pItemSel = null;
		for(var i = 0; i < this.ids.length; i++){
			if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
				&& (pItem = $('playlist-item-'+this.ids[i])) != null )
			{
				pItemSel.className = "unselected";
				pItemSel.title = "添加到点播单";
				pItem.getElementsByTagName("img")[0].style.border = "5px solid white";
			}
		}
	},
	//渲染
	renderSelected:function(){
		var pItem = null,pItemSel = null;
		for(var i = 0; i < this.ids.length; i++){
			if( (pItemSel = $('playlist-item-sel-'+this.ids[i])) != null
				&& (pItem = $('playlist-item-'+this.ids[i])) != null )
			{
				pItemSel.className = "selected";
				pItemSel.title = "从点播单移除";
				pItem.getElementsByTagName("img")[0].style.border = "5px solid yellow";
			}
		}
	},
	//处理点击
	toggle:function(el){
		if(el.className == 'unselected'){
			el.className = 'selected';
			el.title = "从点播单移除";
			el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid yellow";
			this.add(parseInt(el.getAttribute('sid')));
		} else {
			el.className = 'unselected';
			el.title = "添加到点播单";
			el.parentNode.getElementsByTagName("img")[0].style.border = "5px solid white";
			this.remove(parseInt(el.getAttribute('sid')));
		}
	},
	//绑定事件
	attachEvent:function(){
		var _ = this;
		var els = Utility.getElementsByClassName("playlist","a","unselected");
		els = els.concat(Utility.getElementsByClassName("playlist","a","selected"));
		Utility.each(els,function(i,el){
			Utility.bind(el,'click',_.toggle,_,el)
		})
	},
	//初始化
	init:function(){
		this.ids = this.read();
		this.renderSelected();
		this.attachEvent();
	}
}

相关文章

评论(0)

目前还没有评论

发表评论

最受欢迎

评论最多