jquery的各种插件调用（有些已经过时，以备注，其他的一些可以闲的时候用作拆解）

时间：2021-11-22 12:12:22
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为开发插件提拱了两个方法&colon;jQuery&period;fn&period;extend&lpar;&rpar;&semi; jQuery&period;extend&lpar;&rpar;&semi;

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

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

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

  3. C&num;结合Jquery LigerUI Tree插件构造树

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

  4. 基于MVC4&plus;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&period;autocomplete&period;js 插件的自定义搜索规则

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

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

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

  9. JQuery上传插件uploadify优化

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

随机推荐

  1. Constructing Roads——F

    F. Constructing Roads There are N villages, which are numbered from 1 to N, and you should build som ...

  2. 描述Linux shell中单引号，双引号及不加引号的简单区别（计时2分钟）

    简要总结: 单引号: 可以说是所见即所得:即将单引号内的内容原样输出,或者描述为单引号里面看到的是什么就会输出什么. 双引号: 把双引号内的内容输出出来:如果内容中有命令.变量等,会先把变量.命令解析 ...

  3. On Caching and Evangelizing SQL

    http://www.oracle.com/technetwork/issue-archive/2011/11-sep/o51asktom-453438.html   Our technologist ...

  4. 对象的引用和clone

    $a=new s(); $b=$a; 这是引用,两者为同一个实例 $a=new s(); $b=$a; $b=clone $a; 这是clone,两者不是同一个实例,但拥有相同的属性 如果需要不相同的 ...

  5. sql server 汉字的长度

    前几天改了人家程序中的一个小bug,就是输入时长度的校验问题.项目是.Net的,数据库是 sql server的.检查了一下,发现以前的人员把长度给控制小了,数据库中允许输入256的长度,而别人在as ...

  6. Unity开发Oculus游戏

    1.下载Oculus对应自己操作系统的SKD&RunTime 下载地址 我这里是window系统,下载的是0.6.0.0版本的 2.安装RunTime,电脑右下角状态栏会出现一个小眼睛表示安装 ...

  7. 【python学习笔记】10&period;充电时刻

    [python学习笔记]10.充电时刻 任何python都可以作为模块倒入 *.pyc:平台无关的经过编译的的python文件, 模块在第一次导入到程序中时被执行,包括定义类,函数,变量,执行语句 可 ...

  8. java String的各种方法及操作

    No. 方法名称 功能 字符与字符串 01 public String(char[] value) 将字符数组中所有内容变为字符串 02 public String(char[] value,int ...

  9. 福州大学oj 1752 A&Hat;B mod C &equals;&equals;&equals;&gt&semi;数论的基本功。位运用。五星&ast;&ast;&ast;&ast;&ast;

    Problem 1752 A^B mod C Accept: 579    Submit: 2598Time Limit: 1000 mSec    Memory Limit : 32768 KB P ...

  10. eclipse中对Hadoop项目进行mvn clean install时报错的处理

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...

相关文章