JAVASCRIPT Learninghttp://www.ninenik.comรวมบทความ JAVASCRIPT th-THFri, 10 Feb 2012 04:00:53 +0700Copyright ninenik.comCMSPro เว็บไซต์สำเร็จรูปhttp://www.ninenik.com/images/logo_ninenik.gifhttp://www.ninenik.comแทรก +1 button ในเว็บจาก google plushttp://www.ninenik.com/แทรก_+1_button_ในเว็บจาก_google_plus-417.htmlเห็นหลายๆเว็บไซต์ เขาใส่ +1 button ในเว็บกันแล้ว อยากจะเอามาใส่ในเว็บ ninenik.com บ้าง

เข้าไปอ่าน และปรับแต่งค่าต่างๆ แล้วเอาไปใส่เว็บได้เลยอย่างง่ายดายได้ที่

http://www.google.com/intl/en/webmasters/+1/button/index.html

Javascript Code แทรกไว้ก่อนแท็กปิด body หรือในแท็ก head

 

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'th'} // สำหรับปรับแต่งภาษาไทย อังกฤษก็เปลี่ยนเป็น en
</script>



Code ที่ต้องการแสดงปุ่ม +1 ไว้ตรงตำแหน่งที่ต้องการให้แสดง

 

<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="small" callback="alert('OK man');" href="http://www.ninenik.com"></g:plusone>



attrbute ภายในสำหรับปรับแต่ง
attrbute size ตอนนี้มี 4 แบบ
 - small ขนาด 15px
 - medium ขนาด 20px
 - standard ขนาด 24px โดยที่หากใช้ขนาด standard ก็ไม่ต้องกำหนด attribute size
 - Tall ขนาด 60px

attribute callback
 ใช้กำหนดสำหรับเรียกใช้ฟังก์ชัน javascript หลังจากคลิกที่ปุ่ม +1 แล้ว ว่าต้องการให้ทำอะไรเช่น
   callback="alert('OK man');"  หลังจากคลิกแล้วให้ขึ้น alert ว่า OK man

attribute count
 ใช้กำหนดหากต้องการให้แสดงจำนวนคนที่กด +1 กี่คน หรือไม่
 count="false"  ไม่แสดง
 กรณีต้องการแสดง ไม่ต้องแทรก attribute count

attribue href
 ใช้กำหนด url ของหน้าเพจนั้นๆ จะกำหนดหรือไม่ ก็ได้ หากไม่กำหนด ก็จะใช้ url ของเพจนั้นเป็นหลัก


อ่านรายละะอียดแบบเจาะลืก อย่างโปรได้ที่

http://code.google.com/apis/+1button/

]]>Sat, 16 Jul 2011 16:21:09 +0700ทบทวน JavaScript SDK ของ facebookhttp://www.ninenik.com/ทบทวน_JavaScript_SDK_ของ_facebook-403.htmlJavaScript SDK ช่วยให้เราเข้าถึงลักษณะเด่นต่างๆ ของ Graph API  ผ่านทาง JavaScript
ฟังก์ชันที่ใช้งานใน JavaScript SDK เกือบทั้งหมด จำเป็นจะต้องมีการกำหนด APP ID
สามารถลงทะเบียนขอรับ APP ID ได้จากลิ้งค์ต่อไปนี้
http://developers.facebook.com/setup/

เริ่มต้น รูปแบบ การเรียกใช้งาน JavaScript SDK จะใช้รูปแบบต่อไปนี้ ในทุกๆ เนื้อหาที่เกี่ยวข้อง

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>

<body>



<div id="fb-root"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  window.fbAsyncInit = function() {
	  FB.init({
		appId  : 'YOUR APP ID', // ใส่ APP ID
		status : true, // check login status
		cookie : true, // enable cookies to allow the server to access the session
		xfbml  : true  // parse XFBML
	  });
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());  
</script>
<script type="text/javascript">
$(function(){
	// jQuery code
});
</script>
</body>
</html>

 

ตัวอย่างโค้ดด้านบน จะเป็นโค้ดเริ่มต้น ในการศึกษาการใช้ JavaScript SDK ในหัวข้อต่อๆ ไป

]]>Tue, 15 Mar 2011 22:48:39 +0700แนะนำ ปลั๊กอิน comment ตัวใหม่ของ facebookhttp://www.ninenik.com/แนะนำ_ปลั๊กอิน_comment_ตัวใหม่ของ_facebook-402.htmlfacebook ปลั๊กอิน comment ตัวใหม่จะไม่อนุญาตให้บุคคลทั่วไป แสดง comment ได้ จะอนุญาต
เฉพาะคนที่เป็นสมาชิกเท่านั้น

ลำดับการแสดงของ facebook ปลั๊กอิน comment ตัวใหม่ จะไม่สามารถกำหนดลำดับการแสดง
รายการตามลำดับการโพสก่อน - หลัง ได้ แต่ลำดับการแสดง จะขึ้นอยู่กับว่า รายการ comment ใดๆ
ที่มีคนกด like มากกว่า ก็จะอยู่ด้านบนหรือเหนือกว่า เหตุผลเพื่อป้องกัน spam หรือรายการ comment ที่ไม่เหมาะสม ให้แสดงอยู่หลังสุด หรือไม่แสดง

เมื่อมีการ comment และกำหนดให้แสดงไปยังหน้า wall ของผู้ comment ด้วยแล้ว
หากมีคนมา reply (comment ต่อ) ต่อใน facebook wall จะทำให้ รายการ comment นั้น ก็จะมาแสดงที่ หน้าปลั๊กอินด้วย
และในอีก กรณี หากมีคนมา reply (comment ต่อ) ที่หน้าปลั๊กอิน รายการ comment นั้น ก็จะไปแสดงที่ wall พร้อมทั้งมีการแจ้งเตือนว่ามีคนมา comment ด้วย


ในส่วนของการจัดการ ผู้ดูแลสามารถกำหนดให้เลือกว่าจะทำการ comment โดยกรล็อกอินด้วย
facebook หรือ yahoo ก็ได้ (อาจจะมีเพิ่มในภายหลัง)
นอกจากนั้นในส่วนของการจัดการ
สามารถกำหนดว่า ให้แสดงข้อความ comment นั้นทันทีเลยหรือไม่
หรือว่า ให้แสดงเมื่อทำการตรวจสอบรายการ comment นั้นแล้ว
สามารถทำการซ่อนรายการ comment ที่ไม่ต้องการได้
สามารถ ban user ได้
และอื่นๆ

เข้าไปอ่านตัวอย่างวฺิธีการใช้งานได้ด้วยตัวเองที่
http://developers.facebook.com/docs/reference/plugins/comments/

หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ในหน้านั้นเลย สามารถกำหนด meta tag ดังนี้
 

<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>

หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ทั้งหมด สามารถกำหนด meta tag ดังนี้

<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">

ตัวอย่างหน้าตา facebook comment ใหม่

ตัวอย่างโค้ด การใช้งาน

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook new comment</title>

<!--
หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ในหน้านั้นเลย สามารถกำหนด meta tag ดังนี้
-->
<meta property="fb:admins" content="1234998873"/>
<!--
หากต้องการให้สามารถจัดการ หรือดูแลรายการ comment ทั้งหมด สามารถกำหนด meta tag ดังนี้
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}">
-->
<meta property="fb:app_id" content="134358299911812">
</head>

<body>



<div id="fb-root"></div>

