document.observe("dom:loaded", function() {
Object.extend(String.prototype , {
bLength : function () {
if (!this.toString()) {
return 0;
}
var b = this.toString().match(/[^\x00-\xff]/g);
return this.toString().length + (b ? b.length : 0);
} ,
leftB : function(lens){
var s = this.toString().replace(/\*/g, ' ').replace(/[^\x00-\xff]/g, '**');
var str = this.toString().slice(0, s.slice(0, lens).replace(/\*\*/g, ' ').replace(/\*/g, '').length);
if (str.bLength() > lens && lens > 0) {
str = str.slice(0, str.length - 1);
}
return str;
}
});
var ajaxUrl = {
common : {
listurl : '/home/game/ajaxGameListbycatNew',
rankurl : '/home/game/ajaxCatRankNew',
newrankurl : '/home/game/ajaxCatRankUninstall'
},
mobile : {
listurl : '/mobile/Main/ajaxMobileListNew',
rankurl : '/mobile/Main/ajaxMobileRankNew'
}
};
var Tpl = {
listTpl : '<li><a href="#{appUrl}" class="ksimg_href"><img width="78" height="78" alt="#{appName}" title="#{appName}" class="ks_img" src="#{appLogo}"></a><span class="xxspan ks_title"><a href="#{appUrl}">#{appShortName}</a></span><span class="xxspan ks_score starbar"><a href="javascript:void(0)"><span data-now="#{appRate}"></span></a></span><span class="xxspan scorefs">#{appRate}分</span><span class="xxspan ks_number">#{totalUser}人</span></li>',
mobileListTpl : '<li class="anap_li"><a title="#{fullName}" target="_blank" href="#{detailUrl}"><img width="60" height="60" alt="#{name}" src="#{logo}" class="ks_img"></a><span class="mb_span ks_title"><a class="ks_title" title="#{fullName}" target="_blank" href="#{detailUrl}">#{shortName}</a></span><span class="mb_span ks_score">#{weekNum}次</span><span class="mb_span ks_number"><a target="_blank" class="ksdl" title="下载" href="#{downloadUrl}"></a></span></li>'
};
var Tab = Class.create({
initialize : function(dom) {
// common mobile
Element.extend(this.dom);
this.dom = dom;
this.mobile = dom.getAttribute('data-type');
this.type = this.mobile ? this.mobile : dom.id;
this.listurl = this.mobile ? ajaxUrl.mobile.listurl : ajaxUrl.common.listurl;
this.rankurl = this.mobile ? ajaxUrl.mobile.rankurl : ajaxUrl.common.rankurl;
this.pageSize = this.mobile ? 12 : 8;
this.page = 1;
},
getParams : function(type) {
if(type === 'list') {
return {
type : this.type,
page : this.page,
pageSize : this.pageSize
};
} else if(type === 'rank') {
return {
type : this.type
};
}
},
loadAll : function() {
this.page = 1;
this.loadList();
this.loadRank();
},
loadListSuccess : function(params , xmlHttp) {
var data = xmlHttp.responseText.evalJSON();
var succ = data.errorCode == 0 || data.error_code == 0;
if(succ) {
Element.extend(this.dom);
this.dom.store('page=' + params.page , data.data);
this.showGameList(params , data.data);
}
},
loadList : function() {
Element.extend(this.dom);
var params = this.getParams('list');
var data = this.dom.retrieve('page=' + params.page);
if(data) {
this.showGameList(params , data);
} else {
new Ajax.Request(this.listurl , {
method : 'get',
parameters : params,
onSuccess : this.loadListSuccess.bind(this , params)
});
}
},
showStar : function(list) {
nodes.scrollcontent.select('[data-now]').each(function(item) {
var pixel = parseFloat(item.getAttribute("data-now") || '5.0').round() * 14;
new Effect.Morph(item, {
style: 'width:' + pixel + 'px', // CSS Properties
duration: 0.5 // Core Effect properties
});
});
},
showGameList : function(params , data) {
var isMobile = this.mobile;
nodes.ks_nav.select('dd[id]').each(function(dom) {
dom.removeClassName('on');
});
this.dom.addClassName('on');
if(params.page == 1) {
nodes.goleft.addClassName('ks_leftnone');
} else {
nodes.goleft.removeClassName('ks_leftnone');
}
if(data.last) {
nodes.goright.addClassName('ks_rightnone');
} else {
nodes.goright.removeClassName('ks_rightnone');
}
if(!data.moreUrl) {
nodes.moreLink.hide();
} else {
nodes.moreLink.show().href = data.moreUrl;
}
var template = new Template(isMobile ? Tpl.mobileListTpl : Tpl.listTpl);
var htmlList = [];
htmlList.push('<ul>');
(data.data || data.list).each(function(item) {
if(!isMobile && !item.appShortName) {
var len = item.appName.bLength();
if(len > 8) {
item.appShortName = item.appName.leftB(8) + '...';
} else {
item.appShortName = item.appName;
}
}
if(isMobile && !item.shortName) {
var len = item.name.bLength();
if(len > 10) {
item.shortName = item.name.leftB(10);
} else {
item.shortName = item.name;
}
}
htmlList.push(template.evaluate(item));
});
htmlList.push('</ul>');
nodes.scrollcontent.update(htmlList.join(''));
nodes.scroll.hide();
new Effect.Appear(nodes.scroll , {
afterFinish : this.showStar.bind(this , data.list)
});
},
loadRank : function() {
},
goleft : function() {
var page = this.page;
if(page == 1) {
return;
}
this.page --;
this.loadList();
},
goright: function() {
var none = nodes.goright.hasClassName('ks_rightnone');
if(none) {
return;
}
this.page ++;
this.loadList();
}
});
Tab.getCurrentTab = function() {
return Tab.current;
};
var nodes = (function() {
var list = 'ks_nav,all,operate,tactics,rollplay,chess,puz,singlegame,m_android,m_apple,goleft,scroll,scrollcontent,goright,moreLink,ks_right,gameTile,gametTitleOff,gametTitleOn,ks_list';
var result = {};
list.split(',').each(function(nodeKey) {
if($(nodeKey)) {
result[nodeKey] = $(nodeKey);
Element.extend(result[nodeKey]);
}
});
return result;
})();
nodes.ks_nav.on('click' , function(e) {
var target = e.element();
if(target.id) {
Element.extend(target);
var tab = target.retrieve('tab');
if(!tab) {
tab = new Tab(target);
target.store('tab' , tab);
}
tab.loadAll();
Tab.current = tab;
}
});
var HoverClass = {
goleft : 'ks_lefthover',
goright: 'ks_righthover'
};
[nodes.goleft,nodes.goright].each(function(item) {
item.on('mouseover' , function(e) {
var target = e.element();
target.addClassName(HoverClass[target.id]);
});
item.on('mouseout' , function(e) {
var target = e.element();
target.removeClassName(HoverClass[target.id]);
});
item.on('click' , function(e) {
var target = e.element();
var tab = Tab.getCurrentTab();
tab[target.id]();
});
});
});
分享到:
相关推荐
网上找的一些prototype.js学习资料
最新Javascript开源框架,包含API帮助文档的学习网址。资源共享!
Prototype是一个JavaScript框架,旨在简化动态Web应用程序的开发。原型被称为作为一个单一的文件分发的prototype.js,本文给大家介绍prototype框架,感兴趣的朋友一起学习吧
prototype.js ajax,javascript框架学习
prototype.js 是Sam Stephenson写的一个Javas cript的小框架(实际上是一个函数库),该框架首页是:http://prototype.conio.net/ prototype.js是一个非常优雅的javas cript基础类库,对javas cript做了大量的扩展...
开始的时候不过是想学一个 JavaScript 的开发框架,在 Prototype 和 jQuery 之间犹豫了许久,后来选中了 Prototype,原因是 Prototype 显得更复杂:)并且全面。在我的思维中,由复杂到简单,那简单的那一份大致相当...
prototype.js 是Sam Stephenson写的一个Javascript的小框架(实际上是一个函数库),该框架首页是:http://prototype.conio.net/ prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,...
Prototype 是由 Sam Stephenson 开发的一个 Javascript 类库,也是其他框架的鼻祖。其对现有的部分 Javascript 对象比如 Object 、 Function 、 Dom 、 String 等进行扩展,并且对 Ajax 应用进行封装,借此提供了...
以下是prototype框架简介 prototype.js 是Sam Stephenson写的一个Javascript的小框架(实际上是一个函数库),该框架首页是:http://prototype.conio.net/ prototype.js是一个非常优雅的javascript基础类库,对...
这是本人在学习jQuery框架Prototype的时候做的笔记,很详细
运用已有的成熟框架进行项目开发,不但能提高代码的稳定性和兼容性,更能...本书详细讲解3个著名的Ajax开发框架——Dojo、Prototype和script.aculo.us。在介绍框架的原理和使用方法的基础上,提供了典型的应用案例。
prototype.js 是Sam Stephenson写的一个Javas cript的小框架(实际上是一个函数库),该框架首页是:http://prototype.conio.net/ prototype.js是一个非常优雅的javas cript基础类库,对javas cript做了大量的扩展...
jQuery是继prototype之后又一个优秀的Javascrīpt框架。
}, //格式化方法,如果从java的角度来说,其实叫format更好 :slightly_smiling_face: evaluate: function(object) { //检查是否定义了toTemplateReplacements方法,是的话调用 //整个的Prototype框架中,只
学习Ajax非常好的框架
下面是我在学习ajax的过程中,实现的一个解决方案,不知道设计得怎么样,所以想发出来给大家参考下,恳请给予建议和指导,狗狗感激不尽!需求概述:需要将二维数据通过表格展现给客户端,用户可以事先选择每页显示的...
Prototype.js作为javascript的成功的开源框架,封装了很多好用的功能,虽然官方没提供什么文档,不过在google上一搜,好多相关的文档,不过在学习使用的过程中还是碰到了一些问题,希望熟悉的朋友能多加指点,对于...
Enumerable是Prototype框架的基石,而Enumerable不单独使用,在Prototype中其它对象mix了Enumerable里面的方法,这样就可以在这些对象上应用Enumerable的方法,这样的对象有:Array,Hash,ObjectRange,还有一些和...
找了N久才找到的Prototype1.5.0 API 中文手册,分享爱那个给大家, 以前见好多下载下来都无法显示, 一个非常优秀的JS框架,值得学习!