例子主要编写一个输入框,页面加载时会显示初始值,无边框,看起来像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
人脸识别jquery插件demo
jQuery 插件demo 自动补全 有一个myeclipse 的示例是与数据库交互的
jquery treeview demo
jquery地图插件demo
jquery插件大全,各种漂亮的效果应有尽有
jquery插件库-jquery粒子系统插件demo.zip
jQuery通用dialog对话框 popup提示信息窗口插件demo
插件+Demo+源码 亲测可用! 初学者必备的分页插件,调用配置简单,参数容易理解,共有3中样式,可以自由转换
一个简单的jQuery弹出框插件demo
亲手自制自定义滚动条,兼容IE、火狐、谷歌、百度各大浏览器
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
基于jquery的imgbox图片预览插件Demo源码
Jquery验证插件demo。主要看到验证的一些UI设计和代码都很精简,所以分享一下。
仿 amazon menu jquery 菜单插件 demo
jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo jquery大量特效demo
plupload上传插件 基于jquery 有demo
treetable这个jquery插件 的演示demo,带完整的jquery,treetable和css依赖
JQuery插件+demo:适合新手学习的资料示例整理 包含几个阶段的学习文件
FancyBox是一个功能强大的Jquery页面弹出框特效插件,能加载DIV,ajax数据,图片,图集,iframe,swf动画等.本文档是一个完整的Demo,对FancyBox的各种功能都进行了验证。