作者存档: hhdem
16个CSS3和jQuery加载动画
作者: hhdem
日期: 2012/02/03
没有评论 | 3 次查看
spin.js
CSS3 Loading Animation Loop
CSS3 Loading Animation
CanvasLoader Creator
Flickr Style Loading Animation Using JQuery
CSS Loading Animation Circle Style
Loading CSS spinners and bars generator for AJAX & JQuery
Ajax Style Loading Animation in CSS3 (no Images)
CSS3 loading spinners without images
Bouncy Animated Loading Animation
Sonic – looping loaders
Simple Loading Modal
PageLoading – jQuery plugin
Image Loader (jQuery Plugin)
Simple Content Loader
Preloadify
10个免费的css编辑器收集
作者: hhdem
日期: 2012/02/03
没有评论 | 2 次查看
[记录] Spring3 MVC中Ajax的使用
作者: hhdem
日期: 2012/01/30
没有评论 | 28 次查看
现在已经开始使用Spring3了,MVC虽然用了很久不过Ajax一直通过DWR实现,不过既然Spring3已经支持Ajax访问,那就必须折腾下了。
1. 首先,新建Controller类用于接收ajax请求,这里建立AjaxCheckController,目的是检查注册用户是否已经存在
@Controller
@RequestMapping("/a")
public class AjaxCheckController extends BaseController {
@Autowired
private UserManager userManager;
@RequestMapping(value = "/checkexists/loginname/{loginName}", method = RequestMethod.GET)
public @ResponseBody Map<String, Object> checkLoginNameExists(@PathVariable String loginName) {
User user = userManager.findUserByLoginName(loginName);
Map<String, Object> modelMap = new HashMap<String, Object>();
modelMap.put("exists", user != null);
return modelMap;
}
@RequestMapping(value = "/checkexists/email", method = RequestMethod.GET)
public @ResponseBody Map<String, Object> checkEmailExists(@RequestParam(value = "email", required = true) String email) {
User user = userManager.findUserByEmail(email);
Map<String, Object> modelMap = new HashMap<String, Object>();
modelMap.put("exists", user != null);
return modelMap;
}
}
2. 请求页面,在这里就是注册页面了,部分js代码如下:
function loginOnChange(event) {
....
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'a/checkexists/loginname/'+loginname,
dataType : 'json',
success : function(data) {
if (data && data.exists) {
log_tip_div.style.display = "inline";
log_tip.innerHTML="<img src='<@common.basePath/>/img/exclamation.gif'/> 该用户名已经被使用";
canSub = false;
loginUserError = true;
isLoginUserExists = true;
}else {
log_tip_div.style.display = "inline";
log_tip.innerHTML="<img src='<@common.basePath/>/img/fit.gif'/> 用户名可以使用";
canSub = true;
loginUserError = false;
isLoginUserExists = true;
}
},
error : function() {
alert("error")
}
});
.....
}
function emailOnChange(event) {
....
$.ajax({
type : 'GET',
contentType : 'application/json',
url : 'a/checkexists/email',
data: 'email='+email,
dataType : 'json',
success : function(data) {
if (data && data.exists) {
email_tip_div.style.display = "inline";
email_tip.innerHTML="<img src='<@common.basePath/>/img/exclamation.gif'/> 该邮箱已经注册过";
canSub = false;
emailError = true;
isEmailExists = true;
} else {
email_tip_div.style.display = "inline";
email_tip.innerHTML="<img src='<@common.basePath/>/img/fit.gif'/> 邮箱未被注册过,可以使用";
canSub = true;
emailError = false;
isEmailExists = true
}
},
error : function() {
alert("error")
}
});
....
}
到此就可以了,可以通过jquery轻松访问Spring的Controller,是不是很简单呀!
Spring+Freemarker的自定义标签 实现标签给定时间与当前时间对比
作者: hhdem
日期: 2012/01/09
没有评论 | 34 次查看
下面的三步为Spring + Freemarker组合添加自定义标签:compareTime
compareTime标签的目的是比较传入的日期对象与系统当前日期,返回特定字符串。这里并没最格式化日期的操作,如果仅需要对比到天可以格式化下日期。
1. 修改Spring配置文件:
<bean id="freemarkerConfigurer" class="org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer">
<property name="templateLoaderPath" value="WEB-INF/templates/"/>
<property name="freemarkerSettings">
<props>
<prop key="datetime_format">yyyy-MM-dd HH:mm</prop>
<prop key="default_encoding">UTF-8</prop>
<prop key="date_format">yyyy-MM-dd</prop>
<prop key="number_format">0.##########</prop>
</props>
</property>
<property name="freemarkerVariables">
<map>
<entry key="xml_escape" value-ref="fmXmlEscape"/>
<entry key="compareTime" value-ref="compareTime"/>
</map>
</property>
</bean>
...
<bean id="compareTime" class="com.hhdem.sample.utils.freemarker.CompareTime"></bean>
2. 添加CompareTime类,实现TemplateDirectiveModel接口
package com.hhdem.sample.utils.freemarker;
import java.io.IOException;
import java.util.Date;
import java.util.Map;
import freemarker.core.Environment;
import freemarker.template.SimpleDate;
import freemarker.template.TemplateDirectiveBody;
import freemarker.template.TemplateDirectiveModel;
import freemarker.template.TemplateException;
import freemarker.template.TemplateModel;
/**
* @since 2012-1-9,下午05:16:53
* @author <a href="mailto:liubingchina@gmail.com">hhdem</a>
* @version $Id$
* @comment
*
*/
public class CompareTime implements TemplateDirectiveModel{
@Override
public void execute(Environment env, Map params, TemplateModel[] loopVars,
TemplateDirectiveBody body) throws TemplateException, IOException {
Date date = new Date();
String showStr = "";
try {
SimpleDate cdate = (SimpleDate) params.get("cdate");
if(date.compareTo(cdate.getAsDate()) == 0) {
showStr = params.get("eStr").toString();
} else if (date.compareTo(cdate.getAsDate()) > 0) {
showStr = params.get("lStr").toString(); // 未来
} else if (date.compareTo(cdate.getAsDate()) < 0) {
showStr = params.get("fStr").toString(); // 过去
}
env.getOut().write(showStr);
} catch (RuntimeException e) {
env.getOut().write(showStr);
}
}
}
3. freemarker模板中直接通过下面代码调用即可
<@compareTime cdate=s.startDate lStr='已经过期' fStr='尚未过期'/>



























































