`
qinya06
  • 浏览: 597554 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jquery 插件 demo

 
阅读更多
例子主要编写一个输入框,页面加载时会显示初始值,无边框,看起来像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;

}
分享到:
评论

相关推荐

    点击左右全屏展示的jQuery插件Demo

    根据提供的压缩包子文件的文件名 "readme.md" 和 "点击左右全屏展示的jQuery插件Demo",我们可以推测"readme.md" 文件很可能是包含插件使用说明、安装指南或者示例代码的Markdown格式文档。而 "点击左右全屏展示的...

    人脸识别jquery插件demo

    本项目提供的"人脸识别jquery插件demo"是一个基于jQuery的简单示例,用于展示如何在Web应用中集成人脸识别功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互等任务。在这个插件中...

    jQuery 插件demo 自动补全

    jQuery插件是JavaScript库jQuery的一种扩展,用于增加特定功能或改善用户界面。"jQuery 插件demo 自动补全"是指一个使用jQuery编写的插件示例,它实现了自动补全的功能,通常在输入框中输入文字时,会根据已输入内容...

    jquery插件大全(内含Demo)

    这个"jQuery插件大全(内含Demo)"压缩包文件提供了丰富的jQuery插件资源,帮助开发者实现各种酷炫的网页效果,从而提升用户体验。 ### jQuery插件的重要性 1. **简化代码**:jQuery通过封装了一系列常用功能,...

    JQUERY插件之自定义滚动条DEMO

    本主题聚焦于“JQUERY插件之自定义滚动条DEMO”,这涉及到如何使用jQuery来实现一个自定义的滚动条,以替代浏览器默认样式,并确保在不同浏览器如IE、Firefox、Chrome和百度浏览器中的兼容性。 首先,我们了解滚动...

    jQuery插件集之(分页插件)初学者必备+Demo

    综上所述,"jQuery插件集之(分页插件)"为初学者提供了一个理想的起点,它可以帮助你快速掌握分页功能的实现,并进一步理解jQuery插件的开发和使用。通过实践提供的Demo和源码,你可以深入理解分页逻辑,为自己的项目...

    jquery地图插件demo

    "jquery地图插件demo"是一个示例项目,用于演示如何在Web页面上集成和使用jQuery地图插件。这个压缩包可能包含HTML、CSS和JavaScript文件,展示了一个简单的地图应用实例。开发者可以借此学习如何配置和自定义地图...

    30个jquery经典Demo

    18. **插件开发(Plugin Development)**:jQuery插件机制允许开发者扩展其功能,封装复用代码。 19. **动画效果(Effects)**:`.fadeIn()`, `.slideToggle()`, `.animate()`等方法创建各种视觉效果,增强用户体验...

    jquery treeview demo

    《jQuery Treeview 演示详解》 在Web开发领域,jQuery库因其强大的功能和易用性而备受青睐。其中,jQuery UI中的TreeView组件是一种用于展示层级数据的强大工具,它能够将数据结构以树状的形式呈现,使得用户可以更...

    jquery ui demo

    这个“jquery ui demo”正是一个展示jQuery UI功能的实例集合,通过它,我们可以深入理解和学习如何在实际项目中运用jQuery UI。 首先,jQuery UI 包含了多种组件,如对话框(Dialog)、日历(Datepicker)、拖放...

    jQuery插件集之(按钮特效)+Demo

    "jQuery插件集之(按钮特效)+Demo"提供了一个实践性的资源,包括插件、演示示例以及源代码,帮助开发者实现各种各样的按钮效果,如鼠标移入移除的交互和自定义按钮样式。 首先,我们来理解jQuery插件的基本结构。一...

    jquery插件库-jquery粒子系统插件demo.zip

    本文将详细介绍一个jQuery插件——jQuery粒子系统插件,并探讨其在网页设计中的应用。 jQuery粒子系统插件是一种动态效果插件,它能够生成充满活力的粒子动画,这些粒子可以是点、图形或文字,它们在页面上随机移动...

    jQuery通用dialog对话框 popup提示信息窗口插件demo

    **jQuery通用Dialog对话框与Popup提示信息窗口插件** 在前端开发中,用户交互界面的友好性和用户体验至关重要。jQuery提供了一种便捷的方式来实现这一目标,那就是通过Dialog对话框和Popup提示信息窗口。本文将深入...

    Jquery验证插件demo

    标题"Jquery验证插件demo"指的是一个示例项目,展示了如何使用jQuery验证插件进行表单验证。这个项目可能包含了各种验证规则的实现,如非空验证、电子邮件格式验证、手机号码验证等,同时也可能展示了一些自定义验证...

    Jquery演示 jquerydemo jquery常用

    ### 六、jQuery插件 jQuery社区开发了众多插件,如Bootstrap的弹出框(`bootstrap-dialog`), 图片轮播(`owl.carousel`), 表格排序(`datatables`)等,极大地扩展了jQuery的功能。使用它们,只需引入相应的JS和CSS文件...

    jquery Grid Demo

    **jQuery Grid 框架详解** ...总的来说,jQuery Grid 是一款功能强大、易于使用的表格插件,能够帮助开发者高效地构建数据密集型的 Web 应用。熟练掌握其使用,可以极大地提升开发效率和用户体验。

    jquery easyui datagrid demo

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...

    jquery扩展demo

    为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头像上传jquery插件"是指使用了名为"Cropper"的JavaScript库,结合jQuery技术,实现的一个专门用于用户头像上传的功能。Cropper是一款强大的图片裁剪工具,它提供了丰富的API和选项,使得在前端进行图片裁剪...

    jquery例子大全 jquery demo

    在“jQuery例子大全 jQuery demo”这个压缩包中,包含了一系列的示例,旨在帮助用户快速理解和掌握jQuery的核心概念及常用方法。** ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取...

Global site tag (gtag.js) - Google Analytics