jquery模板,jquery模版

誰能提供一套系統(tǒng)登陸后的模板，漂亮一點(diǎn)的，利用JQuery的，左邊是菜單導(dǎo)航的，右邊是頁面的那種！

有幾個(gè)jquery的ui框架可供參考：easyui，ligerui，dwz， 最后還有個(gè)extjs，你google或百度一下就都可以找到了。

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比禪城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式禪城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋禪城地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

jquery在網(wǎng)頁設(shè)計(jì)中的作用

Web開發(fā)人員每天都使用JavaScript為他們創(chuàng)建的網(wǎng)站帶來必要的功能。jQuery提供了一個(gè)提供強(qiáng)大功能和靈活性的特殊工具。jQuery是一個(gè)JavaScript庫，有助于簡化和標(biāo)準(zhǔn)化JavaScript代碼和HTML元素之間的交互。JavaScript允許網(wǎng)站具有交互性和動(dòng)態(tài)性，jQuery是一種有助于簡化流程的工具。

同時(shí)JQuery也是一個(gè)緊湊，快速且功能豐富的JavaScript庫。它通過易于使用的API在大量瀏覽器中運(yùn)行，使得HTML文檔遍歷和操作，事件處理，動(dòng)畫和Ajax更加簡單。JQuery結(jié)合了多功能性和可擴(kuò)展性，改變了數(shù)百萬人編寫JavaScript的方式。換句話說，由于JQuery，JavaScript以簡化形式呈現(xiàn)。閱讀起來相當(dāng)舒服。

擴(kuò)展資料：

JQuery的優(yōu)點(diǎn)

1、易于使用：如果我們將它與標(biāo)準(zhǔn)JavaScript和其他庫進(jìn)行比較，它使用起來既簡單又快捷。它由簡單的語法組成，并且需要較少的代碼行。

2、巨大的庫：與其他庫相比，它允許您執(zhí)行大量功能。

3、插件的可用性：可以使用許多預(yù)先編寫的插件來立即壓縮開發(fā)過程。這背后的另一個(gè)優(yōu)點(diǎn)是腳本的效率和安全性。

4、綜合教程：?JQuery網(wǎng)站提供了不言自明的文檔和教程，以便在絕對(duì)的編程初學(xué)者面前進(jìn)行理解。

5、AJAX支持：它允許我們輕松地開發(fā)Ajax模板，Ajax支持更流暢的界面，可以在頁面上執(zhí)行操作，而不需要重新加載整個(gè)頁面。

6、靈活性：所有瀏覽器中的契約，是目前最流行的JavaScript庫。

JQuery框架的主要內(nèi)容

由于項(xiàng)目用的是SSH框架，又用到了Freemarker模板頁面，數(shù)據(jù)庫是Mysql5.0，主要內(nèi)容如下所示：

1. 注冊頁面，用Freemarker所寫，這里使用了JQuery的一個(gè)表單驗(yàn)證框架formvalidator：

對(duì)前臺(tái)注冊頁面register.ftl進(jìn)行表單驗(yàn)證，當(dāng)符合基本驗(yàn)證規(guī)則后，再通過JQuery formvalidator Ajax將數(shù)據(jù)傳到action中。

register.ftl：

html

head

meta http-equiv=Content-Type content=text/html; charset=utf-8 /

title會(huì)員注冊/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代碼是，實(shí)時(shí)驗(yàn)證用戶名或注冊郵箱是否存在 --

script type=text/javascript

$(document).ready(function(){

$.formValidator.initConfig({formid:form1,onerror:function(msg){},onsuccess:function(){return true;}});

$(#username)

.formValidator({onshow:請(qǐng)輸入用戶名,onfocus:請(qǐng)您記住填寫的用戶名，以后登錄時(shí)需要用到！,oncorrect:該用戶名可以注 冊})

.inputValidator({min:4,max:15,onerror:用戶名長度不能小于4個(gè)字符})

.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(服務(wù)器沒有返回?cái)?shù)據(jù)，可能服務(wù)器忙，請(qǐng)重試);},

onerror : 該用戶名已經(jīng)存在，請(qǐng)更換用戶名,

onwait : 正在對(duì)用戶名進(jìn)行合法性校驗(yàn)，請(qǐng)稍候…

});

$(#email)

.formValidator({onshow:請(qǐng)輸入郵箱,onfocus:郵箱6-100個(gè)字符,請(qǐng)正確輸入,oncorrect:恭喜你,郵箱可以注冊,forcevalid:true})

.inputValidator({min:6,max:100,onerror:你輸入的郵箱長度非法,請(qǐng)確認(rèn)})

.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(服務(wù)器沒有返回?cái)?shù)據(jù)，可能服務(wù)器忙，請(qǐng)重試);},

onerror : 該郵箱已經(jīng)存在，請(qǐng)更換郵箱,

onwait : 正在對(duì)郵箱進(jìn)行校驗(yàn)，請(qǐng)稍候…

});

});

/script

/head

body

div id=passmain

div class=passbottom

div class=pbleftb

h3 style=text-align:center;新用戶注冊/h3

