jquery的各种插件调用(有些已经过时,以备注,其他的一些可以闲的时候用作拆解)
<!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> | |
<!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> | |
<!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> | |
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遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
随机推荐
- 使用requireJS
什么是require? require是AMD模块化规范的具体实现. 目前,通行的js模块化规范有两种,CommonJS和AMD. CommonJS和AMD有什么不同呢? CommonJS主要用于服务 ...
- mysql 5.7 支持json格式
1.JSON格式的支持:mysql> create table user ( uid int auto_increment, -> data json,primary key(u ...
- 【转】Nginx配置详解
转自:http://www.cnblogs.com/knowledgesea/p/5175711.html Nginx常用功能 1. Http代理,反向代理:作为web服务器最常用的功能之一,尤其是反 ...
- “茴”字有四种写法,this也是一样
说到这个地方又想起以前高中还是初中学的<孔乙己>这个梗,但是这里的this显然实用性比那个要大很多,哈哈. 简单来说,this有四种应用场景,分别是在构造函数上.对象属性中.普通函数中.c ...
- 浅显总结ASCII Unicode UTF-8的区别
如果觉得此地排版不好,欢迎访问我的博客 浅显总结ASCII Unicode UTF-8的区别 制作表单时,为了追求更好的用户交互体验,常常会有提示性的内容,比如提醒用户字符的限制.由于英文,中文字符的 ...
- 查看Zookeeper服务器状态信息的一些命令
1.Zookeeper服务器当前节点配置信息: echo conf|nc localhost 2181 2.cons:echo cons|nc localhost 2181 输出当前服务器所有客户端连 ...
- Redis入门_上
Redis是基于内存的Key-Value数据库,包含Set.String.SortedSet.List.Hash等数据结构,可用于缓存.排名.爬虫去重等应用场景. 1.思维导图 2.安装与配置 2.1 ...
- Yii2数据库操作再总结
User::find()->all(); 此方法返回所有数据:User::findOne($id); 此方法返回 主键 id=1 的一条数据(举个例子): User::find()->wh ...
- OO(Object Oriented)
封装.继承.多态. 封装:隐藏对象的属性和实现细节,仅对外公开接口,控制在程序中属性的读取和修改的访问级别.封装就是将抽象得到的数据和行为相结合,形成一个有机的整体,也就是将数据与操作数据的代码进行有 ...
- C#调用WebService时插入cookie
SOAPUI插入Cookie的方法 SOAP插入cookie的方法如下,点击Head,点击加号,然后直接设置就可以了. C#中调用webService时插入Cookie 由于调用的时候必须要带上coo ...