<fb:comments 
href="http://www.ninenik.com/fb/face_newcomment.php" 
num_posts="3" 
width="500">
</fb:comments>
<!--
href กำหนด url ของหน้าที่แสดง
num_posts จำนวนที่ต้องการแสดง ต่อหนึ่งหน้า
width  ความกว้างที่ต้องการ
-->
<!--
<script src="http://connect.facebook.net/en_US/all.js#appId={YOUR_APPLICATION_ID}&amp;xfbml=1"></script>
-->
<script src="http://connect.facebook.net/en_US/all.js#appId=134358299911812&amp;xfbml=1"></script>


</body>
</html>

 

]]>Sun, 06 Mar 2011 15:04:58 +0700ยืนยันการเปลี่ยนแปลงข้อมูลใน select option ด้วย javascript อย่างง่ายhttp://www.ninenik.com/ยืนยันการเปลี่ยนแปลงข้อมูลใน_select_option_ด้วย_javascript_อย่างง่าย-401.htmlตัวอย่างโค้ดต่อไปนี้ เป็นการสร้างข้อความยืนยัน ในการเปลี่ยนแปลง ข้อมูลของ option select object หรือ ที่เรียกกันว่า list menu หรือ dropdown menu โดยหลักคือ เมื่อมีการเปลี่ยนแปลงข้อมูลในรายการ list menu จะมีข้อความแจ้งเตือนว่า ต้องการยืนยัน การเปลี่ยนแปลงข้อมูล หรือไม่
ถ้าเลือกยืนยันการเปลี่ยนแปลง คือ  Yes
ค่าของ list menu ก็จะเปลี่ยนแปลงไปตามที่เราเลือก
ถ้าเลือก No
ค่าของ list menu ก็จะเป็นค่าเดิม ก่อนที่เราจะทำการเปลี่ยนแปลงรายการ
ตัวอย่าง

โค้ดตัวอย่าง

<select name="data1" id="data1"  onfocus="chk_select1(this)" onchange="chk_select2(this)">
<option value="รายการ 1">รายการ 1</option>
<option value="รายการ 2">รายการ 2</option>
<option value="รายการ 3">รายการ 3</option>
</select>
<script type="text/javascript">
var temp_val; // ตัวแปรสำหรับเก็บค่าเก่า สำหรับกรณียกเลิก
var selIdx; // ตัวแปรสำหรับเก็บค่ารายการเลือกเก่า สำหรับกรณียกเลิก
function chk_select1(obj){ // เก็บค่าข้อมูลเมื่อคลิก
	temp_val=obj.value;	 // เก็บค่าข้อมูลเมื่อคลิก
	selIdx = obj.selectedIndex; //  เก็บค่าข้อมูลเมื่อคลิก	 
}
function chk_select2(obj){ // ตรวจสอบเมื่อเลือกเปลี่ยนแปลงรายการ
	if(confirm("Are you sure?")){
		//  กำหนดคำสั่งตามต้องการถ้าเลือก Yes
		 alert("คุณได้ทำการยืนยันการเลือกรายการใหม่");
	}else{
		// คืนค่าตัวเลือกเดิม เมื่อไม่ยืนยันการเปลี่ยนแปลง
		obj.options[selIdx].selected=true; 
	}
}
</script>

 

]]>Thu, 24 Feb 2011 08:00:00 +0700เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์http://www.ninenik.com/เพิ่มเติม_การใช้งาน_popup_แบบ_showModalDialog_อย่างสมบูรณ์-391.htmlจากเนื้อหา
การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog
http://www.ninenik.com/การสร้าง_popup_ที่แตกต่าง_ด้วยวิธี_showModalDialog__-314.html

เป็นการแนะนำการสร้าง รูปแบบ popup อีกรูปแบบหนึ่ง ซึ่งอธิบายในหัวข้อตามลิ้งค์ข้างต้น
อย่างไรก็ตาม ไม่ได้อธิบาย รูปแบบการใช้งานที่ต่อเนื่อง ในหัวข้อดังกล่าว ทำให้การนำเอา
ไปใช้งาน จึงไม่มีประสิทธิภาพมากนัก


ในที่นี้จะขออธิบายการใช้งาน เท่าที่จำเป็นอย่างสมบูรณ์ คือ เป็นไปในรูปแบบดังนี้

เมื่อคลิก แสดง popup และ popup ที่เปิดขึ้นมามีแบบฟอร์มสำหรับบันทึกข้อมูล
ก็จะทำการ submit แบบฟอร์มในหน้า popup ได้
และ สามารถที่จะกำหนดให้ปิด popup นั้นอัตโนมัติเมื่อ submit ข้อมูลแล้ว หรือสร้างปุ่มสำหรับปิด ก็ได้
และ เมื่อปิด หน้า popup แล้ว ให้หน้าที่ เปิด popup รีโหลดตัวเอง หรือ ลิ้งค์ที่หน้าอื่นตามต้องการได้

ตัวอย่าง
http://www.ninenik.com/demo/parent_open_showmodaldialog.php

ตัวอย่างโค้ดไฟล์ทดสอบ จะมี 2 ไฟล์ชื่อ
parent_open_showmodaldialog.php
popup_modaldialog.php

ตัวอย่างโค้ดไฟล์ parent_open_showmodaldialog.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent page open showmodaldialog</title>
</head>

<body>


<input name="ddd" type="text" id="ddd" />
<button onclick="popupModal('popup_modaldialog.php',500,200);">Sample Popup</button>

<script type="text/javascript">
var Argu=window; // สร้างตัวแปร สำหรับส่งค่า window object ไปที่ popup
function popupModal(url,width,height){
	var myDate=new Date();
	var setUniqe=myDate.getTime(); // ใช้สำหรับ ป้องกันการ cache กรณีกำลังทดสอบ
	var diaxFeature="dialogWidth:"+width+"px;"
	+"dialogHeight:"+height+"px;"
/*	+"dialogLeft:"+width+"px;"
	+"dialogTop:"+width+"px;"		*/
	+"center:yes;"
	+"edge:raised;" // sunken | raised 
	+"resizable:no;"
	+"status:no;"
	+"scroll:no;";	
	var str =  window.showModalDialog(url+"?"+setUniqe,Argu, diaxFeature);
	// กรณีไม่ใช้ setUniqe
	//  window.showModalDialog(url,"", diaxFeature); 
}
</script>
<br />
<br />
หมายเหตุ เพื่อให้เห็นว่าเมื่อปิด popup แล้ว ไฟล์หน้าหลัก รีเฟรส หรือไม่ ให้กรอก ข้อความอะไรก็ได้<br />
ใน textbox ก่อนกดปุ่ม คำว่า Sample Popup
</body>
</html>

ตัวอย่างโค้ดไฟล์ popup_modaldialog.php

<?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);   
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>popup modaldialog</title>
<style type="text/css">
body{
	padding:10px;
	color:#FF0;
	background:#333;	
}
h4{
	color:#F90;
	text-decoration:underline;	
}
</style>
<script type="text/javascript">
var oMyObject = window.dialogArguments; // รับค่า window object มา
oMyObject.location='parent_open_showmodaldialog.php'; // ชื่อไฟล์หน้าหลัก ที่ต้องการ โหลด
<?php
// 3 บรรทัดด้านล่าง เป็นตัวอย่าง ใช้งานกรณีใช้ php ปิด popup
//	if(count($_POST)>0){
//		echo "window.close();";	
//	}
?>
</script>

</head>

<body>
<pre>
<?php print_r($_POST); ?>
</pre>
<form id="form1" name="form1" method="post" action="" >
  <input type="text" name="textfield" id="textfield" />
  <input type="submit" name="button" id="button" value="Submit" />
  <input type="button" name="button2" id="button2" value="Close" onclick="window.close();" />
</form>
</body>
</html>


