dasdsasd

类似于资料修改并且保存的操作

前几天遇到有人问想做一个修改和保存资料的效果 于是想了想 研究了下

想到了三种实现方式  当然用户体验有待研究。。由于刚开始写博客 语言组织和代码都比较差 欢迎大家指正 

1、类似于QQ的资料修改(本来就是input输入框先隐藏边框  鼠标移动上去出现边框 得到焦点时 可以编辑 失去焦点时保存)

如下图 这个就不说啦 太简单了

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>这里主要写思路 布局就没那么细啦</title>
<style type="text/css">
*{  font-size:30px;}
span{  vertical-align:middle}
input{ border:1px solid #FFF; solid line-height:12px;}
input:hover{border:1px solid #000;}
</style>
</head>
<body>
<span>请输入名称：</span><input value="星米"/>

</body>
</html>

2.文本在页面上保存时用文本标签包裹，当点击修改时在对于的文本后面插入input  并且把标签innerHTML赋给input的value

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>代码二</title>
<style type="text/css">
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function edit(obj){
	obj=$(obj).parent().parent();
	obj.children('li:not(:last)').find("span").each(function(){
	var self=$(this);
	self.html('<input type="text" value="'+self.html()+'" class="ipt" />');
	});
	obj.children('li:last').html('<a href="#" onclick="save(this)">保存</a>');
	obj=null;
}
function save(obj){
	obj=$(obj).parent().parent();
	obj.children('li:not(:last)').find("span").each(function(){
	var self=$(this);
	self.html(self.children('input[class="ipt"]').val());
	});
	obj.children('li:last').html('<a href="#" onclick="edit(this)">更改</a>');
	obj=null;
}
</script>
</head>
<body>

<ul>
	<li><span>姓名</span><span>姓名</span><span>姓名</span></li>
	<li><span>AAAAAAAA</span><span>bbbbbbbb</span></li>
	<li><a href="#" onclick="edit(this)">更改</a></li>
</ul>

</body>
</html>

3、利用input的readyonly属性来控制为只读 当点击修改时移除掉readyonly 属性

代码如下

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>代码三</title>
<style type="text/css">
input{ float:left;}
p{ float:left;margin:5px; padding:0 5px; background:#555;cursor:pointer;}
p span{ display:block; width:100%; height:100%}
</style>

</head>
<input id="setText" value="15647"/>
<p id="edit">修改</p>
<p id="save">保存</p>
<script>
setText.readOnly = true;
edit.onclick = function(){
	setText.readOnly = false;
	setText.focus();
}
var save = document.getElementById("save");
save.onclick = function(){
	setText.readOnly = true;
	setText.blur();
}
</script>
</body>
</html>

　　

posted @ 2012-06-01 14:28  小A的博客  阅读(191)  评论(0)    收藏  举报