jQuery尝试（一）

相信大家已经对jQuery不再陌生了吧，小生对jQery接触的较早，但没能耐心心研究，苦于工作需要，翻看手册做了个简单的效果，也是很多网站都有使用的效果，小生井底之蛙，请老鸟莫笑

一、功能介绍

    主要实现的是对textbox双击后出现编辑状态，修改完成后变为不可编辑状态

二、思路

    设立一个div并给其加上一个标志方便jQuery能找到他，其中放入一个input:textbox和一个intpu:button,初始状态textbox为不可编辑状态并且无边框，button为隐藏，双击div后textbox改变样式出现边框，获得焦点，可进行编辑，button按钮出现.

    当编辑完毕，点击button后div恢复到初始状态。

三、代码

 

（1）样式

input.t {border:1px solid #fff;background:#fff; }
input.s {border:1px solid #369;background:#fff;}
.hiden{display:none}

 

（2）脚本

 

<script language="javascript" type="text/javascript" src="jquery-1.3.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
        $("p").bind("dblclick", function(){alert( $(this).text() ); });
        $(".edit").bind("dblclick",function(){aa(this)});
                           });
function aa(obj)
{
    $(obj).find(":text").removeClass("t");
    $(obj).find(":text").addClass("s");
    $(obj).find(":text").removeAttr("readonly");
    
    $(obj).find(":button").removeClass("hiden");
    
    $(obj).find(":text").focus();
}
function bb(obj)
{
    $(obj).parent().find(":text").removeClass("s");
    $(obj).parent().find(":text").addClass("t");
    $(obj).parent().find(":text").attr("readonly","readonly");
    $(obj).addClass("hiden");
}
</script>

 

(3)Html代码

 

<div class="edit"><input type="text" class="t" value="双击修改我"  readonly=""  /><input type="button" value="修改" class="hiden" onclick="bb(this)" /></div>

 

 

脚本写的很粗糙，请大家原谅，也请感兴趣的朋友指正和完善 :-)   代码下载