บรรทัดที่ 2-4 สำหรับป้องกันการจำค่าเก่า
บรรทัดที่ 10 จำเป็นต้องใส่ <base target="_self"> เพื่อให้สามารถใช้งาน หน้า popup
สำหรับ submit ข้อมูลในหน้าดังกล่าวได้
บรรทัดที่ 25 เป็นการรับค่า object จากหน้าหลัก ในที่นี้คือ window object หน้าหลัก
บรรทัดที่ 26 ให้ object window หน้าหลักโหลดไฟล์ที่ต้องการ หากต้องการ รีเฟรสหน้า
ที่เปิด popup ให้กำหนดเป็นชือไฟล์ นั้นๆ
บรรทัดที่ 27-32 เป็นเพียงตัวอย่าง หากจะใช้งาน การปิด popup ด้วย php

ทดสอบกรอกค่าอะไรก็ได้ในหน้า popup แล้วกด submit ก็จะแสดงข้อมูลการ submit ใน
หน้านั้น แล้วคลิกที่ปุ่ม close หากต้องการปิด แล้วหน้าหลักจะทำการ รีโหลดอีกครั้ง

]]>Wed, 29 Dec 2010 08:00:00 +0700ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2http://www.ninenik.com/ทบทวน_การจัดการกับ_ตัวแปร_array_ใน_javascript_ด้วย_ฟังก์ชัน_ตอนที่_2-343.htmlใช้ฟังก์ชัน sort()  ในการจัดการ กับตัวแปร array

sort() ใช้สำหรับ เรียงลำดับค่า ในตัวแปร array ตามตัวอักษร รองรับการใช้งาน กับการเรียงอักษรภาษาไทย
ไม่สามารถใช้ได้กับการเรียงตัวเลข เช่น ถ้ามีเลข 5 กับ 40 การเรียงลำดับด้วย sort() จะไม่สามารถทำได้
ทำให้ 40 จะมาก่อนเลข 5 แทนที่จะเป็น เลข 5 มาก่อนเลข 40 อย่างไรก็ตาม หากจำเป็นต้องใช้การเรียงตัวเลข
สามารถสร้างฟังก์ชัน สำหรับการเปรียบเทียบค่าเข้ามาช่วยได้

การคืนค่าจะคืนค่ารายการ array ที่มีการเรียงลำดับเรียบร้อยแล้ว มีผลทำให้ตัวแปร array มีการเปลี่ยนแปลง

// ตัวอย่างการใช้งาน  
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseSort=cars.sort();
// จะได้ cars=["Honda","Isuzu","Mitsubishi","Toyota"];
// แล้วคืนค่ากลับมาเป็น array ที่มีการเรียงลำดับใหม่แล้ว
// ทำให้ตัวแปร carsUseSort=["Honda","Isuzu","Mitsubishi","Toyota"]; เท่ากับตัวแปร cars
// ตัวอย่างการใช้งาน กรณี การเรียงลำดับตัวเลข จาก น้อยไปหามาก
var num = ["10", "5", "40", "25", "100", "1"]; // ตัวแปร array
function sortNumber(a,b){ // ฟังก์ชันสำหรับเปรียบเทียบค่า ใช้ในการจัดเรียงกรณีตัวเลข
return a - b;
}

var numSort=num.sort(sortNumber);
// จะได้ num=["1", "5", "10", "25", "40", "100"]; 
// แล้วคืนค่ากลับมาเป็น array ที่มีการเรียงลำดับใหม่แล้ว
// ทำให้ตัวแปร numSort=["1", "5", "10", "25", "40", "100"]; เท่ากับตัวแปร num
// ตัวอย่างการใช้งาน กรณี การเรียงลำดับตัวเลข จาก มากไปหาน้อย
var num = ["10", "5", "40", "25", "100", "1"]; // ตัวแปร array
function sortNumber(a,b){ // ฟังก์ชันสำหรับเปรียบเทียบค่า ใช้ในการจัดเรียงกรณีตัวเลข
return b - a;
}


var numSort=num.sort(sortNumber);
// จะได้ num=["1", "5", "10", "25", "40", "100"]; 
// แล้วคืนค่ากลับมาเป็น array ที่มีการเรียงลำดับใหม่แล้ว
// ทำให้ตัวแปร numSort=["1", "5", "10", "25", "40", "100"]; เท่ากับตัวแปร num

 

ใช้ฟังก์ชัน splice()  ในการจัดการ กับตัวแปร array


splice(index,howmany,element1,.....,elementX)
ใช้สำหรับ เพิ่มค่าเข้าไปในตัวแปร array
และ/หรือ ลบค่าออกจากตัวแปร array (เพิ่ม หรือ ลบ อย่างใดอย่างอย่างหนึ่ง หรือ ทั้งเพิ่ม และลบพร้อมกัน)
คืนค่าที่ทำการลบออก กรณีกำหนดให้มีการลบ
โดยทำให้ตัวแปร array มีการเปลี่ยนแปลง
index คือ ตำแหน่งที่ต้องการ เพิ่ม หรือลบ ค่าในตัวแปร array
howmany คือ จำนวนค่าที่ต้องการ ลบ ถ้าเป็น 0 หมายถึง ไม่มีการลบค่าในตัวแปร array
element1, ..., elementX คือ ค่าใหม่ที่ต้องการเพิ่มเข้าไปในตัวแปร array กำหนด หรือไม่ก็ได้

// ตัวอย่างการใช้งาน  กรณีเพิ่มค่าเข้าไปในตัวแปร array ตำแหน่งที่ 2
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseSplice=cars.splice(2,0,"Ford");
// มีผลให้ตัวแปร cars=["Toyota","Honda","Ford","Isuzu","Mitsubishi"];
// ไม่มีการคืนค่า เนื่องจากไม่มีการลบค่าใดๆ ออกจากตัวแปร
// ทำให้ carsUseSplice="";
// ตัวอย่างการใช้งาน  กรณีลบ หนึ่งค่าออกจากตำแหน่งที่ 2 และเพิ่มค่าใหม่เข้าไปในตำแหน่งที่ 2
// ลบ และ เพิ่ม
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseSplice=cars.splice(2,1,"Ford");
// มีผลให้ตัวแปร cars=["Toyota","Honda","Ford","Mitsubishi"];
// คืนค่า ตัวที่ลบ เท่ากับ Isuzu เนื่องจากมีการกำหนด จำนวนที่ต้องการลบ เท่ากับ 1
// ทำให้ carsUseSplice="Isuzu";
// ตัวอย่างการใช้งาน  กรณีลบ สองค่าออกจากตำแหน่งที่ 2 และเพิ่มค่าใหม่เข้าไปในตำแหน่งที่ 2
// ลบ และ เพิ่ม
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseSplice=cars.splice(2,2,"Ford");
// มีผลให้ตัวแปร cars=["Toyota","Honda","Ford"];
// คืนค่า ตัวที่ลบ เท่ากับ Isuzu,Mitsubishi เนื่องจากมีการกำหนด จำนวนที่ต้องการลบ เท่ากับ 2
// ทำให้ carsUseSplice="Isuzu,Mitsubishi";

 

ใช้ฟังก์ชัน toString()  ในการจัดการ กับตัวแปร array

toString() ใช้สำหรับ แปลงค่า array เป็น string และคืนค่าเป็นข้อความคั่นด้วยเครื่องหมาย (,)
โดยที่ตัวแปร array ไม่มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน  
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseToString=cars.toString();
// จะได้ carsUseToString="Toyota,Honda,Isuzu,Mitsubishi";
// โดยที่ตัวแปร cars ไม่มีการเปลี่ยนแปลง

 

 

ใช้ฟังก์ชัน valueOf()  ในการจัดการ กับตัวแปร array

valueOf() ใช้สำหรับ แสดงค่าทั้งหมดในตัวแปร array และคั่นแต่ละค่าด้วย comma (,)
โดยที่ตัวแปร array ไม่มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน  
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array  
  
