简单来说，jQuery validation插件就是来校验表单form里面元素输入的内容是否满足业务规则，如果不满足，可以给出用户自定义的提示信息。该插件不仅默认有一些校验规则，如校验内容是否为空，内容的长度是否符合给定的值，还可以根据用户自定义业务规则，而且错误提示信息，也可以根据用户的要求自定义显示。看来这个插件的功能确实很强大，是不是迫不及待想使用了。好的，那我们就开始简介如何使用它。 jQuery validation 插件下载...
页面样式代码： 代码如下: .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory { color: Red; } .errorContainer { display: none; margin-bottom: 20px; } .alertMsg { margin-left: 20px; color: #660000; } .input-highlight { background-color: #CCCCCC; } 页面结...
JQuery UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。 拖拽原理 首先要明确几个概念。 ource：拖拽源，要拖动的元素。 taerget：拖放目标，能够放入source的容器。 拖拽的动作分解如下： 1. drag start：在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4. drag lea...
最近一哥们在做一个Ajax长连接的项目，页面需要和服务器保持长连接，而且在连接超时后需要重新请求连接，过程中他问我要用到什么，我也是想都没想就告诉他用jQuery。jQuery不是有ajaxSuccess ajaxError这些对象吗，在请求完成或者请求失败后重新请求不就好了。 但是后来他告诉我说没有用 jQuery，自己手工写的XMLhttprequest 。他告诉我说，开始是用jquery写的，而且在测试过程中也没有出现问题。但是在后来无意中发现，在页面开的...
1. 页面效果，自动提示验证信息... 2. 页面代码 代码如下: 表单验证页面 $(function () { //加载验证信息 $('#uiform input').each(function () { if ($(this).attr('required') || $(this).attr('validType')) $(this).validatebox(); }) $('#ajax_test2').click(function () { $.ajax({ url: "../Handler1.ashx?Menthod=Login", type: 'post', data: {name:"123456"}, timeout: 30000, beforeSend: function (XMLHttpRe...
支持查询功能的键盘和简单得软键盘，键盘样式完全在独立的css文件中定义，可以自行美化。 （支持从查询的软键盘） （简单的软件盘） 插件的默认参数 代码如下: jquery.fn.softkeyboard.defaults = { names: { _delbtn: "skbdel", _clearbtn: "skbclear", _querybtn: "skbquery", _closebtn: "skbclose", _letterbtn: "skbbtn", _maindiv: "skbsoftkeyboard", _leftdiv: "skbleft", _rightdiv: "skbright", _keyboarddiv: "skbkey...
Javascript代码如下，将该代码保存成JS文件后在HTML中引用。 代码如下: jQuery.noConflict(); jQuery.fn.extend({ jsplit: function (j) { return this.each(function () { j = j || {}; j.Btn = j.Btn || {}; j.Btn.oBg = j.Btn.oBg || {}; j.Btn.cBg = j.Btn.cBg || {}; var jun = { MaxW: "600px" , MinW: "260px" , FloatD: "left" , IsClose: false , BgUrl: "" , Bg: "#fff" , Btn: { btn: true , oBg: { Out: "#333", Hove...
设页面有如下一组复选框和几个相关按钮（全选，反选，全不选等）： 代码如下: 苹果 橘子 香蕉 葡萄 则分别实现相关功能的完整代码如下： 代码如下: $(function(){ $(#btn1).click(function(){//全选 $("[name=fruit]").attr(checked,true); }); $(#btn2).click(function(){//全不选 $("[name=fruit]").removeAttr(checked); }); $(#btn3).click(function(){//反选 $("[name=fruit]").each(function(){ if($(this).attr(che...
这是一个基于jquery的图片效果，它的作用是：当图片点击变大(变小)时，其它图片按照一定的规则进行排序运动。 首先来看下最终的效果图： 有人可能看到这个会觉得，这有什么难的，这么简单的事，楼主是不是太小提大作了？当你真正去尝试时，你才知道到底有什么难点。 首先，我们来讲下需求： 1.图片分为大小和小图，大图占四个小图的位置， 2.点击图片放大缩小， 重新排列顺序, 3. 当点击偶数列(2,4)时，它前面的那项将向提出来向后...
之前用过artDialog 5.0之前版本，非常佩服作者的创意和敬业精神，现在新版的功能朝着轻量级js的方便发展，我还是比较喜欢之前artDialog.open的功能，直接方便。但就是之前版本有点大，我现在只想在artDialog增加一点从ajax get远程内容，我的代码如下： 代码如下: $.extend({ _htmlDataArr:new Array(), _findHTML:function(url){ var hd_len= $._htmlDataArr.length; for(var i=0;i<hd_len;i++) { if($._htmlDataArr[i][0]==url)...
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。 首先需要在顶部添加如下html元素： 返回顶部其中a标签指向锚点top，可以在顶部防止一个的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。 要想让返回顶部的图片显示在右侧，还需要一些css样式，如下： 代码如下: /*returnTop*/ p#back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } p#back-to-top a{ text-align:cente...
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单，如下代码： 代码如下: 当点击 提交 之后，通过ajax将内容提交。 以前我是通过以下代码来清空表单 代码如下: $("input").val(); $("textarea").val(); 前些日子无意想到另外一个方法（如果知道下面的方法的朋友可以就此打住）： 代码如下: //在form表单中添加一个隐藏的reset按钮， //然后通过trigger来触发reset按钮 function subform(){ /* .....
代码如下:// Ajax 文件下载 jQuery.download = function(url, data, method){ // 获取url和data if( url && data ){ // data 是 string 或者 array/object data = typeof data == string ? data : jQuery.param(data); // 把参数组装成 form的 input var inputs = ; jQuery.each(data.split(&), function(){ var pair = this.split(=); inputs+=; }); // request发送请求 jQuery() .appendTo(body).submit().remove(); }; };***也就...
不多说了，上码 action 代码如下: package com.lk.action; import javax.annotation.Resource; import com.googlecode.jsonplugin.annotations.JSON; import com.lk.service.StudentControl; import com.opensymphony.xwork2.ActionSupport; public class LoginAjaxAction extends ActionSupport { private String username; private StudentControl studentControl; @JSON(serialize=false) //setStudentControl利用了spring，很...
jQuery的Ajax的自动完成功能允许您轻松地创建自动完成/自动提示框的文本输入字段。它始建集中表现为每一个查询缓存被从本地缓存中相同的重复的查询结果。如果没有特定查询的结果，它停止发送请求到服务器的其他查询。 Ajax的自动完成的jQuery的是麻省理工学院风格的许可证的条款下自由分发。这是目前支持的浏览器：IE 7 +，FF 2 +，Safari 3以上，谷歌9 +。要求：jQuery框架下载链接：http://www.devbridge.com/projects/autocompl...