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 :{

username :{required: true,minlength: 6},

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(),{

path :"/",expires :7

})

}

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不支持～

时间： 2024-10-12 23:13:36

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

jQuery上传插件Uploadify使用详解(转发原作者冯威)

jQuery上传插件Uploadify使用详解 本文Uploadify版本为2.1.0,已经过时,截止(2016-09-25)最新版本3.2.1的详细介绍请移步<jQuery上传插件Uploadify使用详解(3.2.1)> Uploadify是jQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示或下载. 官方下载 官方文档 官方演示 首先按下面的步骤来实现一个简单的

基于MVC+EasyUI的Web开发框架经验总结（1）-利用jQuery Tags Input 插件显示选择记录

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

JQuery时间格式化插件--扩展JQuery

(function($){ $.formatDate = function(pattern,date){ //如果不设置,默认为当前时间 if(!date) date = new Date(); if(typeof(date) ==="string"){ if(date=="") date = new Date(); else date = new Date(date.replace(/-/g,"/")); } /*补00*/ var toFix

jQuery图片切换插件jquery.cycle.js

Cycle是一个很棒的jQuery图片切换插件,提供了很好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <head> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src

jquery easyui+sparkline插件+jqplot插件实现数据表行内插入线形图

Jquery easyui : 实现前端数据包格式化输出,支持多种模块式定义,只需要添加相应的预设参数即可实现丰富的前端. 资料参考: http://www.jeasyui.com/ Jquery sparkline: 基于jQuery 的js插件,底层调用html5的canvas标签,并通过js动态实现在数据表行内画条形图或趋势图,操作简单,可实现不同类型的图形化,如线形图,饼状图,柱形图. 资料参考:http://omnipotent.net/jquery.sparkline/#s-docs

学会读JQuery等JS插件源码

很多人觉得jquery.ext等一些开源js源代码 十分的晦涩,读不懂,遇到问题需要调试也很费劲.其实我个人感觉主要是有几个方面的原因: 1.对一些js不常用的语法.操作符不熟悉 2.某个function中又嵌套了一些内部的function,使得整个代码的层次结构不像java代码那么清晰. 3.js中允许变量先使用后定义,会造成我们看代码时候忽然冒出来一个变量.function,却找不到是在哪里定义的. 那么今天给大家分享一下我的经验,扫清你的障碍. 一.一些晦涩的操作符: 1.(functio

jquery.validata.js 插件

一.Validate插件描述 Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 二.配置方法 需要先导入Jquery库,然后导入Validate插件.而且两个插件有一定的先后顺序.(jquery库-Validate插件) <script type="text/javascript" src="js/jqu

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

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍利用jQuery Tags Input 插件显示选择记录. 我在利用jQuery Tags Input 插件之前,一直想找一个合适的J

利用jquery的imgAreaSelect插件实现图片裁剪示例

利用jquery的imgAreaSelect插件实现图片裁剪示例 将用户上传的图片进行裁剪再保存是现在web2.0应用中常常处理的工作,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现这个在以前来说非常棘手的功能.我们来看看它的实现步骤: 1.包含进CSS文件(imgareaselect-default.css)和 jquery.imgareaselect.js文件 2.html代码(要裁剪的图片元素) <img id="selectbanner&q