var carsUseValueOf=cars.valueOf();
// จะได้ carsUseValueOf="Toyota,Honda,Isuzu,Mitsubishi";
// โดยที่ตัวแปร cars ไม่มีการเปลี่ยนแปลง

 

]]>Wed, 22 Sep 2010 08:00:00 +0700ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 1http://www.ninenik.com/ทบทวน_การจัดการกับ_ตัวแปร_array_ใน_javascript_ด้วย_ฟังก์ชัน_ตอนที่_1-342.htmlใช้ฟังก์ชัน concat()  ในการจัดการ กับตัวแปร array

concat() ใช้สำหรับสร้างตัวแปร array ใหม่จาก การรวมตัวแปร array ตั้งแต่ 2 ตัวขึ้นไป โดยที่ตัวแปร array ที่นำมา รวมกันนั้น ยังเหมือนเดิม ไม่มีการเปลี่ยนแปลงใดๆ
 

// ตัวอย่าง กรณ๊รวมตัวแปร array 2 ตัว
var alpha = ["a", "b", "c"];  
var numeric = [1, 2, 3];  

var alphaNumeric = alpha.concat(numeric);  
// สร้าง array ["a", "b", "c", 1, 2, 3]; โดยที่ array ชื่อ alpha และ numeric ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ alphaNumeric มีค่าเท่ากับ ["a", "b", "c", 1, 2, 3];
// ตัวอย่าง กรณ๊รวมตัวแปร array 3 ตัว
var num1 = [1, 2, 3];  
var num2 = [4, 5, 6];  
var num3 = [7, 8, 9];  

var nums = num1.concat(num2, num3);  
// สร้าง  array [1, 2, 3, 4, 5, 6, 7, 8, 9]; โดยที่ num1, num2, num3  ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ nums มีค่าเท่ากับ [1, 2, 3, 4, 5, 6, 7, 8, 9];
// ตัวอย่าง กรณีรวมตัวแปร array กับค่าที่ต้องการ
var alpha = ['a', 'b', 'c'];  
  
var alphaNumeric = alpha.concat(1, [2, 3]);  
// สร้าง array ["a", "b", "c", 1, 2, 3], โดยที่ alpha ไม่มีการเปลี่ยนแปลง
// ตัวแปร array ใหม่ที่ได้คือ ชื่อ alphaNumeric มีค่าเท่ากับ ["a", "b", "c", 1, 2, 3];

 

ใช้ฟังก์ชัน join()  ในการจัดการ กับตัวแปร array

join() ใช้สำหรับ การนำค่าแต่ละค่าในตัวแปร array มารวมกันเป็นข้อความ และส่งค่ากลับเป็นข้อความ ที่มีตัวคั่นค่าตัวแปรแต่ละค่า ตามที่กำหนด ถ้าไม่ได้กำหนด จะเป็นเครื่องหมาย comma (,) ให้โดยอัตโนมัติ
 

//ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseJoin=cars.join(); // ไม่ได้กำหนดตัวคั่นค่าตัวแปร หรือตัวแบ่ง
// ผลที่ได้คือ เป็นการนำค่าในตัวแปร array ชื่อ cars มารวมกัน หรือเรียงต่อกัน เป็นข้อความ
// ใหม่ และคั่นแต่ละค่าด้วย comma (,)
// จะได้ตัวแปร carsUseJoin เป็น ตัวแปรประเภท String 
// มีค่าเท่ากับ carsUseJoin="Toyota,Honda,Isuzu";
// ตัวอย่าง กรณีกำหนดค่าตัวแบ่ง
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseJoin=cars.join(" and "); // กำหนดตัวคั่นค่าตัวแปร หรือตัวแบ่ง
// ผลที่ได้คือ เป็นการนำค่าในตัวแปร array ชื่อ cars มารวมกัน หรือเรียงต่อกัน เป็นข้อความ
// ใหม่ และคั่นแต่ละค่าด้วย and
// จะได้ตัวแปร carsUseJoin เป็น ตัวแปรประเภท String 
// มีค่าเท่ากับ carsUseJoin="Toyota and Honda and Isuzu";

 

ใช้ฟังก์ชัน pop()  ในการจัดการ กับตัวแปร array

pop() ใช้สำหรับ ลบค่าตัวสุดท้ายออกจากตัวแปร array แล้วคืนค่านั้นกลับมา
มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePop=cars.pop(); // ลบค่าตัวสุดท้าย Isuzu ออกจากตัวแปร array ชื่อ cars
// มีผลให้ตัวแปร array cars=["Toyota","Honda"]; และ length ลดเหลือ 2 
// จากนั้นคืนค่าที่ลบออก มา แล้วกำหนดไว้ที่ตัวแปร carsUsePop
// จะได้ตัวแปร carsUsePop="Isuzu";


 

ใช้ฟังก์ชัน push()  ในการจัดการ กับตัวแปร array

push() ใช้สำหรับ เพิ่มค่าเข้าไปในตัวแปร array โดยต่อท้าย จากค่าเดิม แล้วคืนค่าจำนวนรายการทั้งหมด ของตัวแปร array กลับมา มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน กรณีเพิ่มเพียงค่าเดียว
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePush=cars.push("Mitsubishi"); // เพิ่มค่า Mitsubishi เข้าไปต่อท้ายค่าตัวแปร array เดิม 
// มีผลให้ตัวแปร array cars=["Toyota","Honda","Isuzu","Mitsubishi"]; 
// จากนั้นคืนค่าจำนวนรายการทั้งหมด ของตัวแปร array cars แล้วกำหนดไว้ที่ตัวแปร carsUsePush
// จะได้ตัวแปร carsUsePush=4;
// ตัวอย่างการใช้งาน กรณีเพิ่มหลายค่า
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUsePush=cars.push("Mitsubishi","Ford"); 
// เพิ่มค่า Mitsubishi และ Ford เข้าไปต่อท้ายค่าตัวแปร array เดิม 
// มีผลให้ตัวแปร array cars=["Toyota","Honda","Isuzu","Mitsubishi","Ford"]; และ length เพิ่มขั้น
// จากนั้นคืนค่าจำนวนรายการทั้งหมด ของตัวแปร array cars แล้วกำหนดไว้ที่ตัวแปร carsUsePush
// จะได้ตัวแปร carsUsePush=5;

 

ใช้ฟังก์ชัน reverse()  ในการจัดการ กับตัวแปร array

reverse() ใช้สำหรับ กลับลำดับค่าของตัวแปร array เช่น ค่าจากเดิม คือ 1 2 3 4 เมื่อใช้ reverse() ลำดับค่าใหม่จะเท่ากับ 4 3 2 1 มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน 
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array
// ค่าเดิม 
// cars[0]="Toyota";
// cars[1]="Honda";
// cars[2]="Isuzu";
// cars[3]="Mitsubishi";

var carsUseReverse=cars.reverse(); // ทำการกลับลำดับรายการตัวแปร array
// มีผลให้ตัวแปร array cars=["Mitsubishi","Isuzu","Honda","Toyota"]; 
// ค่าใหม่
// cars[0]="Mitsubishi";
// cars[1]="Isuzu";
// cars[2]="Honda";
// cars[3]="Toyota";
// จากนั้นนำตัวแปร array ที่ทำการกลับลำดับรายการไปเก็บไว้ในตัวแปร carsUseReverse
// จะได้ตัวแปร carsUseReverse=["Mitsubishi","Isuzu","Honda","Toyota"];  ซึ่งเท่ากับตัวแปร cars

 

 

ใช้ฟังก์ชัน shift()  ในการจัดการ กับตัวแปร array

