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遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- Docker-v17 的层级（layer）概念
html,body { font-size: 12pt } body { font-family: Helvetica, "Hiragino Sans GB", "微软雅 ...
- 升级gitlab
https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update https://about.gitlab.com/update/#cent ...
- GitLab的安装及使用教程
1.配置yum源 vim /etc/yum.repos.d/gitlab-ce.repo 复制以下内容: [gitlab-ce] name=gitlab-ce baseurl=http://mirro ...
- PHPUnit 手册
PHPUnit 手册 Sebastian Bergmann 版权 © 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015 ...
- MySQL中的内置系统函数
一.字符串函数 1. CONCAT(S1,S2....SN): 把传入的参数连接成一个字符串 2. INSERT(str, x, y, insert): 将字符串 X位置开始,y个字符串长度替换为 ...
- zabbix客户端一键安装脚本
#!/bin/bash #通过命令行参数指定if [ ! -z "$1" ];then ip=$1 echo "手动指定IP:$ip"else#根据默认路由获取 ...
- LVS结合keepalived配置测试
LVS/DR + keepalived配置 注意:前面虽然我们已经配置过一些操作,但是下面我们使用keepaliave操作和之前的操作是有些冲突的,所以若是之前配置过DR,请首先做如下操作: 三 ...
- 洛谷P4014 分配问题【最小/大费用流】题解+AC代码
洛谷P4014 分配问题[最小/大费用流]题解+AC代码 题目描述 有 n 件工作要分配给 n 个人做.第 i 个人做第 j 件工作产生的效益为c ij. 试设计一个将 n 件工作分配给 n 个人做的 ...
- 开源项目-网上公开http代理爬取、简单分类
爬取网上公开免费代理(http/socks),解析入库,可满足需要切换IP的场景(爬虫.投票等)需求. 项目地址: https://github.com/Jwnie/proxyservice 1.采用 ...
- Winform下去除MDI窗体边框
做项目中间遇到了MDI窗体内边框的问题,经过苦苦寻找,最终得到了解决方案 在Main窗体中调用API // Win32 Constants ; ; private const int WS_BORDE ...