CssRain-前端技术

jQuery富客户端框架 DWZ.

DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.

DWZ富客户端框架设计目标是简单实用,快速开发。

欢迎大家提出建议，我们将在下一版本中进一步调整和完善功能．

DWZ富客户端框架是开源项目，可以免费获取源码。希望更多的开发人员使用，共同推进国内整体ajax开发水平。

在线演示地址 http://dwz.duqn.com

在线文档 http://dwz.duqn.com/doc/dwz-user-guide.pdf

视频教材 http://dwz.duqn.com/doc/dwz-user-guide.swf

Google Code下载: http://code.google.com/p/dwz/

DWZ QQ群 107983317

实现Google Calendar(日历)的几个推荐方案。

作者：66
Hi，大家好，我是CssRain的站长。爱好前端开发的我先后从事过Java开发，JavaScript，CSS开发等，已经工作2年+了。目前就职于亚信中国(Asiainfo)，担任前端开发和创新工作。忠心希望所有的读者在这里都能够有收获和进步，同时也希望大家多多支持CssRain。这是我的最大心愿。Best Regards。

如果你正在为寻找一个类似google日历的控件而烦恼，那么你非常有必要看这篇文章。
通过文章中介绍的控件，你可以完全制作出一个属于自己的calendar日程管理。

首席推荐（Fullcalendar）：
官方演示：http://arshaw.com/fullcalendar/
通过Fullcalendar，你可以做出一个完全类似google日历的程序。
它使用起来不难，因为它是基于jQuery UI的，继承了简单用法的特征。
快去体验吧。
推荐2：dhtmlxScheduler ，这是dhtmlx系列中，我认为最好的一个产品。
它已经实现了日，周，月。
官方演示： http://dhtmlx.com/docs/products/dhtmlxScheduler/index.shtml
推荐3：spinelz ，这是一个基于prototype的日历控件，实现的不太好。主要是因为这个日历很早就做过了，
作者也一直没更新。官方网站：http://script.spinelz.org/index_en.html
演示：http://www.cssrain.cn/demo/spinelz/test/calendar.html

推荐4：jMonthCalendar是一个jQuery插件，它能在一个月份视图中创建和显示一系列事件。如果插件在初始化时已具备相应的事件数组（array），插件就可以开始工作了。不过它也提供了扩展，完全可以动态添加事件并呈现出来。该插件支持多个以天为单位的事件，并且支持拖放。可按年/月进行导航。演示页面：http://www.bytecyclist.com/SourceCode/jMonthCalendar/1.3.0-beta/Demo.html

官方下载请点击此处：http://www.bytecyclist.com/projects/jmonthcalendar/

jQuery插件—仿facebook样式的模态框.

一款仿facebook样式的模态框.
演示：

http://www.ajaxplaza.net/jmodal/jmodal.htm

下载：

http://code.google.com/p/jmodal/

jQuery Address – Deep linking plugin。

