S i X h E a D { ? } » jquery http://sixhead.com เมื่อความรู้มีไว้แบ่งปัน Mon, 27 Feb 2012 06:23:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 จำกัดจำนวนตัวอักษรใน textarea http://sixhead.com/2009/06/30/limit-textarea-maxlength/ http://sixhead.com/2009/06/30/limit-textarea-maxlength/#comments Tue, 30 Jun 2009 16:01:01 +0000 Pipo http://sixhead.com/?p=455 บางครั้งเราต้องการจำกัดจำนวนตัวอักษรใน textarea ปรากฏว่ามันไม่ง่ายเหมือน text box ที่เราสามารถใส่ attribute maxlength เข้าไปจำกัดตัวอักษรได้ตรงๆ จึงต้องใช้ jquery เข้ามาช่วยดังตัวอย่าง

 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function(){
	$('#Wish').keyup(function(){
		var max = parseInt($(this).attr('maxlength'));
		if($(this).val().length > max){
			$(this).val($(this).val().substr(0, $(this).attr('maxlength')));
		}
		$('#WishMax').html('เหลืออีก ' + (max - $(this).val().length) + ' ตัวอักษร');
	});
});
</script>
 
<textarea name="Wish" id="Wish" maxlength="10"></textarea>
<div id="WishMax"></div>
 

]]> http://sixhead.com/2009/06/30/limit-textarea-maxlength/feed/ 1 เริ่มต้นง่ายๆกับ jQuery http://sixhead.com/2008/01/31/simple-start-with-jquery/ http://sixhead.com/2008/01/31/simple-start-with-jquery/#comments Thu, 31 Jan 2008 16:50:14 +0000 Pipo http://sixhead.com/2008/01/31/simple-start-with-jquery/ ไม่ต้องพูดอะไรกันมาก เริ่มเรียนรู้กันจากตัวอย่างไปเลย ใช้งานง่ายมากๆ เขียน code บรรทัดเดียว
ก็จะได้ คำสั่ง show, hide, หรือ fade effect แบบสวยงามได้แล้ว

ดูตัวอย่างที่นี่

#testDiv {
	background-color:#3399CC;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}
.testClass {
	background-color:#FF0000;
	font: 12px Tahoma, Arial, sans-serif;
	color:#FFFFFF;
	width: 150px;
	height: 100px;
	text-align:center;
}

* #testDiv และ .testClass ใน css เอาไว้แค่กำหนดหน้าตาเฉยๆ ไม่มีผลกับ jquery

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>

บรรทัด 26. เป็นการเรียกโหลด jquery.js เข้ามา

<a onclick="$('#testDiv').show();" href="javascript:void(0);">Show</a>
<a onclick="$('#testDiv').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 31. จุดสำคัญมันอยู่ตรงนี้ onclick="$('#testDiv').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
div (ขึ้นต้นด้วย #) ที่ชื่อว่า #testDiv นั่นเอง

 
<div id="testDiv">ข้อความ .. .. .. ข้อความ</div>
 
<a onclick="$('.testClass').show();" href="javascript:void(0);">Show</a>
<a onclick="$('.testClass').hide();" href="javascript:void(0);">Hide</a>

บรรทัด 49. ในทำนองเดียวกัน onclick="$('.testClass').show();" คำสั่งนี้คือการ เลือกที่จะทำงานกับ
class (ขึ้นต้นด้วย .) ที่ชื่อว่า .testClass นั่นเอง

 
<div class="testClass">ข้อความ .. .. .. ข้อความ</div>
 

ส่วนคำสั่ง fadeIn, fadeOut ก็ดูได้จาก source code ในตัวอย่างได้เลย
เห็นไหมครับว่ามันง่ายขนาดไหน ต่อให้เป็น web designer ก็ตามยังสามารถที่จะลองทำได้ง่ายๆ เลย

อันที่จริงแล้ว jQuery นั้นมีคำสั่งที่สั้นกว่านี้อีกไว้จะเขียนเพิ่มในตอนต่อๆ ไป

]]> http://sixhead.com/2008/01/31/simple-start-with-jquery/feed/ 6 jQuery: The Write Less, Do More, JavaScript Library http://sixhead.com/2008/01/25/jquery-the-write-less-do-more-javascript-library/ http://sixhead.com/2008/01/25/jquery-the-write-less-do-more-javascript-library/#comments Thu, 24 Jan 2008 17:43:32 +0000 Pipo http://blog.sixhead.com/2008/01/25/jquery-the-write-less-do-more-javascript-library/ ถึงเวลานี้ jquery โดนใจอย่างจัง http://jquery.com/

ยุคแรกๆ ที่ผมเริ่มทำพวก show ๆ hideๆ div, css, ajax ฯลฯ จะทำอะไรกันแต่ละที
ต้องมานั่งเขียน function JavaScript เองใช้เวลาไปเยอะมาก แถมออกมาก็พอไป
วัดไปวาได้ แต่ถ้าจะเอามาใช้ใหม่ทีก็ลำบากหน่อย

ช่วงหลังงาน web developer ที่ทำอยู่ มีความต้องการที่จะใส่ลูกเล่น และความสวยงาม
ให้มากยิ่งขึ้น ผมจึงไม่รอช้าหา Library ที่จะทำงานพวกนี้ให้ง่ายขึ้น ก็หาใน google.com
หาไปเรื่อยๆ ลองไปเรื่อย สุดท้ายมาเจอ jquery ดูการทำงานและ plugin แล้วเป็นที่หน้า
พอใจจึงได้เริ่มลองใช้งาน ปรากฏว่าหลงรัก jquery เข้าอย่างจัง ในเรื่องต่อๆ ไปจะเอา
พวก function และ plugin ดีๆ มา review ให้ดูกันครับ

]]> http://sixhead.com/2008/01/25/jquery-the-write-less-do-more-javascript-library/feed/ 0