p class=p2t帶*號(hào)的項(xiàng)目為必選項(xiàng), 請(qǐng)全部填寫/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用戶注冊后，需要激活，才可以使用！激活碼只會(huì)發(fā)到您注冊郵箱中。/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位字母、數(shù)字或字符組合，首字母必須為字母。/li

li class=p1t為了您的帳戶安全，強(qiáng)烈建議您的密碼使用字符+數(shù)字+特殊字符方式，并且密碼長度大于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重復(fù)輸入密碼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輸入校驗(yàn)碼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校驗(yàn)碼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．后臺(tái)Action類，UserAjaxAction.java:

基于Hibernate與數(shù)據(jù)庫進(jìn)行交互驗(yàn)證用戶名和郵箱是否存在，同時(shí)返回的數(shù)據(jù)格式為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數(shù)據(jù)中不含此屬性

@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;

}

}

注意需要導(dǎo)入jsonplugin-0.34.jar包。

3. 配置文件struts.xml：

配置action，并且注意package要繼承json-default包，且結(jié)果集類型為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

!—返回結(jié)果類型必須為json --

result name=ajax type=json/result

/action

/package

/struts

jQuery框架中增加對(duì)輸入框的驗(yàn)證，在設(shè)計(jì)頁面表單時(shí)，常常因?yàn)樾枰獙懘罅康尿?yàn)證信息，還要寫復(fù)雜的正則表達(dá)式，現(xiàn)在這樣一個(gè)驗(yàn)證框架可以解決這樣的繁雜問題。這樣jquery.validate.js就誕生了，jquery.validate.js是jquery旗下的一個(gè)驗(yàn)證框架，借助jquery的優(yōu)勢，我們可以迅速驗(yàn)證一些常見的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，并且對(duì)國際化也有很好的支持 。

validate自帶的默認(rèn)驗(yàn)證

required: 必選字段,

remote: 請(qǐng)修正該字段,

email: 請(qǐng)輸入正確格式的電子郵件,

url: 請(qǐng)輸入合法的網(wǎng)址,

date: 請(qǐng)輸入合法的日期,

dateISO: 請(qǐng)輸入合法的日期 (ISO).,

number: 請(qǐng)輸入合法的數(shù)字,

digits: 只能輸入整數(shù),

creditcard: 請(qǐng)輸入合法的信用卡號(hào),

equalTo: 請(qǐng)?jiān)俅屋斎胂嗤闹?

accept: 請(qǐng)輸入擁有合法后綴名的字符串,

maxlength: jQuery.format(請(qǐng)輸入一個(gè)長度最多是 {0} 的字符串),

minlength: jQuery.format(請(qǐng)輸入一個(gè)長度最少是 {0} 的字符串),

rangelength: jQuery.format(請(qǐng)輸入一個(gè)長度介于 {0} 和 {1} 之間的字符串),

range: jQuery.format(請(qǐng)輸入一個(gè)介于 {0} 和 {1} 之間的值),

max: jQuery.format(請(qǐng)輸入一個(gè)最大為 {0} 的值),

min: jQuery.format(請(qǐng)輸入一個(gè)最小為 {0} 的值)

怎么引用jquery mobile 框架

要使用 jQuery Mobile，首先需要在開發(fā)的界面中包含如下3個(gè)內(nèi)容

CSS文件jquery.mobile-1.0a1.min.css

jQuery library jquery-1.4.3.min.js

jQuery Mobile library jquery.mobile-1.0a1.min.js

在上面的頁面基本模板中，引入這三個(gè)元素采用的是jQuery CDN方式，開發(fā)人員也可以下載這些文件及主題到你的服務(wù)器上。

我們可以看到頁面中的內(nèi)容都是包裝在div標(biāo)簽中并在標(biāo)簽中加入data-role=”page”屬性。 這樣jQuery Mobile就會(huì)知道哪些內(nèi)容需要處理。

說明：data-屬性是HTML5新推出的很有趣的一個(gè)特性，它可以讓開發(fā)人員添加任意屬性到html標(biāo)簽中,只要添加的屬性名有“data-”前綴。

在”page”div中，還可以包含”header”， ”content”， ”footer”的div元素,這些元素都是可選的，但至少要包含一個(gè) “content”div。

jquery template 輸出html

是不是img標(biāo)記被轉(zhuǎn)義了

一般模板應(yīng)該有配置項(xiàng)，可以讓其對(duì)html標(biāo)記不進(jìn)行轉(zhuǎn)義吧

如何在 Wordpress 中使用 jQuery

簡單啊，就兩步

加載 jQuery 庫，只需要在使用的 WordPress 主題的 header.php 文件的 head 標(biāo)簽中加入如下代碼即可

script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"/script

前面加上http

在主題中調(diào)用 .js 文件

新建立一個(gè) .js 文件，在文件中加入如下代碼：

jQuery(document).ready(function($){

// 這里就是需要添加的一些 jQuery 代碼

});

網(wǎng)頁標(biāo)題：jquery模板,jquery模版
轉(zhuǎn)載來于：http://muchs.cn/article18/pheidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站、建站公司、云服務(wù)器、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)