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遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- mac下更新自带的PHP版本到5.6
OS X 10.11自带的PHP版本是PHP 5.5.x,如果我们想更新PHP的版本到5.6或者是7.0该怎么办呢? 下载和安装PHP 5.6 打开终端并且运行如下命令: curl -s http:/ ...
- php实现的短网址算法分享
这篇文章主要介绍了php实现的短网址算法,理论上支持1,073,741,824个短网址,个人使用足够了,需要的朋友可以参考下 每个网址用6个字符代替,(6^32) 最多可以拥有1,073,741,82 ...
- navcat无法远程连接mysql数据库解决办法
navcat无法远程连接mysql数据库,一般都是因为本地ip没有访问权限,服务器上执行下面指令即可解决 mysql -u root -p GRANT ALL PRIVILEGES ON *.* TO ...
- [记录]Zabbix3.4配置监控Oracle12c的存活状态和表空间使用率
Zabbix3.4配置监控Oracle的存活状态和表空间使用率 1.安装zabbix3.4 agent: # rpm -ivh http://repo.zabbix.com/zabbix/3.4/rh ...
- 【ASP.NET Core】解决“The required antiforgery cookie "xxx" is not present”的错误
当你在页面上用 form post 内容时,可能会遇到以下异常: The required antiforgery cookie "????????" is not present ...
- 关于eclipse安装springide的记录
近些天,又开始学习springmvc,使用eclipse进行开发,由于很多快捷键时候需要安装springide插件才能出来,我遇到配置DispatcherServlet,结果alt+/出不来Dispa ...
- UVA - 11636 Hello World! （贪心）
思路:复制次数最少并且可以部分复制,那么贪心地让当前尽量多的复制,如果最后一次复制会超过n,那就部分复制.即满足并且x尽量小. AC代码 #include <stdio.h> const ...
- poj 2230详解
题目链接 : poj2230 大致题意: 有一个人每晚要检查牛场,牛场内有m条路,他担心会有遗漏,就每条路检查两次,且每次的方向不同,要求你打印他行走的路径(必须从1开始),打印一条即可. 思路分析 ...
- soj3129: windy和水星 -- 水星数学家 2
注意int的范围:-2147483648-2147483647 如果输入会出现溢出,这题应该就是卡的这里.其使用long long就不用考虑这个. 加深:如果输入的数是很多位,直接当做字符串处理即可. ...
- 如何在模拟器里体验微软HoloLens
众所周知,微软的HoloLens以及MR设备售价都比较高,这让不少感兴趣的朋友们望而却步,本篇教程将向大家介绍如何在模拟器里体验传说中的HoloLens. 1.需要准备的硬件: 智能手机一台(WP.A ...