类似于瞄点技术( url#address )，使得浏览器的后退按钮生效。在Ajax应用中，可以使用。
演示：
http://www.asual.com/jquery/address/samples/tabs/
http://www.asual.com/jquery/address/samples/api/
下载：

http://www.asual.com/jquery/address/

jQuery Autocomplete Input like FaceBook。

一款类似于facebook的自动提示文本框。
演示：

http://loopj.com/tokeninput/demo.html

下载：

http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/

利用jQuery制作类似skype的按钮效果.

演示：

http://www.cssrain.cn/demo/skypebuttons/SkypeButton.html

http://www.cssrain.cn/demo/skypebuttons/SkypeButton2.html

关键代码：
$(document).ready(function(){
$(“.button”).hover(function(){
if(!$(“.button img”).is(“:animated”)){
$(“.button img”)
.animate({top:”-10px”}, 200).animate({top:”-4px”}, 200)
.animate({top:”-7px”}, 100).animate({top:”-4px”}, 100)
.animate({top:”-6px”}, 100).animate({top:”-4px”}, 100);
}
});
});

jQuery插件—提升表单可用性.

非常好的可用性快捷键
某天你需要为文本框之类的添加快捷键提示，这是个不错的选择。
提升表单可用性和易用性。
演示：

http://www.cssrain.cn/demo/AccessKeyHighlighter/demo.html

下载：

http://www.cssrain.cn/demo/AccessKeyHighlighter/AccessKeyHighlighter.rar

jQuery 图片切换 响应键盘 关联标题

原效果见此网址 http://abcnews.go.com/

Demo 演示

DEMO 下载地址

本来是在蓝色理想论坛上看到的 有人说去面试 结果让他写这个效果 没有写出来

看了一下，觉得老外做的确实不错 很细致 用户体验很舒服，可见人家的严谨和细致，但是没有打开代码看，自己用jQuery 实现了一个 用了半天时间 中间还碰到了几个小麻烦 ，再次感叹人家原来的东西做的认真，考虑的细致，自己实现的时候才能体会到人家的心思。

下面贴一下代码 做一下注释：

// JavaScript Document By Trance

$(document).ready(function(){
         
var t=false; //定时器
var time=5000; //切换间隔
var speed=500; //滚动时间
var fot=300; //淡出时间
var fin=300; //淡入时间
var i=0; //起始序列   这个变量将贯穿整个程序 来控制要显示的序列    
var len=$("#list li").length; //滚动内容个数
var wh=330; //每个滚动内容的宽度

$("#info").css({"width": wh*len + "px"}); //初始化滚动容器的宽度 
//标记当前 函数        
function cur(ele,currentClass){
ele= $(ele)? $(ele):ele;
ele.addClass(currentClass).siblings().removeClass(currentClass);
}

$("#prev").click(function(){    //左翻按钮点下 调用roll() 函数 左翻
   roll(-1);  
   })
    
$("#next").click(function(){    //右翻按钮点下 调用roll() 函数 右翻
   roll(1);  
   }) 

$("#list li").mouseover(function(){ // 新闻列表项目划过
   checkfade(); //检查 并 初始化淡入淡出 
   i=$("#list li").index($(this)[0]); //将 i 变为划过的序列
   if(!$(this).hasClass("cur")){ //如果已经是当前的序列 就不再执行fade() 函数
    fade(i);
    }  
   cur(this,"cur");  
   })
//滚动函数 滚动效果的关键函数 有一个参数j 通过传入值 -1 或者 1 来控制容器的位置 
function roll(j){ 
   checkroll(); //检查 并 初始化滚动条件
   if(!$("#info").is(":animated")){ // 预防多次处罚滚动引起的杂乱 必须在没有执行动画的时候执行以下内容
    i+=j;      // i的值 因传入的 j 而改变
    if(i!=-1 && i!=len){    //普通的情况  
     $("#info").animate({"left" : -(wh*i)+"px"},speed);   //控制#info 也就是容器的 x 坐标来实现动画翻转    
     }else if(i==-1){ // 当翻到第一个时 自动转到最后 以形成循环
      i=len-1;
      $("#info").css({"left" : -(wh*(i-1))+"px"}); //先将 容器位置定到 需要滚动一个宽度才能到达的地方
      $("#info").animate({"left" : -(wh*i)+"px"},speed);      //再执行滚动 就形成了模拟正常的滚动
      }else if(i==len){     //与上一个环节一样 不过这个是 滚到最后一个 向第一个翻转    
       i=0;
       $("#info").css({"left" : -wh+"px"});
       $("#info").animate({"left" : 0+"px"},speed);      
       } 
    cur($("#list li").eq(i) , "cur");    //别忘记标记相应列表项目
    }   
   }
  
//Fade 函数 是渐入渐出的切换效果函数 
function fade(k){ 
   checkfade();
   $("#info").find("div:visible").fadeOut(fot,function(){
    $("#info").find("div").eq(k).fadeIn(fin)
    })
   }
  
//检查并且初始化滚动
function checkroll(){  
   if($("#info").find(".hide").html()){ //如果#info 里面 有隐藏的元素 则让它们都显示 并且初始化容器宽度
     $("#info").find("div").removeClass("hide").show();
    $("#info").css({"left" : -(wh*i)+"px"});
    }
   }
//检查并且初始化Fade 
function checkfade(){
   if(!$("#info").find(".hide").html()){ //如果没有隐藏的元素 则 隐藏除了当前序列的div 的其他所有元素 并初始化容器位置
     $("#info").find("div").not($("#info").find("div").eq(i)).addClass("hide");
    $("#info").css({"left" : 0+"px"});
    }
   }

//自动执行 
function setInt(){ //周期函数
   t=setInterval(function(){roll(1)},time);
   }
function clearInt(){ //取消周期的函数
   if(t) clearInterval(t);
   }
  
$("#area").hover( //鼠标放进去的时候就取消掉自动播放
   function(){ clearInt() },
   function(){ setInt() }
   ) 

//响应键盘 的上下左右键
$(document).keydown(function(event){  
   event = even
t || window.event;
   if(event.keyCode==38 || event.keyCode==37){ 
    clearInt();
    roll(-1);
    setInt();
    };
   if(event.keyCode==40 || event.keyCode==39){   
    clearInt();
    roll(1);
    setInt();
    }; 
   })

//开始自动 页面加载完毕开始自动
setInt(); 

})

最后 其实这个小程序 最重要的是对 i 也就是显示序列的控制

为什么划过列表用渐入渐出的方式切换 而不是统一的滚动呢 这是为了避免 滚动距离过长 引起的速度太快，消耗系统资源 防止程序停止响应 同时还有一种轻柔的感觉

任何一种切换 不管是用什么方式触发 都要考虑当前 i 的值 的变化 对于两种切换方式的变换处理 和对交互过程的控制 是这个小程序的重点所在。

jQuery 投票调查组件

前两天同学推荐玩玩校内的各种测试 进去一看 FLASH做的测试的界面不错 就用jQuery模拟了一下.写了两个版本的 一个是静态的 把调查问题写在页面里面的 一个是可以通过XML文件更新的

主要功能:

测试答题框

可作心理测试等测试题使用

问题和选项通过questions.xml设置

显示当前得分

显示当前答题进度

可作翻看选过的选项

通过不同的得分调取不同结果内容

jQuery插件–jCountr(计时)

&oq演示:

http://www.4g3nt0r.de/wiki/projekte/jcountr/demo/start

用法：
$().counter({参数});
例子：
$(“#counter”).counter({min:”02″,sec:”15″});
$(“#counter2″).counter({min:”02″,sec:”15″,direction:”up”});
$(“#counter3″).counter({min:”02″,sec:”15″,direction:”down”,interval:”2″,iteration:”2″});
$(“#counter4″).counter({min:”02″,sec:”15″,direction:”up”,min_end:”03″});
参数:
hour，
min,
sec,
hour_end,
min_end,
sec_end,
message,
delimiter,
return_url,
interval,
iteration,
direction
下载：

http://plugins.jquery.com/project/jCountr

更多：
http://www.google.cn/search?hl=zh-CN&q=site:cssrain.cn+倒计时&btnG=Google+搜索&meta=&aq=f=