jquery的各种插件调用（有些已经过时，以备注，其他的一些可以闲的时候用作拆解）
jquery的valiteDate验证插件应用
<!DOCTYPE html>
<html>
< head>
< meta charset= "UTF-8">
< title></title >
< script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" ></script>
< script src= "js/jquery.validate.js" type="text/javascript" charset="utf-8" ></script>
< script src= "js/jquery.validate.messages_cn.js" type="text/javascript" charset="utf-8" ></script>
</ head>
< body>
< form action= "#" method= "post" id= "form1">
< div id= "va">
< div>
< label for= "">姓名</label >
< input type= "text" name= "username" id="username" value="" placeholder="请输入姓名" />
< span></span >
</ div>
< br />
< div>
< label for= "">邮箱</label >
< input type= "email" name= "email" id="email" value="" placeholder="请输入邮箱地址" />
< span></span >
</ div>
< div>
< label for= "">手机号</label>
< input type= "text" name= "tel" id="tel" value="" placeholder="请输入手机号" />
< span></span >
</ div>
< br />
< input type= "submit" value= "提交" />
</ div>
</ form>
</ body>
< script type= "text/javascript">
$(function(){
$( "#form1").validate({
rules :{
},
email :{required: true,email: true},
tel :{required: true,call: true}
},
errorPlacement :function( error,element ){
error.appendTo(element .siblings("span"));
}
});
})
</script>
</html>
jquery的表单提交插件form插件，用于简化表单提交操作
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>form表单插件</title> | |
| <script type="text/javascript" | |
| src="Js-7-2/jquery.form.js"> | |
| </script> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:260px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;font-weight:bold} | |
| .divFrame .divContent{padding:8px;line-height:1.6em} | |
| .divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px} | |
| .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:80px; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| //定义一个表单提交时的对象 | |
| var options = { | |
| url:"Login.aspx", //默认为form中的action,设置后便覆盖默认值 | |
| target: "#divData" //将服务器返回的数据显示在Id号为divData元素中 | |
| } | |
| $("#frmUserInfo").ajaxForm(options);//以Ajax的方式提交表单 | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <form id="frmUserInfo" method="get" action="#"> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| 用户登录 | |
| </div> | |
| <div class="divContent"> | |
| <div> | |
| 用户名：<br /> | |
| <input id="username" name="username" | |
| type="text" class="txt" /> | |
| </div> | |
| <div> | |
| 密码：<br /> | |
| <input id="userpass" name="userpass" | |
| type="password" class="txt" /> | |
| </div> | |
| </div> | |
| <div class="divBtn"> | |
| <input id="sbtUser" type="submit" | |
| value="提交" class="btn" /> | |
| </div> | |
| <div id="divData"></div> | |
| </div> | |
| </form> | |
| </body> | |
| </html> | |
下面是login。aspx页面内容
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
string strName = Request["username"]; //姓名字符
string strPass = Request["userpass"]; //密码字符
string strRetValue = "用户名：" + strName + "<br>密码：" + strPass;
Response.Write(strRetValue);
%>
jquery的cookie插件
<!DOCTYPE html>
<html>
< head>
< meta charset= "UTF-8">
< title></title >
< script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" ></script>
< script src= "js/jquery.cookie.js" type="text/javascript" charset="utf-8" ></script>
</ head>
< body>
< form action= "#" method= "post" id= "form1">
< div id= "va">
< div>
< label for= "">姓名</label >
< input type= "text" name= "username" id="username" value="" placeholder="请输入姓名" />
< span></span >
</ div>
< br />
< div>
< label for= "">邮箱</label >
< input type= "email" name= "email" id="email" value="" placeholder="请输入邮箱地址" />
< span></span >
</ div>
< div>
< input id= "chkSave" type= "checkbox" /> 是否保存用户名
</ div>
< br />
< input type= "submit" id= "sub" value= "提交" />
</ div>
</ form>
</ body>
<script type ="text/javascript">
$(function(){
if($.cookie("username" )){
$( "#username").val($.cookie("username" ));
}
$( "#sub").submit (function(){
if($("#chkSave" ).attr( "checked")){
$.cookie( "username",$("#username" ).val(),{
})
}
else{
$.cookie( "username",null ,{
path :"/"
})
}
return false;
})
})
</script>
</html>
cookie好像不怎么好
jquery搜索插件AutoComplete
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>autocomplete插件</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Js-7-4/jquery.autocomplete.js"> | |
| </script> | |
| <link rel="stylesheet" type="text/css" | |
| href="Css-7-4/jquery.autocomplete.css" /> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:260px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;font-weight:bold} | |
| .divFrame .divContent{padding:8px;line-height:1.6em} | |
| .divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px} | |
| .txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} | |
| .btn {border:#666 1px solid;padding:2px;width:80px;margin-bottom:3px; | |
| filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var arrUserName = ["张三", "王小五", "张才子", | |
| "李四", "张大三", "李大四", "王五", "刘明", | |
| "李小四", "刘促明", "李渊", "张小三", "王小明"]; | |
| $("#txtSearch").autocomplete(arrUserName, { | |
| minChars: 0, //双击空白文本框时显示全部提示数据 | |
| formatItem: function(data, i, total) { | |
| return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式 | |
| }, | |
| formatMatch: function(data, i, total) { | |
| return data[0]; | |
| }, | |
| formatResult: function(data) { | |
| return data[0]; | |
| } | |
| }).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法 | |
| //自定义返回匹配结果函数 | |
| function SearchCallback(event, data, formatted) { | |
| $("#divData").html("您的选择是：" + (!data ? "空" : formatted)); | |
| } | |
| //点击"查一下"按钮后，触发插件的search()方法 | |
| $("#btnSearch").click(function() { | |
| $("#txtSearch").search(); | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| 搜索用户 | |
| </div> | |
| <div class="divContent"> | |
| <span style="padding:0 5px 0 10px"><a href="#">新闻</a></span> | |
| <span style="padding:0 5px 0 5px"><b>用户</b></span> | |
| <div> | |
| <input type="text" id="txtSearch" class="txt" /> | |
| <input type="button" id="btnSearch" value="查一下" class="btn" /> | |
| </div> | |
| </div> | |
| <div id="divData"></div> | |
| </div> | |
| </body> | |
| </html> | |
jquery灯笼图片箱插件notesforlightbox。暂不推荐。。官网都没了，原版本支持1.4.2但不支持1.11.min
右键菜单插件contextmenu
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml"> | |
| <head> | |
| <title>ContextMenu插件</title> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2-vsdoc.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Jscript/jquery-1.4.2.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="Js-7-6/jquery.contextmenu.js"> | |
| </script> | |
| <link rel="stylesheet" type="text/css" | |
| href="Css-7-6/jquery.contextmenu.css" /> | |
| <style type="text/css"> | |
| body{font-size:13px} | |
| .divFrame{width:260px;border:solid 1px #666} | |
| .divFrame .divTitle{padding:5px;font-weight:bold} | |
| .divFrame .divContent{padding:15px;line-height:1.6em} | |
| .divFrame .divContent textarea{border:#666 1px solid;padding:2px;width:150px;margin-right:3px} | |
| </style> | |
| <script type="text/javascript"> | |
| $(function() { | |
| $('#txtContent').contextMenu('sysMenu', | |
| { bindings: | |
| { | |
| 'Li1': function(Item) { | |
| alert("在ID号为：" + Item.id + "编辑框中，您点击了“新建”项"); | |
| }, | |
| 'Li2': function(Item) { | |
| alert("在ID号为：" + Item.id + "编辑框中，您点击了“打开”项"); | |
| } | |
| //设置其它选项事件 | |
| //... | |
| }, | |
| menuStyle: { | |
| border: '2px solid #999' | |
| }, | |
| itemStyle: { | |
| fontFamily: 'verdana', | |
| backgroundColor: '#666', | |
| color: 'white', | |
| border: 'none', | |
| padding: '1px' | |
| }, | |
| itemHoverStyle: { | |
| color: '#666', | |
| backgroundColor: '#f7f7f7', | |
| border: 'none' | |
| } | |
| }); | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div class="divFrame"> | |
| <div class="divTitle"> | |
| 点击右键 | |
| </div> | |
| <div class="divContent"> | |
| <textarea id="txtContent" cols="30" rows="5"></textarea> | |
| </div> | |
| </div> | |
| <div class="contextMenu" id="sysMenu"> | |
| <ul> | |
| <li id="Li1"><img src="Images-7-6/new.png" /> 新建</li> | |
| <li id="Li2"><img src="Images-7-6/folder.png" /> 打开</li> | |
| <li id="Li3"><img src="Images-7-6/disk.png" /> 保存</li> | |
| <hr /> | |
| <li id="Li4"><img src="Images-7-6/cross.png" /> 退出</li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> | |
他的js
(function($){var menu,shadow,trigger,content,hash,currentTarget;var defaults={menuStyle:{listStyle:'none',padding:'1px',margin:'0px',backgroundColor:'#fff',border:'1px solid #999',width:'100px'},itemStyle:{margin:'0px',color:'#000',display:'block',cursor:'default',padding:'3px',border:'1px solid #fff',backgroundColor:'transparent'},itemHoverStyle:{border:'1px solid #0a246a',backgroundColor:'#b6bdd2'},eventPosX:'pageX',eventPosY:'pageY',shadow:true,onContextMenu:null,onShowMenu:null};$.fn.contextMenu=function(id,options){if(!menu){menu=$('<div id="jqContextMenu"></div>').hide().css({position:'absolute',zIndex:'500'}).appendTo('body').bind('click',function(e){e.stopPropagation()})}if(!shadow){shadow=$('<div></div>').css({backgroundColor:'#000',position:'absolute',opacity:0.2,zIndex:499}).appendTo('body').hide()}hash=hash||[];hash.push({id:id,menuStyle:$.extend({},defaults.menuStyle,options.menuStyle||{}),itemStyle:$.extend({},defaults.itemStyle,options.itemStyle||{}),itemHoverStyle:$.extend({},defaults.itemHoverStyle,options.itemHoverStyle||{}),bindings:options.bindings||{},shadow:options.shadow||options.shadow===false?options.shadow:defaults.shadow,onContextMenu:options.onContextMenu||defaults.onContextMenu,onShowMenu:options.onShowMenu||defaults.onShowMenu,eventPosX:options.eventPosX||defaults.eventPosX,eventPosY:options.eventPosY||defaults.eventPosY});var index=hash.length-1;$(this).bind('contextmenu',function(e){var bShowContext=(!!hash[index].onContextMenu)?hash[index].onContextMenu(e):true;if(bShowContext)display(index,this,e,options);return false});return this};function display(index,trigger,e,options){var cur=hash[index];content=$('#'+cur.id).find('ul:first').clone(true);content.css(cur.menuStyle).find('li').css(cur.itemStyle).hover(function(){$(this).css(cur.itemHoverStyle)},function(){$(this).css(cur.itemStyle)}).find('img').css({verticalAlign:'middle',paddingRight:'2px'});menu.html(content);if(!!cur.onShowMenu)menu=cur.onShowMenu(e,menu);$.each(cur.bindings,function(id,func){$('#'+id,menu).bind('click',function(e){hide();func(trigger,currentTarget)})});menu.css({'left':e[cur.eventPosX],'top':e[cur.eventPosY]}).show();if(cur.shadow)shadow.css({width:menu.width(),height:menu.height(),left:e.pageX+2,top:e.pageY+2}).show();$(document).one('click',hide)}function hide(){menu.hide();shadow.hide()}$.contextMenu={defaults:function(userDefaults){$.each(userDefaults,function(i,val){if(typeof val=='object'&&defaults[i]){$.extend(defaults[i],val)}else defaults[i]=val})}}})(jQuery);$(function(){$('div.contextMenu').hide()});
他的css
.contextMenu {display:none}
ul li {font-size:9pt}
图片放大插件jqzoom
jquey.1.11不支持～
jquery的各种插件调用（有些已经过时，以备注，其他的一些可以闲的时候用作拆解）的更多相关文章
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jQuery 人脸识别插件，支持图片和视频
jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...
- C#结合Jquery LigerUI Tree插件构造树
Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...
- 基于MVC4+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录
最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...
- 【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
- jQuery上定义插件并重设插件构造函数
插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ========= ...
- jquery.autocomplete.js 插件的自定义搜索规则
这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...
- jQuery图片延迟加载插件jQuery.lazyload
插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- 使用Dockerfile构建镜像
Dockerfile是一个文本格式的配置文件,用户可以使用Dockerfile快速创建自定义的镜像.它类似shell脚本,由一行行命令组成,支持以#开头的注释行.一般而言,Dockerfile分为四部 ...
- GitLab简单使用
[权限] ①已经搭建了Gitlab服务器,并已开通 http://git.******.com 权限(每个公司的git地址不一致),登陆到git中去: ②已经开通了项目权限(有专人负责开通): 当开 ...
- NSData 与 NSString 的转化
1 NSString * str = @"hello, world!"; 2 NSData * data = [str dataUsingEncoding:NSUTF8String ...
- css里面如何设置body背景图片满屏
@{ Layout = null; ViewBag.Title = "Login Page";} <!DOCTYPE html> <html>& ...
- Android app性能测试小结（7个性能指标）
1.性能测试的几个指标: 2.性能测试环境准备: 3.启动时间 3.1,监控值的获取方法 启动分为冷启动和热启动,冷启动:应用程序首次启动,进程首次创建并加载资源的过程:热启动:应用程序启 ...
- C语言_指针和数组的几种访问形式
敲几行代码来看看几种访问的形式~ #include <stdio.h>;int main() { ] = {, , , , , }; //初始化5个元素的一维数组 int *p = arr ...
- 一、Python介绍
Python 是一门什么样的语言? python是一门动态解释性的强类型定义语言. 编程语言主要从以下几个角度为进行分类,编译型和解释型.静态语言和动态语言.强类型定义语言和弱类型定义语言,每个分类代 ...
- HDU - 2612 bfs [kuangbin带你飞]专题一
分别以两个人的家作为起点,bfs求得到每个KFC最短距离.然后枚举每个KFC,求得时间之和的最小值即可. 此题不符合实际情况之处: 通过了一个KFC再去另一个KFC可以吗? 出题人都没好好想过吗? ...
- CEPH s3 java sdk PUT对象并在同一个PUT请求中同时设置ACL为 Public
java: http://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/acl-using-java-sdk.html tring bucketName ...
- Jpa中设置OneToMany插入报异常解决办法
在Jpa中如果设置@OneToMany,但使用的时候,如果没有赋值,会报异常出现,这时只需要实例化一个空数组即可, 但类型一定要对应: 实例如下: newField.setxxxxxList(new ...