แก้ไขข้อความแบบทันที ด้วย jQuery

04 February 2009 By Ninenik Narkdee
ข้อความ jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ข้อความ jquery





<?php
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
if(count($_POST)>0){
	echo "<pre>";
	print_r($_POST);
	echo "</pre>";	
	exit;
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html{
		
}
body{
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css สำหรับปุ่ม */
.okButton{
	border:1px groove #CCC;
	background-color:#390;
	color:#FFF;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.cancelButton{
	border:1px groove #CCC;
	background-color:#FF0;
	color:#000;
	font-size:10px;
	margin-right:3px;
	cursor:pointer;
}
.editable_textarea{
	width:350px;
	height:100px;
}
</style>
<title>แก้ไขข้อความแบบทันที ด้วย jQuery</title>
</head>

<body>

<div style="margin:auto;width:550px;">
<p class="editable" id="data1">
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1<br />
ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 ข้อความทดสอบ 1 
</p>
<p class="editable" id="data2">
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2<br />
ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 ข้อความทดสอบ 2 <br />
test
</p>


<div id="consoleD" style="border:1px solid #CCC;background-color:#FFFFF0;color:#333;">

</div>
</div>


<script type="text/javascript" src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var tempVal=[];
$(function(){
	$(".editable").click(function(){
		var indexThis=$(".editable").index(this);
		tempVal[indexThis]=$(".editable").eq(indexThis).html(); 
		editalbeThis(indexThis);
	});	
	$(document).on('click','.cancelButton',function(){		
		var indexThis=$(this).parent(".editable").index();		
		$(this).parent(".editable").html(tempVal[indexThis]);
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});
	$(document).on('click','.okButton',function(){
		var indexThis=$(this).parent(".editable").index();		
		var newValue=$(this).siblings("textarea").val();
		var field=$(this).siblings("textarea").attr("id");
		$(this).parent(".editable").html(newValue);
		tempVal[indexThis]=newValue; 		
		$.post("swap_textarea.php",{
			"field":field,
			"value":newValue
		},function(data){
			$("#consoleD").html(data);
		});
		$(".editable").eq(indexThis).click(function(){
			editalbeThis(indexThis);
		});
	});	
});
function editalbeThis(index){
	var curThis=index;
	var gData=$(".editable").eq(curThis).text();
	var data=$("<textarea/>",{
		"name":$(".editable").eq(curThis).attr("id"),
		"class":"editable_textarea",
		"id":$(".editable").eq(curThis).attr("id"),
		"text":gData
	});
	var buttonUpdate="<br><button class="okButton">Update</button>";
	var buttonCancel="<button class="cancelButton">Cancel</button>";
	$(".editable").eq(curThis).unbind("click");
	$(".editable").eq(curThis).html(data).append(buttonUpdate).append(buttonCancel);	
}
</script>

</body>
</html>




อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: ข้อความ jquery







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