shift() ใช้สำหรับ ลบค่าตัวแรกออกจากตัวแปร array แล้วคืนค่านั้นกลับมา
มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu"];  // ตัวแปร array

var carsUseShift=cars.shift(); // ลบค่าตัวแรก Toyota ออกจากตัวแปร array ชื่อ cars
// มีผลให้ตัวแปร array cars=["Honda","Isuzu"];  และ length ลดเหลือ 2 
// จากนั้นคืนค่าที่ลบออก มา แล้วกำหนดไว้ที่ตัวแปร carsUseShift
// จะได้ตัวแปร carsUseShift="Toyota";

 

 

ใช้ฟังก์ชัน slice()  ในการจัดการ กับตัวแปร array

slice(start,end) ใช้สำหรับ ดึงค่าจากตำแหน่งที่ต้องการในตัวแปร array แล้วคืนค่านั้นกลับมา
ไม่มีผลให้ตัวแปร array มีการเปลี่ยนแปลง
start คือ ตำแหน่งเริ่มต้นที่ต้องการดึงค่าจากตัวแปร array เริ่มต้นเท่ากับ 0 สามารถเป็นค่าติดลบได้
end คือ ตำแหน่งสุดท้ายที่ต้องการ ไม่อิงตาม key นั้นหมายถึงนับตัวแรกเท่ากับ 1 ต่างจาก start ตัวแรกเริ่มจาก 0 ถ้าไม่กำหนด end จะเอาตั้งแต่ตำแหน่ง start ไปจนถึงตัวสุดท้าย
 

// ตัวอย่างการใช้งาน
var cars=["Toyota","Honda","Isuzu","Mitsubishi"];  // ตัวแปร array

// กรณีดึงตำแหน่ง ที่ 2 กับ 3 ("Honda","Isuzu")
// แนวทางการกำหนด start และ end ถ้าต้องการตัวที่ 2 กับ 3
// กำหนด 2,3 แล้วลดค่าตัวแรกลง 1 ค่า จะได้ค่าที่ใช้กำหนดจริงเท่ากับ 1,3
var carsUseSlice=cars.slice(1,3); 
// จะได้ carsUseSlice=["Honda","Isuzu"]

// กรณีดึงตำแหน่งที่ 2 ไปจนถึงตำแหน่งสุดท้าย ไมต้องกำหนด end กำหนด
var carsUseSlice=cars.slice(1); 
// จะได้ carsUseSlice=["Honda","Isuzu","Mitsubishi"];

// กรณีดึงตำแหน่งเริ่มจาก 2 ตัวหลัง 
var carsUseSlice=cars.slice(-2); 
// จะได้ carsUseSlice=["Isuzu","Mitsubishi"];

 

]]>Tue, 21 Sep 2010 03:02:34 +0700ทบทวนการ สร้าง และใช้งาน ตัวแปร array ใน javascripthttp://www.ninenik.com/ทบทวนการ_สร้าง_และใช้งาน_ตัวแปร_array_ใน_javascript-341.htmlตัวแปร array ใช้สำหรับเก็บค่าหลายค่า ไว้ในตัวแปรเดียว ตัวอย่าง
 

// กำหนดตัวแปรสำหรับแต่ละตัว กรณีไม่ได้กำหนดเป็น แบบ array
var cars1="Toyota";
var cars2="Honda";
var cars3="Isuzu";

ถ้าเราต้องการเก็บรายการ brand ของรถยนต์แต่ละคัน เป็นตัวแปร array สามารถกำหนดได้ 3 รูปแบบ ต่อไปนี้

 

// การกำหนดแบบ array แบบที่ 1 กรณีทั่วไป
var cars=new Array(3); // 3 คือจำนวนค่าที่ต้องการกำหนด ในที่นี้ 3 รายการ
cars[0]="Toyota";
cars[1]="Honda";
cars[2]="Isuzu";
// การกำหนดแบบ array แบบที่ 2 กรณีการกำหนดแบบย่อ
var cars=new Array("Toyota","Honda","Isuzu");
// การกำหนดแบบ array แบบที่ 3
var cars=["Toyota","Honda","Isuzu"];

* กรณีเรากำหนดค่าภายในตัวแปรเป็นตัวเลข หรือ true/false  ชนิดของตัวแปรที่ได้จะเป็น ตัวเลย number หรือ
boolean โดยจะไม่เป็น ตัวแปรประเภท String
 

การเรียกใช้งาน
สามารถใช้งานตัวแปร array ดังนี้
 

alert(cars[0]); // ตัวแปร array cars ตัวแรก ค่าที่ได้ คือ Toyota โดย index เริ่มต้นที่เลข 0 
alert(cars[1]) // ตัวแปร array cars ตัวที่สอง ค่าที่ได้ คือ Honda โดย index เท่ากับ 1 
....... เป็นต้น.........

การกำหนดค่าใหม่ หรือเปลี่ยนแปลงค่าตัวแปร array ที่สร้างมาแล้ว

สามารถกำหนดเข้าไปโดยตรง ตัวอย่าง
ต้องการเปลี่ยนต่าตัวแปร array cars ตัวที่ 3 ค่าเดิมคือ Isuzu
 

cars[2]="Isuzu"; // ค่าเดิม
// สามารถกำหนดค่าใหม่เข้าไปแทนที่ได้เลย เป็น
cars[2]="Mitsubishi"; // กำหนดค่าใหม่

การหาจำนวน รายการทั้งหมดที่มีในตัวแปร array
 

alert(cars.length); // จำนวนรายการทั้งหมดในตัวแปร array ชื่อ cars มี 3

การกำหนดค่า จำนวนรายการทั้งหมดใน array
 

cars.length=4; // จากเดิมมี 3 เราสามารถกำหนดค่าเพิ่มเป็น 4 โดยค่าของรายการที่เพิ่ม จะเป็นค่าว่าง
// นั้นค่าจะได้ตัวแปร cars[3] มีค่าเท่ากับ ค่าว่าง

 

]]>Mon, 20 Sep 2010 19:54:03 +0700เริ่มใช้ และ ประยุกต์ CKEditor ให้ใช้งานง่าย เต็มความสามารถ http://www.ninenik.com/เริ่มใช้_และ_ประยุกต์_CKEditor_ให้ใช้งานง่าย_เต็มความสามารถ_-315.htmlดูเหมือน CKEditor กำลังเป็นที่สนใจ และได้รับความนิยม สำหรับใครที่ต้องการใช้งาน คุณสมบัติที่ว่าดี ของ CKEditor มาใช้งาน ลองนำรูปแบบการใช้งาน ที่จะได้แนะนำต่อไป ไปใช้งาน อาจช่วยให้การใช้งาน CKEditor เป็นไปอย่างสะดวก

ดาวโหลด เวอร์ชันล่าสุดได้ที่ http://ckeditor.com/download แตกไฟล์ แล้ว ก็อบปี้โฟลเดอร์ ckeditor ไว้ใช้งาน
ตัวอย่าง

 


   

สร้างไฟล์ cke_config.js สำหรับไว้กำหนดคุณสมบัติของ CKEditor  (รูปแบบ Toolbar คลิก) แทรกโค้ดามด้านล่าง

 

