编辑内容

怼烎@ 2022-08-18 12:23 189阅读 0赞

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

效果图：![20151121111350758][]

使用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="">
    		
    		<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_download.csdn.net_detail_qq_19558705_9288037]  
转载请注明来源：[http://blog.csdn.net/qq\_19558705/article/details/49851879][http_blog.csdn.net_qq_19558705_article_details_49851879]

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

[20151121111350758]: /images/20220731/7c6433921a9943628b899451fcfb195a.png
[http_download.csdn.net_detail_qq_19558705_9288037]: http://download.csdn.net/detail/qq_19558705/9288037
[http_blog.csdn.net_qq_19558705_article_details_49851879]: http://blog.csdn.net/qq_19558705/article/details/49851879
[http_www.itit123.cn]: http://www.itit123.cn/