例子主要编写一个输入框,页面加载时会显示初始值,无边框,看起来像span,点击时,边框会出现,而且内容会被选中,失焦时会触发ajax事件,修改内容的值。
jQuery.fn.inputText = function(value, action, viladata)
{
var $input = this;
//设置输入框初始值
if(value != "")
{
$input.val(value);
}
//设置输入框为无边框
$input.attr("style","border:0px solid #fff");
//输入框被点击
$input.click(function(){
//显示边框
$input.attr("style","border:1px solid #aaa");
//选中内容
$input.select();
});
//输入框失焦
$input.blur(function(){
$input.attr("style","border:0px solid #fff");
//验证函数,验证是否通过
if(viladata)
{
var input = $input.val();
$.post(action,{value:input},function(data){
if(data=="success")
{
alert("修改成功");
window.location.reload();
}
else alert("修改失败");
},"TEXT");
}
});
}
在HTML中调用为:
<input type="text" id="input"/>
<script type="text/javascript">
$(document).ready(function(){
$("#input").inputText("初始值","a.jsp",validata);
});
//验证函数
function validata()
{
return true;
}
分享到:
相关推荐
根据提供的压缩包子文件的文件名 "readme.md" 和 "点击左右全屏展示的jQuery插件Demo",我们可以推测"readme.md" 文件很可能是包含插件使用说明、安装指南或者示例代码的Markdown格式文档。而 "点击左右全屏展示的...
本项目提供的"人脸识别jquery插件demo"是一个基于jQuery的简单示例,用于展示如何在Web应用中集成人脸识别功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个插件中...
jQuery插件是JavaScript库jQuery的一种扩展,用于增加特定功能或改善用户界面。"jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例,它实现了自动补全的功能,通常在输入框中输入文字时,会根据已输入内容...
这个"jQuery插件大全(内含Demo)"压缩包文件提供了丰富的jQuery插件资源,帮助开发者实现各种酷炫的网页效果,从而提升用户体验。 ### jQuery插件的重要性 1. **简化代码**:jQuery通过封装了一系列常用功能,...
本主题聚焦于“JQUERY插件之自定义滚动条DEMO”,这涉及到如何使用jQuery来实现一个自定义的滚动条,以替代浏览器默认样式,并确保在不同浏览器如IE、Firefox、Chrome和百度浏览器中的兼容性。 首先,我们了解滚动...
综上所述,"jQuery插件集之(分页插件)"为初学者提供了一个理想的起点,它可以帮助你快速掌握分页功能的实现,并进一步理解jQuery插件的开发和使用。通过实践提供的Demo和源码,你可以深入理解分页逻辑,为自己的项目...
"jquery地图插件demo"是一个示例项目,用于演示如何在Web页面上集成和使用jQuery地图插件。这个压缩包可能包含HTML、CSS和JavaScript文件,展示了一个简单的地图应用实例。开发者可以借此学习如何配置和自定义地图...
18. **插件开发(Plugin Development)**:jQuery插件机制允许开发者扩展其功能,封装复用代码。 19. **动画效果(Effects)**:`.fadeIn()`, `.slideToggle()`, `.animate()`等方法创建各种视觉效果,增强用户体验...
《jQuery Treeview 演示详解》 在Web开发领域,jQuery库因其强大的功能和易用性而备受青睐。其中,jQuery UI中的TreeView组件是一种用于展示层级数据的强大工具,它能够将数据结构以树状的形式呈现,使得用户可以更...
这个“jquery ui demo”正是一个展示jQuery UI功能的实例集合,通过它,我们可以深入理解和学习如何在实际项目中运用jQuery UI。 首先,jQuery UI 包含了多种组件,如对话框(Dialog)、日历(Datepicker)、拖放...
"jQuery插件集之(按钮特效)+Demo"提供了一个实践性的资源,包括插件、演示示例以及源代码,帮助开发者实现各种各样的按钮效果,如鼠标移入移除的交互和自定义按钮样式。 首先,我们来理解jQuery插件的基本结构。一...
本文将详细介绍一个jQuery插件——jQuery粒子系统插件,并探讨其在网页设计中的应用。 jQuery粒子系统插件是一种动态效果插件,它能够生成充满活力的粒子动画,这些粒子可以是点、图形或文字,它们在页面上随机移动...
**jQuery通用Dialog对话框与Popup提示信息窗口插件** 在前端开发中,用户交互界面的友好性和用户体验至关重要。jQuery提供了一种便捷的方式来实现这一目标,那就是通过Dialog对话框和Popup提示信息窗口。本文将深入...
标题"Jquery验证插件demo"指的是一个示例项目,展示了如何使用jQuery验证插件进行表单验证。这个项目可能包含了各种验证规则的实现,如非空验证、电子邮件格式验证、手机号码验证等,同时也可能展示了一些自定义验证...
### 六、jQuery插件 jQuery社区开发了众多插件,如Bootstrap的弹出框(`bootstrap-dialog`), 图片轮播(`owl.carousel`), 表格排序(`datatables`)等,极大地扩展了jQuery的功能。使用它们,只需引入相应的JS和CSS文件...
**jQuery Grid 框架详解** ...总的来说,jQuery Grid 是一款功能强大、易于使用的表格插件,能够帮助开发者高效地构建数据密集型的 Web 应用。熟练掌握其使用,可以极大地提升开发效率和用户体验。
jQuery EasyUI 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...
为jquery编写的扩展,仿easyui,清晰简洁,适合初学者,包含扩展jquery.accordion.js、jquery.combobox.js、jquery.datagrid.js、jquery.datebox.js、jquery.dialog.js、jquery.form.js、jquery.layout.js、jquery....
"cropper头像上传jquery插件"是指使用了名为"Cropper"的JavaScript库,结合jQuery技术,实现的一个专门用于用户头像上传的功能。Cropper是一款强大的图片裁剪工具,它提供了丰富的API和选项,使得在前端进行图片裁剪...
在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取...