Struts2+JQuery+Json及JQuery相关插件的例子
??
?
4.tableopen.jsp弹出层插件:
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Strict//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
?
5.tablesorter.jsp排序层插件:
?
6.tablesortpager.jsp排序兼分页插件:
?????????????
?
8.table-validation.jsp验证插件:
?????????????
<%@?page?language="java"?import="java.util.*"?pageEncoding="UTF-8"%>??- <%??
- String?path?=?request.getContextPath();??String?basePath?=?request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";??
- %>??<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??
- <html>????<head>??
- ????<link?rel="stylesheet"?type="text/css"?media="screen"?href="css/screen.css"?mce_href="css/screen.css"?/>??????<mce:script?src="/S2SHJQuery/js/jquery.js"?mce_src="S2SHJQuery/js/jquery.js"?type="text/javascript"></mce:script>??
- ?<mce:script?src="/S2SHJQuery/lib/jquery.validate.js"?mce_src="S2SHJQuery/lib/jquery.validate.js"?type="text/javascript"></mce:script>???<mce:script?src="/S2SHJQuery/lib/jquery.validate.messages_cn.js"?mce_src="S2SHJQuery/lib/jquery.validate.messages_cn.js"?type="text/javascript"></mce:script>??
- ?<mce:style?type="text/css"><!--??*?{?font-family:?Verdana;?font-size:?96%;?}??
- label?{?width:?10em;?float:?left;?}??label.error?{?float:?none;?color:?red;?padding-left:?.5em;?vertical-align:?top;?}??
- p?{?clear:?both;?}??.submit?{?margin-left:?12em;?}??
- em?{?font-weight:?bold;?padding-right:?1em;?vertical-align:?top;?}??--></mce:style><style?type="text/css"?mce_bogus="1">*?{?font-family:?Verdana;?font-size:?96%;?}??
- label?{?width:?10em;?float:?left;?}??label.error?{?float:?none;?color:?red;?padding-left:?.5em;?vertical-align:?top;?}??
- p?{?clear:?both;?}??.submit?{?margin-left:?12em;?}??
- em?{?font-weight:?bold;?padding-right:?1em;?vertical-align:?top;?}</style>????<mce:script?type="text/javascript"><!--??
- ??$(document).ready(function(){??????//引入验证的js.jquery.validate.js,并引入中文js?jquery.validate.messages_cn.js??
- ????//可在js里面进行修改,注意css格式??????//获取form值后,即可根据id值来进行validation操作??
- ????//取相应的验证规则:对应的输入值即可??????//可参照锋利的JQuery?P218页??
- ????//同时可利用这一特性生成验证码??????$("#commentForm").validate({??
- ????????rules:?{??????????????username:?{??
- ????????????????required:?true,??????????????????minlength:?3??
- ????????????},??????????????email:?{??
- ????????????????required:?true,??????????????????email:?true??
- ????????????},??????????????url:"url",??
- ????????????comment:?"required"??????????}??
- ??????});????});??
- ????//?--></mce:script>??
- ??</head>??????
- ??<body>??????<form?class="cmxform"?id="commentForm"?method="get"?action="">??
- ?<fieldset>?????<legend>jquery-validation?插件jsp</legend>??
- ???<p>???????<label?for="cusername">用户名:</label>??
- ?????<em>*</em><input?id="cusername"?name="username"?size="25"?/>?????</p>??
- ???<p>???????<label?for="cemail">邮件:</label>??
- ?????<em>*</em><input?id="cemail"?name="email"?size="25"??/>?????</p>??
- ???<p>???????<label?for="curl">URL:</label>??
- ?????<em>??</em><input?id="curl"?name="url"?size="25"??value=""?/>?????</p>??
- ???<p>???????<label?for="ccomment">评论:</label>??
- ?????<em>*</em><textarea?id="ccomment"?name="comment"?cols="22">??