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遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- 【深度学习】L1正则化和L2正则化
在机器学习中,我们非常关心模型的预测能力,即模型在新数据上的表现,而不希望过拟合现象的的发生,我们通常使用正则化(regularization)技术来防止过拟合情况.正则化是机器学习中通过显式的控制模 ...
- 安装Spring Tool Suite（STS）
JAVA开发工具中,常用工具就是Eclipse,IntelliJ IDEA. 现在使用spring boot&cloud框架进行开发的时候,虽然可以使用上面两个工具,但都未必就真的量身定制,I ...
- User Parameters(用户参数)
User Parameters(用户参数),这个是整个zabbix的重点 Zabbix有很多内置的itemkey,但是这些key都是由Zabbix定义好的比较通用的监控项的实现, 如果我们自己想实 ...
- 一个备份mysql 数据库的脚本
# 获取当前系统日期,格式为: 2009-2-21DATE=`date "+%F"` # 定义mysql 服务的主目录 DB_DIR=/usr # 定义备份后的路径BAK_DIR= ...
- oracle 11.2.0.2以后对数据库用户名重命名
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn [转自]http://www.xifenfei.com/2012/0 ...
- 【学习笔记】Hibernate关联映射（Y2-1-6）
Hibernate关联映射 关联映射就是将关联关系映射到数据库里,在对象模型中就是一个或多个引用. 1.单向多对一关联 准备数据库 部门表和员工表 其中部门表有两列 部门编号和名称 员工表有三列 员工 ...
- 基于Java SE集合的充值管理系统
1.功能分析 ①管理员管理 注册.登录.退出 ②注册一卡通:记录相应信息. ③充值管理:对一卡通账户进行充值,查询,修改. 2.技术要求 ①Java 基础知识 + 集合类(模拟数据库). ②数据用对象 ...
- Python基础——字符串
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ 在Python中,字符串也是一种数据类型.相比其它数据类型,字符串算是比较复杂的.为何呢?因为字符串不仅包含英文字母 ...
- PAT乙级 1034
思路:是个水题,但是有坑.不能被题目忽悠了,题目保证正确的输出中没有超过整型范围的整数. 它只是保证结果不超出int,但是我们在运算过程中的乘法可能会超出int,直接把所有int改成long long ...
- Ubuntu上搭建Hadoop环境（单机模式+伪分布模式）
首先要了解一下Hadoop的运行模式: 单机模式(standalone) 单机模式是Hadoop的默认模式.当首次解压Hadoop的源码包时,Hadoop无法了解硬件安装环境,便保守地选 ...