使用JQuery实现Edit in place效果的Input框
2011-08-24 22:07
302 查看
用过Gmail的应该都知道其内置的通讯录,当鼠标移动到联系人的姓名或者电话号码上时候就会自动进入编辑状态。这种方式对用户来说比较友好,没有弹出单独的编辑界面,用户可以再当前上下文环境中进行编辑。实现这种效果的基本思路就是当鼠标移动到可编辑内容上的时候对显示方式进行更改,比如之前的是在一个label中显示一段文字,当鼠标移动到label上时候,使用JavaScript将label替换为一个input,同时保持input中的内容与原来label一致。当然还有更简单的实现方式,一开始就使用input显示内容,不过这时候input的边框不能显示出来,这样用户就看不出那个input框,当鼠标移动到这个input框的时候再将其边框显示出来,下面就是根据这个思路写的一个JQuery
Plugin:
Plugin:
;(function($) { $.fn.wwReadWriteInput = function(options){ var opts = $.extend({}, $.fn.wwReadWriteInput.defaults, options); return this.mouseenter(function(){ var $this = $(this); $this.removeClass(opts.readClass); $this.addClass(opts.writeClass); }).mouseleave(function(){ var $this = $(this); $this.removeClass(opts.writeClass); $this.addClass(opts.readClass); }); }; //default settings $.fn.wwReadWriteInput.defaults = { readClass: '', writeClass: '' }; })(jQuery);从代码中容易看出,使用了两个class来表示显示状态和编辑状态,使用者只要分别定义自己的样式就可以使用,比如:我将这两种样式分别定义为:
.writable-ipt { border: 1px; border-color: #9a9a9a #cdcdcd #cdcdcd #9a9a9a; border-style: solid; } .readonly-ipt { border-color: #fff; }在readonly-ipt中将input的边框设置为白色,也就是相应页面的背景色,这样input就和背景融为一体,用户看来就是显示在页面上的一段文字。当鼠标移动到input框的时候它的样式会变为writable-ipt定义的样式,这时候边框设置了颜色,用户明显可以看出这是一个input框,从而可以对其内容进行编辑。下面是实际使用的代码:
$(".inline-edit-ipt").wwReadWriteInput({ readClass: 'read-only-ipt', writeClass: 'writable-ipt' });大家可以看到这个Plugin相当简陋,只完成了最基本的样式切换,用户编辑完成以后还需要向后台服务器发送Ajax请求来更新数据,这时候只需要在input框的blur事件响应函数中做相应处理即可。
相关文章推荐
- 使用jQuery实现滑过图片展示信息效果
- AJAX学习心得分享----(二)使用JQuery实现AJAX效果
- 使用jquery实现弹出层效果
- 使用jQuery和Ajax请求实现分页效果
- jquery使用CSS3实现文字动画效果插件Textillate.js
- jquery使用CSS3实现文字动画效果插件Textillate.js
- 使用jQuery实现类似开关按钮的效果
- 使用jQuery实现的掷色子游戏动画效果
- 使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
- 使用jQuery插件realshadow实现超酷真实阴影效果
- 使用jQuery插件realshadow实现超酷真实阴影效果
- jQuery使用drag效果实现自由拖拽div
- jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
- 使用jQuery和Ajax请求实现分页效果
- 使用JQuery.slideBox实现图片滚动效果
- 不用Margin使用jQuery实现左右滚动效果
- PHP开发-HTML中使用Jquery实现多行数据的省略号效果(效果图)
- 不使用jquery实现js打字效果示例分享
- 使用jQuery来实现菜单文字和图标动画效果