jquery模板,jquery模版
谁能提供一套系统登陆后的模板，漂亮一点的，利用JQuery的，左边是菜单导航的，右边是页面的那种！
有几个jquery的ui框架可供参考：easyui，ligerui，dwz， 最后还有个extjs，你google或百度一下就都可以找到了。
成都创新互联公司-专业网站定制、快速模板网站建设、高性价比禅城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式禅城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖禅城地区。费用合理售后完善，十载实体公司更值得信赖。
jquery在网页设计中的作用
Web开发人员每天都使用JavaScript为他们创建的网站带来必要的功能。jQuery提供了一个提供强大功能和灵活性的特殊工具。jQuery是一个JavaScript库，有助于简化和标准化JavaScript代码和HTML元素之间的交互。JavaScript允许网站具有交互性和动态性，jQuery是一种有助于简化流程的工具。
同时JQuery也是一个紧凑，快速且功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。JQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。换句话说，由于JQuery，JavaScript以简化形式呈现。阅读起来相当舒服。
扩展资料：
JQuery的优点
1、易于使用：如果我们将它与标准JavaScript和其他库进行比较，它使用起来既简单又快捷。它由简单的语法组成，并且需要较少的代码行。
2、巨大的库：与其他库相比，它允许您执行大量功能。
3、插件的可用性：可以使用许多预先编写的插件来立即压缩开发过程。这背后的另一个优点是脚本的效率和安全性。
4、综合教程： JQuery网站提供了不言自明的文档和教程，以便在绝对的编程初学者面前进行理解。
5、AJAX支持：它允许我们轻松地开发Ajax模板，Ajax支持更流畅的界面，可以在页面上执行操作，而不需要重新加载整个页面。
6、灵活性：所有浏览器中的契约，是目前最流行的JavaScript库。
JQuery框架的主要内容
由于项目用的是SSH框架，又用到了Freemarker模板页面，数据库是Mysql5.0，主要内容如下所示：
1. 注册页面，用Freemarker所写，这里使用了JQuery的一个表单验证框架formvalidator：
对前台注册页面register.ftl进行表单验证，当符合基本验证规则后，再通过JQuery formvalidator Ajax将数据传到action中。
register.ftl：
html
head
meta http-equiv=Content-Type content=text/html; charset=utf-8 /
title会员注册/title
link href=${base}/forum/css/pass.css rel=stylesheet type=text/css
link href=${base}/css/validator.css rel=stylesheet type=text/css/
script type=text/javascript src=@s.url value='/js/showError.js'//script
script type=text/javascript src=@s.url value='/js/jquery-1.3.2.min.js'//script
script type=text/javascript src=${base}/js/formValidator.js charset=UTF-8/script
script type=text/javascript src=${base}/js/formValidatorRegex.js charset=UTF-8/script
!—下面的JS代码是，实时验证用户名或注册邮箱是否存在 --
script type=text/javascript
$(document).ready(function(){
$.formValidator.initConfig({formid:form1,onerror:function(msg){},onsuccess:function(){return true;}});
$(#username)
.formValidator({onshow:请输入用户名,onfocus:请您记住填写的用户名，以后登录时需要用到！,oncorrect:该用户名可以注 册})
.inputValidator({min:4,max:15,onerror:用户名长度不能小于4个字符})
.ajaxValidator({
type : get,
datatype: json,
data: username:+$(#username).val(),
url : ${base}/user/ajax/userCheck!checkUser.action,
success : function(data){if(data.userExist){return false;}else{return true;}},
buttons: $(#button),
error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},
onerror : 该用户名已经存在，请更换用户名,
onwait : 正在对用户名进行合法性校验，请稍候…
});
$(#email)
.formValidator({onshow:请输入邮箱,onfocus:邮箱6-100个字符,请正确输入,oncorrect:恭喜你,邮箱可以注册,forcevalid:true})
.inputValidator({min:6,max:100,onerror:你输入的邮箱长度非法,请确认})
.regexValidator({regexp:^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$,onerror:你输入的邮箱格式不正确})
.ajaxValidator({
type : get,
datatype: json,
data: email:+$(#email).val(),
url : ${base}/user/ajax/userCheck!checkUser.action,
success : function(data){if(data.emailExist){return false;}else{return true;}},
buttons: $(#button),
error: function(){alert(服务器没有返回数据，可能服务器忙，请重试);},
onerror : 该邮箱已经存在，请更换邮箱,
onwait : 正在对邮箱进行校验，请稍候…
});
});
/script
/head
body
div id=passmain
div class=passbottom
div class=pbleftb
h3 style=text-align:center;新用户注册/h3
p class=p2t带*号的项目为必选项, 请全部填写/p
ul class=p2ul
@s.form action=register method=POST theme=simple id=form1 name=form1
@s.token name=token/
li class=p2li
div class=p2left用户登录昵称span style=color:#FF0000;* /span/div
div class=p2right@s.textfield name=user.username id=username class=item_input size=30 maxlenght=20 required=true onblur=checkUser(); /
/div
div class=p2centerdiv id=usernameTip/
/div
/libr
li class=p2li
div class=p2left性别span style=color:#FF0000;* /span/div
div class=p2right@s.radio
name=user.gender
list={action.getText('user.gender.male'):action.getText(user.gender.male),action.getText('user.gender.female'):action.getText(user.gender.female)}
size=30//div
/libr
li class=p1t注意：邮箱必须是可以收到程序员之家激活码的。/li
li class=p1t用户注册后，需要激活，才可以使用！激活码只会发到您注册邮箱中。/li
li class=p2li
div class=p2leftEmail地址span style=color:#FF0000;* /span/div
div class=p2right@s.textfield name=user.email id=email class=item_input size=30 onblur=checkEmali(); required=true/
/div
div class=p2centerdiv id=emailTip/div/div
/libr
li class=p1t5-20位字母、数字或字符组合，首字母必须为字母。/li
li class=p1t为了您的帐户安全，强烈建议您的密码使用字符+数字+特殊字符方式，并且密码长度大于8位。/li
li class=p2li
div class=p2left密码span style=color:#FF0000;* /span/div
div class=p2right
@s.password name=user.password id=userPassword class=item_input size=30 maxlength=16 onblur=checkPassword(); required=true/
/div
div class=p2centerdiv id=divHintPassword style=display:none;/div
/div
/libr
li class=p2li
div class=p2left重复输入密码span style=color:#FF0000;* /span/div
div class=p2right@s.password name=verifyPassword id=verifyPassword class=item_input size=30 maxlength=16 onblur=validatePassword(); required=true//div
div class=p2center
div id=divHintverifyPassword style=display:none;/div
/div
/libr
br
li class=p2li
div class=p2left输入校验码span style=color:#FF0000;*/span /div
div class=p2right@s.textfield name=validationCode class=item_input size=10 required=true/
/div
/li
li class=p2li
div class=p2left校验码span style=color:#FF0000;*/span /div
div class=p2rightimg src=@s.url value='/vcode.jpg'/ align='absmiddle' border='0'//div
/li
li class=p1tinput name=提交 type=submit value=注册用户 /
/li
/ul
/div
/@s.form
/div
/div
/body
/html
2．后台Action类，UserAjaxAction.java:
基于Hibernate与数据库进行交互验证用户名和邮箱是否存在，同时返回的数据格式为JSon类型的。
package com.qiuyanluocheng.action;
import IO.IOException;
import com.googlecode.jsonplugin.annotations.JSON;
/**
*
* @author qiuyanluocheng
*
*/
public class UserAjaxAction extends BaseAction
{
/**
* BaseAction是自己封装的
*/
private static final long serialVersionUID = 1L;
private String username;// 用户名
private String email;// 邮箱
private boolean userExist;
private boolean emailExist;
// 表示返回的Json数据中不含此属性
@JSON(serialize=false)
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getEmail()
{
return email;
}
public void setEmail(String email)
{
this.email = email;
}
public boolean isUserExist()
{
return userExist;
}
public void setUserExist(boolean userExist)
{
this.userExist = userExist;
}
public boolean isEmailExist()
{
return emailExist;
}
public void setEmailExist(boolean emailExist)
{
this.emailExist = emailExist;
}
// 检查用户是否存在
public String checkUser() throws IOException
{
if(username != null){
if(this.getUserService().isUsernameExist(username)){
// System.out.println(用户存在！！！！！+username);
userExist = true;
}else{
// System.out.println(用户不存在！！！！！+username);
userExist = false;
}
}
if(email != null){
if(this.getUserService().isEmailExist(email)){
// System.out.println(邮箱存在！！！！！+email);
emailExist = true;
}else{
// System.out.println(邮箱不存在！！！！！+email);
emailExist = false;
}
}
return ajax;
}
}
注意需要导入jsonplugin-0.34.jar包。
3. 配置文件struts.xml：
配置action，并且注意package要继承json-default包，且结果集类型为json。
?xml version=1.0 encoding=utf-8?
!DOCTYPE struts PUBLIC -//Apache Software Foundation//DTD Struts Configuration 2.0//EN dtds/struts-2.0.dtd
struts
package name=userAjax extends=json-default namespace=/user/ajax
action name=userCheck class=com.qiuyanluocheng.action.UserAjaxAction
!—返回结果类型必须为json --
result name=ajax type=json/result
/action
/package
/struts
jQuery框架中增加对输入框的验证，在设计页面表单时，常常因为需要写大量的验证信息，还要写复杂的正则表达式，现在这样一个验证框架可以解决这样的繁杂问题。这样jquery.validate.js就诞生了，jquery.validate.js是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法，并且对国际化也有很好的支持 。
validate自带的默认验证
required: 必选字段,
remote: 请修正该字段,
email: 请输入正确格式的电子邮件,
url: 请输入合法的网址,
date: 请输入合法的日期,
dateISO: 请输入合法的日期 (ISO).,
number: 请输入合法的数字,
digits: 只能输入整数,
creditcard: 请输入合法的信用卡号,
equalTo: 请再次输入相同的值,
accept: 请输入拥有合法后缀名的字符串,
maxlength: jQuery.format(请输入一个长度最多是 {0} 的字符串),
minlength: jQuery.format(请输入一个长度最少是 {0} 的字符串),
rangelength: jQuery.format(请输入一个长度介于 {0} 和 {1} 之间的字符串),
range: jQuery.format(请输入一个介于 {0} 和 {1} 之间的值),
max: jQuery.format(请输入一个最大为 {0} 的值),
min: jQuery.format(请输入一个最小为 {0} 的值)
怎么引用jquery mobile 框架
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容
CSS文件jquery.mobile-1.0a1.min.css
jQuery library jquery-1.4.3.min.js
jQuery Mobile library jquery.mobile-1.0a1.min.js
在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
jquery template 输出html
是不是img标记被转义了
一般模板应该有配置项，可以让其对html标记不进行转义吧
如何在 Wordpress 中使用 jQuery
简单啊，就两步
加载 jQuery 库，只需要在使用的 WordPress 主题的 header.php 文件的 head 标签中加入如下代码即可
script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"/script
前面加上http
在主题中调用 .js 文件
新建立一个 .js 文件，在文件中加入如下代码：
jQuery(document).ready(function($){
// 这里就是需要添加的一些 jQuery 代码
});
网站标题：jquery模板,jquery模版
文章源于：http://shouzuofang.com/article/pheidp.html