编辑内容

最新推荐文章于 2022-05-20 16:05:44 发布

ITDragon龙

最新推荐文章于 2022-05-20 16:05:44 发布

阅读量4.6k

点赞数 1

分类专栏： javascript 文章标签： Jquery 编辑

本文链接：https://blog.csdn.net/qq_19558705/article/details/50364662

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

点击编辑显示编辑框，确定则保存内容，取消则还原

效果图：

使用bootstrap，font awesome ，alertfly 或者是 alertflyjs 两个版本。

使用alertfly目的是当输入内容为null时友情提示，其提示框不可拖拽，而alertflyjs是可拖拽。

使用font awesome目的是用图标代替文字，跟简洁

代码：

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<!--当前页面的三要素-->
		<title>内容修改</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="Description" content="">
		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			#box {width:300px;height:300px;margin:50px auto;border:2px solid #ccc;border-radius:4px;}
			#box .item{text-align:center;}
			#box .button , .edit{display:none;color:blue;}
		</style>
	<link type="text/css" rel="stylesheet" href="bootstrap/3.3.0/css/bootstrap.min.css" ></link>
	<link type="text/css" rel="stylesheet" href="font-awesome/4.3.0/css/font-awesome.min.css" />
	<link type="text/css" rel="stylesheet" href="alertify/0.3.12/css/alertify-bootstrap.css"/>
	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="bootstrap/3.3.0/js/bootstrap.min.js" ></script>
	<script type="text/javascript" src="alertify/0.3.12/js/alertify.js"></script> 
	</head>
	<body>
		<div id="box">
			<div class="item">
				<div class="name" title="ITDragon">ITDragon</div>
				<i class="edit fa fa-pencil fa-lg"></i>
				<i class="button save fa fa-check fa-lg"></i>
				<i class="button cancle fa fa-times fa-lg"></i>
			</div>
		</div>
		<script type="text/javascript">
			$(function(){
				$("#box").find(".edit").click(function(){
					var $name = $(this).parent().find(".name");
					$(this).hide();
					$(this).parent().find(".button").show();
					var text = $name.text();
					$name.html("<input type='text' class='newText' value='"+text+"'/>");
				});	
				$("#box").find(".cancle").click(function(){
					var $name = $(this).parent().find(".name");
					$name.html($name.attr("title"));
					$(this).parent().find(".button").hide();
					$(this).parent().find(".edit").show();
				});
				$("#box").find(".save").click(function(){
					var $name = $(this).parent().find(".name");
					var $input = $(this).parent().find(".newText");
					var inputValue = $input.val();
					if(inputValue != ""){
						$name.attr("title" ,inputValue).html(inputValue);
						$(this).parent().find(".button").hide();
						$(this).parent().find(".edit").show();
					}else {
						alertify.alert("请输入内容");
					}
				});
			});
		</script>
	</body>
</html>

资源下载地址：http://download.csdn.net/detail/qq_19558705/9288037
转载请注明来源：http://blog.csdn.net/qq_19558705/article/details/49851879

更多干货等你来拿 http://www.itit123.cn/

ITDragon龙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编辑内容

点击编辑显示编辑框，确定则保存内容，取消则还原效果图：使用bootstrap，font awesome ，alertfly 或者是 alertflyjs 两个版本。使用alertfly目的是当输入内容为null时友情提示，其提示框不可拖拽，而alertflyjs是可拖拽。使用font awesome目的是用图标代替文字，跟简洁代码：
复制链接

扫一扫