// JavaScript Document
var cke_config={
	skin:'kama', // kama | office2003 | v2
	language:'th', // th / en and more.....
	extraPlugins :'uicolor',// เรียกใช้ plugin ให้สามารถแสดง UIColor Toolbar ได้
	uiColor :'#9C3', // กำหนดสีของ ckeditor
	extraPlugins : 'autogrow', // เรียกใช้ plugin ให้สามารถขยายขนาดความสูงตามเนื้อหาข้อมูล
	autoGrow_maxHeight : 400,	 // กำหนดความสูงตามเนื้อหาสูงสุด ถ้าเนื้อหาสูงกว่า จะแสดง scrollbar
	enterMode: 2,// กดปุ่ม Enter -- 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
	shiftEnterMode	:1,// กดปุ่ม Shift กับ Enter พร้อมกัน 1=แทรกแท็ก <p> 2=แทรก <br> 3=แทรก <div>
	height :200, // กำหนดความสูง
	width :800, // กำหนดความกว้าง * การกำหนดความกว้างต้องให้เหมาะสมกับจำนวนของ Toolbar
/*		fullPage : true, // กำหนดให้สามารถแก้ไขแบบเโค้ดเต็ม คือมีแท็กตั้งแต่ <html> ถึง </html>*/
	toolbar : [
					['Source','-','Templates'],
					['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
					['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
					['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
					['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','UIColor']
				]
}

function InsertHTML(htmlValue,editorObj){// ฟังก์ขันสำหรับไว้แทรก HTML Code
	if(editorObj.mode=='wysiwyg'){
		editorObj.insertHtml(htmlValue);
	}else{
		alert( 'You must be on WYSIWYG mode!');
	}	
}
function SetContents(htmlValue,editorObj){ // ฟังก์ชันสำหรับแทนที่ข้อความทั้งหมด
	editorObj.setData(htmlValue);
}
function GetContents(editorObj){// ฟังก์ชันสำหรับดึงค่ามาใช้งาน
	return editorObj.getData();
}
function ExecuteCommand(commandName,editorObj){// ฟังก์ชันสำหรับเรียกใช้ คำสั่งใน CKEditor
	if(editorObj.mode=='wysiwyg'){
		editorObj.execCommand(commandName);
	}else{
		alert( 'You must be on WYSIWYG mode!');
	}
}

ฟังก์ฃัน InsertHTML สามารถประยุกต์ใช้งานกรณีใช้กับเว็บบอร์ด และมีการอ้างอิง ความคิดเห็น
ฟังก์ชัน SetContents สามารถประยุกต์ใช้ Reset ค่าใน CKEditor ให้ว่างหรือล้างค่าได้
ฟังก์ชัน GetContents สามารถประยุกต์ไว้สำหรับเช็คว่า CKEditor มีค่าว่าหรือไม่ก่อน Submit
ฟังก์ชัน ExecuteCommand สามารถไว้ใช้งานเพิ่มเรียกใช้คำสั่ง ของ CKEditor จากภายนอก เช่น
ExecuteCommand('link',editorObj) เป็นต้น

ตัวอย่าง การเรียกใช้งาน
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
</head>

<body>

<p>
<textarea id="editor1" name="editor1">
&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. 
You are using &lt;a href="http://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;
</textarea>
</p>
 
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="cke_config.js"></script>		
<script type="text/javascript">
var editorObj=CKEDITOR.replace( 'editor1',cke_config); 
// editor1 ชื่อ id ของ textarea ที่ต้องการใช้งาน ckeditor
// var editorObj=CKEDITOR.replace( 'editor1',cke_config,dataValue);  // กรณีดึงข้อมูลมาแก้ไข
</script>			
<br />



<button onclick="InsertHTML('<p>แทรก  HTML</p>',editorObj);">แทรก  HTML</button>
&nbsp;
<button onclick="SetContents('<p>แทนที่ข้อความทั้งหมด</p>',editorObj);">แทนที่ข้อความทั้งหมด</button>
&nbsp;
<button onclick="alert(GetContents(editorObj));">แสดงข้อมูลใน CKEditor</button>

</body>
</html>

ส่วนการใช้งานกรณี ร่วมกับ การอัพโหลดไฟล์ ,  jQuery และ Ajax จะนำเสนอในโอกาสต่อไป
* การอัพโหลดโดยใฃ้ CKfinder ดูจะใช้ได้ดี แต่ยังอยากใช้กับ filemanager ของ FCKeditor อยู่ รอก่อนว่า จะมีใครพัฒนาให้ filemanager ใช้งานกับ CKEditor

]]>Sat, 21 Aug 2010 19:12:13 +0700การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog http://www.ninenik.com/การสร้าง_popup_ที่แตกต่าง_ด้วยวิธี_showModalDialog__-314.htmlการสร้าง หน้า window ใหม่ หรือ popup window ที่พิเศษ กว่า popup ที่ใช้ฟังก์ชัน window.open  ด้วยการใช้วิธีที่เรียกว่า showModalDialog 
dialog หรือ popup ทีสร้างจากวิธีแบบ showModalDialog  มีประโยชน์สำหรับการที่จะทำให้ผู้ใช้ให้ความสนใจต่อเนื้อหาในหน้าที่แสดง ซึ่งยังสามารถใช้แสดงข้อความที่มีความสำคัญที่ผู้ใช้ควรทำตามคำแนะนำหรือ ได้รับทราบเป็นข้อมูลไว้ ก่อนที่ดำเนินการอื่นๆ ต่อไป

ตัวอย่าง


วิธีสร้าง popup แบบ window.showModalDialog จะมีความคล้ายกับ วิธีการใช้งาน window.open คือการรับค่าชื่อไฟล์ หรือ url ที่ต้องการ แล้วเปิดเป็นหน้าต่างใหม่
ความแตกต่าง
window.showModalDialog จะสร้างหน้าต่างใหม่เสมอ แม้ว่าบราวเซอร์จะกำหนดให้เปิดหน้าต่างใหม่แบบ Tab ส่วน window.open จะขึ้นอยู่กับการตั้งค่าของ บราวเซอร์
และข้อแตกต่างที่สำคัญ คือ ผู้ใช้ต้องทำการปิด popup นั้นลงก่อน จึงจะใช้งานหน้าเว็บที่เปิด popup นั้นขึ้นมาได้ เป็นการโฟกัสผู้ใช้ไปยัง popup นั้นไปในตัว

การวิธีการข้างต้นผู้ใช้ยังสามารถใช้งานหน้าต่างอื่น หรือโปรแกรมอื่นได้ตามปกติ
 


ตัวอย่างโค้ด  (ทดสอบทำงานได้ดีใน IE และ Firefox ส่วนบราวเซอร์อื่น ทำงานคล้าย window.open)

 

<button onclick="popupModal('sample_data.php',500,200);">Sample Popup</button>

<script type="text/javascript">
function popupModal(url,width,height){
	var myDate=new Date();
	var setUniqe=myDate.getTime(); // ใช้สำหรับ ป้องกันการ cache กรณีกำลังทดสอบ
	
	var diaxFeature="dialogWidth:"+width+"px;"
	+"dialogHeight:"+height+"px;"
/*	+"dialogLeft:"+width+"px;"
	+"dialogTop:"+width+"px;"		*/
	+"center:yes;"
	+"edge:raised;" // sunken | raised 
	+"resizable:no;"
	+"status:no;"
	+"scroll:no;";	
	window.showModalDialog(url+"?"+setUniqe,"", diaxFeature);
	// กรณีไม่ใช้ setUniqe
	//  window.showModalDialog(url,"", diaxFeature); 
}
</script>

 

]]>Fri, 20 Aug 2010 22:51:54 +0700javascript เรียกฟังก์ชัน ใน parent จาก iframehttp://www.ninenik.com/javascript_เรียกฟังก์ชัน_ใน_parent_จาก_iframe-305.htmlทบทวนความรู้ การเรียกใช้งาน ฟังก์ชัน ใน parent จาก iframe  ตัวอย่างต่อไปนี้ เป็น
บันทึกช่วยจำ กรณีต้องการเรียกใช้งาน javascript ฟังก์ชัน ใน parent จาก iframe เงื่อนไข คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน iframe โดยต้องการเรียกใช้งาน ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe สามารถเป็นแนวทางได้ดังนี้

 

