利用JQuery编写自定义简单的Html控件
2009-05-08 08:21
239 查看
下面例子主要编写一个输入框,页面加载时会显示初始值,无边框,看起来像span,点击时,边框会出现,而且内容会被选中,失焦时会触发ajax事件,修改内容的值。
以下为代码:
1 jQuery.fn.inputText = function(value, action, viladata)
2 {
3 var $input = this;
4 //设置输入框初始值
5 if(value != "")
6 {
7 $input.val(value);
8 }
9 //设置输入框为无边框
10 $input.attr("style","border:0px solid #fff");
11 //输入框被点击
12 $input.click(function(){
13 //显示边框
14 $input.attr("style","border:1px solid #aaa");
15 //选中内容
16 $input.select();
17 });
18
19 //输入框失焦
20 $input.blur(function(){
21 $input.attr("style","border:0px solid #fff");
22
23 //验证函数,验证是否通过
24 if(viladata)
25 {
26 var input = $input.val();
27 $.post(action,{value:input},function(data){
28 if(data=="success")
29 {
30 alert("修改成功");
31 window.location.reload();
32 }
33 else alert("修改失败");
34 },"TEXT");
35 }
36 });
37 }
在HTML中调用为:
<input type="text" id="input"/>
<script type="text/javascript">
$(document).ready(function(){
$("#input").inputText("初始值","a.aspx",validata);
});
//验证函数
function validata()
{
return true;
}
这样一个简单的控件就完成了。。。
以下为代码:
1 jQuery.fn.inputText = function(value, action, viladata)
2 {
3 var $input = this;
4 //设置输入框初始值
5 if(value != "")
6 {
7 $input.val(value);
8 }
9 //设置输入框为无边框
10 $input.attr("style","border:0px solid #fff");
11 //输入框被点击
12 $input.click(function(){
13 //显示边框
14 $input.attr("style","border:1px solid #aaa");
15 //选中内容
16 $input.select();
17 });
18
19 //输入框失焦
20 $input.blur(function(){
21 $input.attr("style","border:0px solid #fff");
22
23 //验证函数,验证是否通过
24 if(viladata)
25 {
26 var input = $input.val();
27 $.post(action,{value:input},function(data){
28 if(data=="success")
29 {
30 alert("修改成功");
31 window.location.reload();
32 }
33 else alert("修改失败");
34 },"TEXT");
35 }
36 });
37 }
在HTML中调用为:
<input type="text" id="input"/>
<script type="text/javascript">
$(document).ready(function(){
$("#input").inputText("初始值","a.aspx",validata);
});
//验证函数
function validata()
{
return true;
}
这样一个简单的控件就完成了。。。
相关文章推荐
- 利用JQuery编写自定义简单的Html控件
- Android ndk开发环境下利用c编写的简单平面波传播模型(带控件)
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- 利用jQuery编写一个简单的插件
- jQuery入门(10):Ajax(利用WebService调用用户控件生成HTML)
- 自定义按钮控件的简单编写
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- \t\t用C#编写ActiveX控件 自定义html控件 ActiveX 控件注册 标记Activex控件为脚本安全
- Jquery自定义扩展方法(二)--HTML日历控件
- 使用jQuery和CSS自定义HTML5 Video 控件 简单适用
- 使用JQuery动态生成Html控件
- C# 学习自定义控件,从一个简单实用的日期控件开始。
- Span使用之利用自定义Span解析Html中特殊标签实现类似微博@效果
- 在利用Mfc编写activex控件时取得控件容器句柄
- MFC利用webbrowser控件实现简单的自动登陆
- Ext.Net 1.2.0_利用 Ext.Net 自定义 GridPanel Ajax 控件
- jsp_首先利用纯HTML写一个简单的登录页面以及后台处理页面【代码】
- 利用Java编写简单的WebService实例
- jQuery点击元素获取自定义属性的值,利用冒泡原理~
- 利用 Go 语言编写一个简单的 WebSocket 推送服务