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的各种插件调用(有些已经过时,以备注,其他的一些可以闲的时候用作拆解)的更多相关文章

  1. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  2. jQuery 人脸识别插件,支持图片和视频

    jQuery Face Detection 是一款人脸检测插件,能够检测到图片,视频和画布中的人脸坐标.它跟踪人脸并输出人脸模型的坐标位置为一个数组.我们相信,面部识别技术能够给我们的 Web 应用带 ...

  3. C#结合Jquery LigerUI Tree插件构造树

    Jquery LigerUI Tree是Jquery LigerUI()的插件之一,使用它可以快速的构建树形菜单.呵呵 废话不说了,直入正题,下面介绍C#结合ligerui 构造树形菜单的两种方法 1 ...

  4. 基于MVC4+EasyUI的Web开发框架经验总结(1)-利用jQuery Tags Input 插件显示选择记录

    最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重 ...

  5. 【精心挑选】15款最好的 jQuery 网格布局插件(Grid Plugins)

    如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...

  6. jQuery上定义插件并重设插件构造函数

    插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ========= ...

  7. jquery.autocomplete.js 插件的自定义搜索规则

    这二天开始用jquery.autocomplete这个自动完成插件.功能基本比较强大,但自己在实际需求中发现还是有一处不足!问题是这样:当我定义了一个本地数据JS文件时,格式为JSON式的数组.如下: ...

  8. jQuery图片延迟加载插件jQuery.lazyload

      插件描述:jQuery图片延迟加载插件jQuery.lazyload,使用延迟加载在可提高网页下载速度.在某些情况下,它也能帮助减轻服务器负载. 使用方法 引用jquery和jquery.lazy ...

  9. JQuery上传插件uploadify优化

    旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...

随机推荐

  1. 使用requireJS

    什么是require? require是AMD模块化规范的具体实现. 目前,通行的js模块化规范有两种,CommonJS和AMD. CommonJS和AMD有什么不同呢? CommonJS主要用于服务 ...

  2. mysql 5.7 支持json格式

    1.JSON格式的支持:mysql> create table user ( uid int auto_increment,      -> data json,primary key(u ...

  3. 【转】Nginx配置详解

    转自:http://www.cnblogs.com/knowledgesea/p/5175711.html Nginx常用功能 1. Http代理,反向代理:作为web服务器最常用的功能之一,尤其是反 ...

  4. “茴”字有四种写法,this也是一样

    说到这个地方又想起以前高中还是初中学的<孔乙己>这个梗,但是这里的this显然实用性比那个要大很多,哈哈. 简单来说,this有四种应用场景,分别是在构造函数上.对象属性中.普通函数中.c ...

  5. 浅显总结ASCII Unicode UTF-8的区别

    如果觉得此地排版不好,欢迎访问我的博客 浅显总结ASCII Unicode UTF-8的区别 制作表单时,为了追求更好的用户交互体验,常常会有提示性的内容,比如提醒用户字符的限制.由于英文,中文字符的 ...

  6. 查看Zookeeper服务器状态信息的一些命令

    1.Zookeeper服务器当前节点配置信息: echo conf|nc localhost 2181 2.cons:echo cons|nc localhost 2181 输出当前服务器所有客户端连 ...

  7. Redis入门_上

    Redis是基于内存的Key-Value数据库,包含Set.String.SortedSet.List.Hash等数据结构,可用于缓存.排名.爬虫去重等应用场景. 1.思维导图 2.安装与配置 2.1 ...

  8. Yii2数据库操作再总结

    User::find()->all(); 此方法返回所有数据:User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->wh ...

  9. OO(Object Oriented)

    封装.继承.多态. 封装:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别.封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的代码进行有 ...

  10. C#调用WebService时插入cookie

    SOAPUI插入Cookie的方法 SOAP插入cookie的方法如下,点击Head,点击加号,然后直接设置就可以了. C#中调用webService时插入Cookie 由于调用的时候必须要带上coo ...