parent.callMe();
// parent.ชื่อฟังก์ชันที่เรียกใช้งาน
// parent.callMe();

ตัวอย่างการใช้งานจากไฟล์ใน iframe
 

<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button>

หรือ
 

<script type="text/javascript">
parent.callMe();
</script>

ตัวอย่างโค้ดไฟล์หลัก main_file_with_iframe.php
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>คือในไฟล์หลัก มี javascript ฟังก์ชัน อยู่ และมีการใช้งาน ifram</title>
<style type="text/css">
body {
	background-color: #333;
}
</style>
</head>

<body>

<button type="button" onclick="callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์หลัก</button>
<br />
<br />
<iframe name="myiframe" src="my_iframe.php" width="450" height="350" frameborder="1">
</iframe>
<script type="text/javascript">
function callMe(){
	alert("Test");	
}
</script>
</body>
</html>

ตัวอย่างโค้ดไฟล์ iframe   my_iframe.php
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ฟังก์ชัน ในไฟล์หลัก จากไฟล์ iframe</title>
</head>

<body>


<button type="button" onclick="parent.callMe();">คลิกเพื่อเรียกฟังก์ชัน callMe() จากไฟล์ iframe</button>


</body>
</html>

ตัวอย่าง
http://www.ninenik.com/demo/main_file_with_iframe.php
 

]]>Sat, 31 Jul 2010 21:15:47 +0700สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่นhttp://www.ninenik.com/สั่ง_print_preview_ใน_IE_และ_ประยุกต์กับ_บราวเซอร์_อื่น-304.htmlตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ

โค้ดตัวอย่าง
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>print preview</title>

<?php if($_GET['print_preview']==1){ ?>
<style type="text/css" media="all">
button#printPreview{
	display:none;	
}
body{
	padding:10px;	
}
</style>
<?php }else{ ?>
<style type="text/css" media="print">
button#printPreview{
	display:none;	
}
</style>
<?php } ?>
</head>

<body>

<p>ตัวอย่าง ต่อไปนี้เป็นโค้ดสำหรับการสั่ง print preview ซึ่งทำงานได้เฉพาะ IE เท่านั้น แต่เราสามารถประยุกต์<br />
เพิ่มเติม ตามตัวอย่างโค้ด ด้านล่าง สำหรับกรณี browser อื่นๆ </p>

<script type="text/javascript">
function printPreview() {
	if(navigator.appName == "Microsoft Internet Explorer"){
	if(!document._wb){
		var obj="<object id='_wb' width='0' height='0' ";
		obj+=" classid='CLSID:8856F961-340A-11D0-A96B-00C04FD705A2'></object>";
		document.body.insertAdjacentHTML(
			"beforeEnd",obj
		); 
	}
	_wb.ExecWB(7,1)
	}else{
		var windowWidth=850;
		var windowHeight=550;
		var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;    
   		var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
		var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
		feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
		window.open(window.location+'?print_preview=1','welcome',feature);
	}
}
</script>

<button id="printPreview" onclick="printPreview()">Print Preview</button>

</body>
</html>

ตัวอย่าง

http://www.ninenik.com/demo/print_preview.php

อย่างไรก็ตาม IE ที่มีระบบ security สูงก็อาจไม่สามารถใช้งานได้ ให้ปรับฟังก์ชันเป็น

<script type="text/javascript">
function printPreview() {
		var windowWidth=850;
		var windowHeight=550;
		var myleft=(screen.width)?(screen.width-windowWidth)*0.5:100;    
   		var mytop=(screen.height)?(screen.height-windowHeight)*0.5:100;
		var feature='left='+myleft+',top='+eval(mytop-50)+',width='+windowWidth+',height='+windowHeight+',';
		feature+='menubar=yes,status=no,location=no,toolbar=no,scrollbars=yes';
		window.open(window.location+'?print_preview=1','welcome',feature);

}
</script>

เพื่อใฃ้ในรูปแบบธรรมดา และรองรับทุกบราวเซอร์ โดยสามารถกำหนดรูปแบบที่ต้องการแสดงเมื่อทำการพิมพ์
ด้วยการเพิ่ม css style ในส่วนของ โค้ดตามตำแน่งด้านล่าง

<?php if($_GET['print_preview']==1){// กำหนดรูปแบบการพิมพ์กรณี preview popup หน้าใหม่ ?>
<style type="text/css" media="all">
button#printPreview{
	display:none;	
}
body{
	padding:10px;	
}
</style>
<?php }else{ // กำหนดรูปแบบการพิมพ์กรณี preview ผ่าน บราวเซอร์ ?>
<style type="text/css" media="print">
button#printPreview{
	display:none;	
}
</style>
<?php } ?>

 

 

]]>Thu, 29 Jul 2010 22:03:31 +0700ทบทวน วันที่ date object ใน javascript http://www.ninenik.com/ทบทวน_วันที่_date_object__ใน_javascript_-293.htmlการดึงค่ามาใช้งาน

var myDate=new Date(2010,6,1,17,30,30,500);
myDate.getFullYear() = 2010  
// แสดงปี ค.ศ. 4 หลัก

myDate.getYear() = 110  
// ไม่นิยมเพราะจะขึ้นกับ บราวเซอร์ ถ้าใน IE จะเท่ากับ 2010 ใน FF เท่ากับ 2010-1900

myDate.getMonth() = 6 
// เดือน 0-11

myDate.getDate() = 1 
// วันที่ 1-31

myDate.getDay() = 4 
// วัน 0=Sunday, 1=Monday

myDate.getHours() = 17 
// ชั่วโมง 0-23

myDate.getMinutes() = 30 
// นาที 0-59

myDate.getSeconds() = 30  
// วินาที 0-59

myDate.getMilliseconds() = 500  
// มิลลิวินาที 0-999

myDate.getTime() = 1277980230500
// เวลาทั้งหมด เป็น มิลลิวินาที ได้จาก เวลา timestamp + millisecond , 1277980230 + 500

myDate.getTimezoneOffset() = -420
// ความต่างของเวลามาตรฐานโลกตามนาฬิกาที่กรีนิช ในอังกฤษ (คำย่อคือ GMT) กับเวลาที่บ้านเรา
// หน่วยเป็น นาที จากตัวอย่าง -420 ได้จาก 60 นาที คูณด้วย 7 ชม.
// ค่าติดลลบแสดงว่าเร็วกว่าเวลาที่ ที่กรีนิช ในอังกฤษ   420/60 =7 ชม.

myDate.getUTCFullYear() = 2010
// แสดงปี ค.ศ. 4 หลัก ที่กรีนิช ในอังกฤษ

myDate.getUTCMonth() = 6
// เดือน 0-11 ที่กรีนิช ในอังกฤษ

myDate.getUTCDate() = 1
// วันที่ 1-31 ที่กรีนิช ในอังกฤษ

myDate.getUTCDay() = 4
// วัน 0=Sunday, 1=Monday ที่กรีนิช ในอังกฤษ

myDate.getUTCHours() = 10
// ชั่วโมง 0-23 ที่กรีนิช ในอังกฤษ

myDate.getUTCMinutes() = 30
// นาที 0-59 ที่กรีนิช ในอังกฤษ

myDate.getUTCSeconds() = 30
// วินาที 0-59 ที่กรีนิช ในอังกฤษ

myDate.getUTCMilliseconds() = 500
// มิลลิวินาที 0-999 ที่กรีนิช ในอังกฤษ

การแปลงค่า

myDate.toGMTString() = Thu, 01 Jul 2010 10:30:30 GMT
// แปลงวันที่เป็นเวลาที่กรีนิช ในอังกฤษ เป็นแบบข้อความ

