作者lyforever (LY)
看板Web_Design
标题Re: [问题] 请问英雄联盟的这个页面功能怎麽做？
时间Mon Jul 15 11:07:57 2013
※ 引述《beerson (啤酒僧)》之铭言：
: 痾，其实我是一直想要想一个方法解释我要问的问题
: 但一直找不到合适的措辞，所以就跑去打LOL
: 结果发现，这个页面就是我要做的功能阿
: 贴上连结请问一下版上的各位前辈
: 像这种点击checkbox後更改下方显示的内容资讯的方法是怎麽做的？
: 小弟有想过是否是先load所有的英雄资料然後再用js控制显示与否
: 但小弟的程式能力普普，不太会做
: 是否有现成的JQuery函式可以套用呢？
: 附上连结：http://lol.garena.tw/champions/
: By the way, 小弟是用rails架的站，不知道在这种环境用哪个方法最适合？
直接看原始码
<input type="checkbox" name="filter" id="filter" value="assassin">
"刺杀"
$().ready(function() {
$(".someClass").tipTip({maxWidth: "400px",edgeOffset: 10});
//以下开始, 选择input id为filter的 并且绑订click event,
//换成白话文来就是有没有叫filter的被按了, 每次被按了就执行以下的情况
$('input[id=filter]').click(function(){
//呼叫blockUI
$.blockUI();
//算一下有多少被打勾
var filters = $('input[id=filter]:checked').length;
var filter_str = "";
//把字串计算出来
for(k=0;k<filters;k++){
filter_str = (filter_str == "") ? "" : filter_str+",";
filter_str = filter_str + $('input[id=filter]:checked').eq(k).val();
}
//去算新的list
get_list(filter_str);
});
//网页一开始预设的list
get_list();
});
//取得list 的function
function get_list(types){
types = (types == undefined) ? "" : types;
//用post去取得新的list 并且showy在叫champion_list的地方
$.post("t_champion-list.php",{type : types},function(data){
$('
#champion_list').html(data);
$('
#champion_list').show();
$(".someClass").tipTip({maxWidth: "400px",edgeOffset: 30});
});
//结束unblock UI
$.unblockUI();
}
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 140.113.235.116
1F：推 chigi:偷推113! 07/15 18:27
2F：→ beerson:感谢c大耐心教学! 07/15 21:20
3F：→ lyforever:其实他这个写法不是挺好的 07/16 11:18
4F：推 beerson:不太懂为什麽要计算字串欸... 07/16 11:49
5F：推 beerson:请问如果要找这类的PLUGIN该打甚麽关键字呢？ 07/16 11:52
6F：→ lyforever:你要看的是他get_list的function 07/16 11:54
7F：→ lyforever:建议你学会jquery 比找plugin实在吧 07/16 11:55
8F：推 beerson:恩L大说的是，但那段我一直看不太懂~"~ 07/16 12:24
9F：→ lyforever:他写了一个t_champion-list.php 07/16 12:46
10F：→ lyforever:会处理 "刺杀,坦克,法师" 这种字串 然後return data 07/16 12:47
11F：→ lyforever:显然没有传入字串 就是 <div class="champ_list ... 07/16 12:48
12F：→ lyforever:以下预设的内容.... 07/16 12:50