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遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- eclipse CDT unresolved inclusion
原因:c\c++库未设置所导致的 解决办法:1.先配置环境变量:打开window->preference->c\c++bulid->environment->add-> ...
- PhpStorm的破解 汉化
以前一直习惯使用sublime,最近发现phpstorm比submit稍微更强大些,其很多插件都是直接可以使用,不需要另外去拓展了 其中的破解.汉化步骤就需要借助一些资源 (1)破解 安装完毕后,直接 ...
- Jenkins 不同角色不同视图及不同权限设置
由于jenkins默认的权限管理体系不支持用户组或角色的配置,因此需要安装第三发插件来支持角色的配置,本文将使用Role Strategy Plugin,介绍页面:https://wiki.jenki ...
- Hive入门教程
Hive 安装 相比起很多教程先介绍概念,我喜欢先动手装上,然后用例子来介绍概念.我们先来安装一下Hive 先确认是否已经安装了对应的yum源,如果没有照这个教程里面写的安装cdh的yum源http: ...
- css scale 元素放大缩小效果
<style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...
- python入门学习笔记（三）
10.函数 求绝对值的函数 abs(x) 也可以在交互式命令行通过 help(abs) 查看abs函数的帮助信息.调用 abs 函数:>>> abs(100)100>>& ...
- js闭包面试题目
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Centos环境下给PHP7.0安装yaf扩展
首先要知道PHP的安装目录在哪里,以我当前的路径为例,在/usr/local/php目录下. 下一步需要下载扩展包,进入http://pecl.php.net/package/yaf寻找符合版本要求的 ...
- css渲染（二） 文本
一.文本样式 首行缩进 text-indent 首行缩进是将段落的第一行缩进,这是常用的文本格式化效果.一般地,中文写作时开头空两格.[注意]该属性可以为负值:应用于: 块级元素(包括block和i ...
- Java集合框架（五）—— Map、HashMap、Hashtable、Properties、SortedMap、TreeMap、WeakHashMap、IdentityHashMap、EnumMap
Map Map用于保存具有映射关系的数据,因此Map集合里保存着两组值,一组值用于保存Map里的key,另一组值用于保存Map里的value,key和value都可以是任何引用类型的数据.Map的ke ...