myDate.toLocaleString() = Thursday, July 01, 2010 5:30:30 PM
// แปลงวันที่เป็นเวลาที่บ้านเรา

myDate.toLocaleDateString() = Thursday, July 01, 2010
// แปลงวันที่เป็นเวลาที่บ้านเรา ไม่เอาเวลา

myDate.toLocaleTimeString() = 5:30:30 PM
// แปลงวันที่เป็นเวลาที่บ้านเรา ไม่เอาวันที่

myDate.toString() = Thu Jul 01 2010 17:30:30 GMT+0700 (SE Asia Standard Time)
// แปลงวันที่เป็นเวลาที่บ้านเรา เป็นแบบ universal time

myDate.toUTCString() = Thu, 01 Jul 2010 10:30:30 GMT
// แปลงวันที่เป็นเวลาที่กรีนิช ในอังกฤษ เป็นแบบข้อความ

myDate.valueOf() = 1277980230500
// แปลงวันที่เป็นเวลาในหน่วย มิลลิวินาที ได้จาก เวลา timestamp + millisecond , 1277980230 + 500

การตั้งค่าเวลา

// สำหรับการตั้งค่าจะใช้คำสั่งคล้ายกับคำสั่งในการดึงค่ามาใช้ แต่เปลี่บนจาก get เป็น set และเพิ่มค่าพารามิเตอร์เข้าไปในวงเล็บ
// เช่น
myDate.getFullYear()
// เป็น
myDate.setFullYear(2010,6,1)

// หรือ
myDate.getHours()
// เป็น
myDate.setHours(17,30,30,500)

 

]]>Mon, 05 Jul 2010 11:21:07 +0700สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดายhttp://www.ninenik.com/สร้าง_comment_ด้วย_social_plugins_ใน_facebook_api_อย่างง่ายดาย-291.htmlดูตัวอย่าง และทดสอบการใช้ตามลิ้งค์ด้านล่าง
http://developers.facebook.com/docs/reference/plugins/comments

ใครที่ต้องการสร้างระบบ comment หรือการแสดงความคิดเห็นในเว็บไซต์ของตัวเอง โดยไม่ต้องสร้างฐานข้อมูล สามารถเข้าไปใช้บริการ facebook api ที่ชื่อ comment ตามขั้นตอนต่อไปนี้

1.ล็อกอินเข้าสู่ระบบ facebook ปกติ ถ้ายังไม่ได้เป็นสมาชิก
http://www.facebook.com/login.php
ต้องทำการสมัครสมาชิก facebook ก่อนถึงจะใช้งานได้

2.เข้าไปที่หน้า http://developers.facebook.com/setup/

กรอกรายละเอียดดังนี้
site name:--- กรอกเป็นชื่อ domain ตัวอย่าง ninenik
site url:------  กรอก http://www.youdomain.com/  ตัวอย่าง  http://www.ninenik.com/
ควรกรอก / หลังชื่อโดเมนปัองกันปัญหา การแจ้งเตือน Invalid url
locale:-------  เลือกภาษาไทย หรือภาษาอื่นตามต้องการ

3.คลิกปุ่ม Create Application ถ้าไม่เกิดข้อผิดพลาด ระบบจะสร้าง Application  ซึ่งมีรายละเอียด
ดังรูปด้านล่าง ให้ทำการบันทึก ข้อมูลไว้ใช้งาน โดยเฉพาะ app id และ app secret


4.แทนที่ แท็กเปิด <html ...  ในไฟล์ที่ต้องการ แสดง comment ด้วย
 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://www.facebook.com/2008/fbml">

แทนที่ตำแหน่งตรงแถบสีฟ้าอ่อน ตามรูปด้านล่าง


5.แทรกโค้ด comment ด้านล่างในไฟล์ตามข้อ 4. ในตำแหน่งที่ต้องการแสดง
 

<fb:comments numposts="10"  width="800"></fb:comments>
<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({appId: 'ใส่หมายเลข app id ตรงนี้', status: true, cookie: true,
                 xfbml: true});
      };
      (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
          '//connect.facebook.net/th_TH/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

6.ปรับแต่งคุณสมบัติของ comment ตามต้องการเช่น
กำหนดความกว้าง
width="800" 
 

<fb:comments width="800"></fb:comments>

กำหนดจำนวนแถวความคิดเห็นที่แสดง
numposts="10" 
 

<fb:comments numposts="10"  width="800"></fb:comments>

กำหนด uniqe id กรณีใฃ้ mod rewrite และไม่สามารถโพสข้อความได้
จำเป็นต้องกำหนด uniqe id โดยใช้ php เข้ารหัส ด้วยคำสั่ง

<?=md5($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])?>

ตัวอย่างผลลัพธ์ที่ได้ xid="91b95134d257f54425eb38b73d3df4b7"
 

<fb:comments xid="<?=md5($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"])?>"   numposts="10"  width="800"></fb:comments>

บรรทัดข้างล่างเป็นส่วน เพิ่มเติม แต่ไม่จำเป็น
นอกจากนี้ยังสามารถกำหนด meta tags ในส่วนของ <header> เพื่อให้ facebook นำค่าไปใช้งาน ตัวอย่าง
 

<meta property="og:title" content="รู้จักกับ Ajax Events ใน jQuery"/>
<meta property="og:site_name" content="ninenik.com"/>
<meta property="og:image" content="http://www.ninenik.com/mages/logo_01_Sat.gif"/>

og:title ใช้กำหนดไดเติลที่ต้องการนำไปใฃ้ใน facebook ปกติ facebook จะดึงจาก tag title
og:site_name ใช้กำหนด ชื่อเว็บไซต์
og:image ใฃ้กำหนดรูปภาพ ปกติ facebook จะดึงจากรูปใน tag img ที่แสดงหน้านั้น

og:title ถ้าใช้ php สามารถดึงจากฐานข้อมูล หรือตัวแปรมาแสดง ตัวอย่าง
 

<meta property="og:title" content="<?=$yourtitle?>"/>

 

]]>Sat, 19 Jun 2010 01:40:15 +0700การหา ขนาด ความกว้าง ความสูงของ รูปภาพ ด้วย javascripthttp://www.ninenik.com/การหา_ขนาด_ความกว้าง_ความสูงของ_รูปภาพ_ด้วย_javascript-287.htmlปกติเราสามารถหาขนาดความกว้าง ความสูง ของรูปภาพที่แสดงอยู่ด้วย javascript ได้โดยง่าย ดังนี้
ตัวอย่าง HTML Code
 

<img id="myimg" src="http://www.ninenik.com/images/logo_01_Wed.gif" />

Javascript Code
 

<script type="text/javascript">
var jsimg=document.getElementById('myimg');
var jsimg_width=jsimg.width; // หาความกว้าง
var jsimg_height=jsimg.height; // หาความสูง
var jsimg_fileSize=jsimg.fileSize; // หาขนาดไฟล์ กรณ๊ IE เท่านั้น
</script>

ข้างต้นเป็นกรณีที่ไฟล์ รูปภาพนั้นแสดงแล้ว ส่วนกรณี หา ความกว้าง ความสูง ของรูปภาพ กรณีที่ยังไม่แสดง หรือทราบเฉพาะ url ของรูปภาพ สามารถทำได้ดังนี้
 

<script type="text/javascript">
var img_new=new Image();
img_new.src="http://www.ninenik.com/images/logo_01_Wed.gif";
img_new.onload=function(){
   var jsimg_width=img_new.width; // หาความกว้าง
   var jsimg_height=img_new.height; // หาความสูง
   var jsimg_fileSize=img_new.fileSize; // หาขนาดไฟล์ กรณ๊ IE เท่านั้น
}
</script>

 

]]>Wed, 02 Jun 2010 11:58:26 +0700