Archive for the ‘Javascript’ Category
Monday, November 2nd, 2009
最近有个项目，用到很多的表单校验，尝试了一下jQuery.validator，甚是顺手，地址：http://plugins.jquery.com/project/validate，基本的用法：
$('#formId').validate({
debug:true, // 打开debug模式，不会真实提交，适合测试
rules:{
uName:"required", // 需要录入
uNick:{
required:true
}, // ...
Posted in Javascript | 1 Comment »
Monday, March 16th, 2009
上周在内部和大家分享了一下jQuery的选择器，做了一个简单的demo：http://chaoqun.17348.com/static/jQuery-selector-demo.html，直接调用的google js api，可以直接下载到本地运行，列出了一些常用的选择器方法，最后一个是动态选择器，可以传入一个变量来选择。文档就不写了，参阅：http://docs.jquery.com/Main_Page，直接看Demo演示吧。
Posted in Javascript | No Comments »
Wednesday, August 20th, 2008
本博客所有原创文章采用知识共享署名-非商业性使用-相同方式共享，转载请保留链接http://chaoqun.17348.com/2008/08/pager_with_checkbox_on/
之前的一个项目，给新浪空间做的音乐控件，大家可以登录上去看一下，个人感觉产品设计不错，我现在天天就在上面在线听音乐，大家可以测试一下里面的搜索效果，在搜索结果的第一页选择一些歌曲(或者全选)，然后翻任意页，再选，再翻任意页，再选，后头查一下你选择过了的页面，看看是不是你之前选择过的歌曲还保留着，下面就说一下这个的实现方式，javascript部分居于mootools。
实现原理：
每一个分页都包含在一个id为page+页码的div中，翻到其他页时，隐藏当前页，首先判断目标页是否已经加载过，如果没有就通过ajax去获取页面，同样包含在一个page+页面的div中，等于说所有的分页都在页面中，只不过非当前页的div都设为display=none了，所以细心的你可能会发现加载过的页面再加载怎么会那么快啊。
核心的部分就是这个javascript函数：
// 显示分页，传进去分页页码
function show_search_page(page_num)
{
// 首先判断目标页是否已经加载过，加载过的话就把其他页都设定隐藏再把当前页显示，然后结束返回
if ($chk($('page'+page_num)))
{
$('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
$('page'+page_num).setStyle('display','block');
return;
}
// 如果没有加载过，就通过ajax去获取页面数据，然后生成一个page+页面的div，并显示出来
var search_song_with_ajax = new Ajax('./getsearchdata.php?cur_page=' + page_num + '&key={_$search_key_}',
{method: 'get',
onComplete: function(){
$('song_div').getElements('div[id^=page]').each(function(item,index){$(item).setStyle('display','none');});
var new_div = new Element('div',{
'id':'page'+page_num
});
$(new_div).setHTML(this.response.text);
$(new_div).injectInside('song_div');
}
}).request();
}
javascript的代码可以到页面去查看，hope it usefull for you.
Posted in Javascript | 1 Comment »
Thursday, July 31st, 2008
本博客所有原创文章采用知识共享署名-非商业性使用-相同方式共享，转载请保留链接http://chaoqun.17348.com/2008/07/firefox_mootols_ajax
今天下午，碰到一个奇怪的问题，通过mootools自带的ajax异步发送一个url请求去创建一个比如文章吧，url类似：http://www.example.com/article.php?article_name=article,发现当文章名相同时在firefox3下有时候能创建成功，有时不能，但是在IE7下没有问题，马上想到是浏览器cache的问题，firefox3以为请求的地址不变就不用再向服务器发送新请求了（好心做坏事），于是在php文件中加上header("Cache-Control:no-cache,must-revalidate"); 还是不起作用，而mootools带的ajax又没有cache控制的选项。
解决的方法比较取巧，在url后加上一串随机数，这些firefox3就会认为是新的请求了，代码大致如下：
url = url + '&rand_num=' + Math.random();
除非RP太差，否则不至于出问题。
Posted in Javascript | 1 Comment »