บทเรียน - เขียนโปรแกรม เบื้องต้น

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 12 HTML5 Form Elements ตอนที่ 1
Form Elements ตัวใหม่ๆ ของ HTML5 ซึ่งมีทั้งหมด 3 ตัวได้แก่

tag
คำอธิบาย
<details> มีไว้สำหรับแสดงลิสต์เมื่อป้อนข้อมูลลงช่อง input

<keygen> เป็นการสร้างความปลอดภัย โดยทำการส่าง private key เก็บไว้ และ ส่ง public key ไปที่ เซอร์เวอร์
<output> โชว์ผลการคำนวนทางคณิตศาสตร์


1. ตัวอย่างการใช้งานแท็ก <datalist>
<datalist> tag เป็น ถูกกำหนดให้ ใช้คู่กับ form เพื่อทำการ generator การเข้ารหัสให้กับ ข้อมูลใน form ใช้เพื่อระบบความปลอดภัยในกาส่งข้อมูลจาก Client ไปยัง Server เมื่อ form ถูก submit private key จะถูกจัดเก็บไว้ยัง เครื่องคอมพิวเตอร locally หรือเครื่อง Client และ public key จะถูกส่งไปยัง server
ตัวอย่างโค๊ด

<html>
<head>
<title>Thai-Programmer Web</title>
</head>
<body>
<input list="cars"/> // แท็ก input สำหรับป้อนข้อมูล ลิงค์กับ id ของ datalist ผ่านแอททริบิวท์ที่ชื่อ list
<datalist id="cars"> // แท็ก datalist ที่มี id ตรงกับ attribute ชื่อ list ของ input
  <option value="BMW"/> // แท็ก option คือตัวเลือกที่เป็นไปได้ของลิสต์
  <option value="Ford"/>
  <option value="Volvo"/>
</datalist>
</body>
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2719--}บทที่ 12 HTML5 Form Elements อิเลเม็นต์ตัวใหม่ในการสร้าง form ตอนที่ 2{--mlinkarticle--}

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 12 HTML5 Form Elements ตอนที่ 2
2.ตัวอย่างการใช้งานแท็ก <keygen>
<keygen> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ inpur element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี
"input" element จะใช้ list attribute เพื่อรวม datalist เข้าไปด้วยกัน tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น List option ของข้อมูล element นี้ จะใช้ร่วมกับ inpur element เพื่อให้เราเลือก input value ให้กับ element ตาม list ที่มี "input" element จะใช้ list attribute เพื่อรวม datalist เข้าไปด้วยกัน

Attributes Value รายละเอียด
autofocus disabled ทำให้ input field เกิด focused เมื่อ page load
challenge challenge กำหนดว่า กำหนดค่า value ของ keygen เมื่อกด submit
disabled disabled ทำการ Disables keytag field
form formname กำหนดชื่อ Form ตั้งแต่ 1 form เพื่อเข้ารหัส
keytype rsa / other กำหนด security algorithm ของ key เพื่อเข้ารหัส เช่น rsa เพื่อ generates การเข้ารหัส RSA key
name fieldname กำหนด unique name สำหรับ input element

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

<html>
<head>
<title>Thai-Programmer Web</title>
</head>
<body>
<form action="test.php" method="post">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</body> 
</html>


ผลลัพธ์คือ


3.ตัวอย่างการใช้งานแท็ก <output>
<output> tag เป็น ถูกกำหนดให้ทำหน้าที่เป็น output ของการแสดงข้อมูลของการคำนวน

Attributes Value รายละเอียด
for id กำหนด id ของ element ตั้งแต่ 1 elements ขึ้นไป ที่จะใช้ร่วมกับ output
form formid กำหนด id ของ form ตั้งแต่ 1 form ขึ้นไป ที่จะใช้ร่วมกับ output
name name กำหนด unique name สำหรับ input element


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

<!DOCTYPE HTML>
<html>
<head>
?<title>Thai-Programmer Web</title>
</head>
<body>
?<input name="N1" type="number"> +
?<input name="N2" type="number"> =
?<output name="result1" onforminput="value=N1.valueAsNumber + N2.valueAsNumber"></output>
?<br />
?<input name="N3" type="number"> -
?<input name="N4" type="number"> =
?<output name="result2" onforminput="value=N3.valueAsNumber - N4.valueAsNumber"></output>
?<br />
?<input name="N5" type="number"> *
?<input name="N6" type="number"> =
?<output name="result3" onforminput="value=N5.valueAsNumber * N6.valueAsNumber"></output>
?<br />
?<input name="N7" type="number"> /
?<input name="N8" type="number"> =
?<output name="result4" onforminput="value=N7.valueAsNumber / N8.valueAsNumber"></output>
</body> 
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2493--}บทที่ 12 HTML5 Form Elements อิเลเม็นต์ตัวใหม่ในการสร้าง form ตอนที่ 1{--mlinkarticle--}

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 13 HTML5 Web Worker
   Web Worker คือ JavaScript ที่สามารถทำให้ script ทำงานหลายๆอย่างพร้อมกันได้ ซึ่งทำให้ผู้ใช้งานเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงานเสร็จก่อน โดย web worker จะสั่งให้ JavaScript ทำงานโดยไม่กระทบกับงานอื่นๆ ด้วยเหตุนี้ ผู้พัฒนาจึงสามารถออกแบบหน้าเว็บไซต์ให้มีความซับซ้อนมากๆ ได้โดยไม่ต้องกังวลว่า เครื่องพีซีของผู้ใช้จะเกิดการสะดุดขณะที่มีการเลื่อนหน้าหรือเกิดการหน่วง ขณะที่กำลังมีการป้อนข้อมูลเหมือนอย่างเช่นในอดีต
   Web Worker ทำงานได้ดีกับทุก{--mlinkarticle=1849--}web browser{--mlinkarticle--} ยกเว้น {--mlinkarticle=2150--}IE  Internet Explorer {--mlinkarticle--}ต้องเป็นเวอร์ชั่น 10 ขึ้นไป
ตัวอย่างเช่น

<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>
<br><br>

<script>
var w;

function startWorker()
{if(typeof(Worker)!=="undefined")
  {  if(typeof(w)=="undefined")
  {  w=new Worker("demo_workers.js");  }
  w.onmessage = function (event) 
{    document.getElementById("result").innerHTML=event.data;    };  }
else
  {  document.getElementById("result").innerHTML="Sorry, your browser does not support Web Workers...";  }}
function stopWorker()
{ w.terminate();}
</script>
</body>
</html

คลิกเพื่อดูตัวอย่าง HTML5 Web Worker

คำอธิบาย
1.สำหรับตรวจสอบว่า web worker สามารถใช้กับบราวเซอร์ได้หรือไม่

if(typeof(Worker)!=="undefined")
  {  // Yes! Web worker support!
  // Some code.....  }
else
  {  // Sorry! No Web Worker support..  }

2.สำหรับสร้างไฟล์ web worker บน external JavaScript
เช่นในตัวอย่างนี้คือการสร้างสคริปต์ให้นับ โดยค่อยๆเพิ่มๆทีละ 1 ซึ่งสคริปต์นี้จะบรรจุอยู่ในเดียวกับ "demo_workers.js" file:
***ตัวอย่างนี้ไม่สามารถดใช้ได้หากไม่สร้าง ไฟล์ "demo_workers.js" file: เสียก่อน

var i=0;
function timedCount()
{i=i+1;
postMessage(i);
setTimeout("timedCount()",500);}
timedCount();

3.สำหรับสร้าง web worker object และรันโค๊ดบน "demo_workers.js":

if(typeof(w)=="undefined")
  {  w=new Worker("demo_workers.js");  } เราสามารถส่งและรับข้อความจาก web worker ด้วยการเพิ่ม "onmessage"
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;};

4.สำหรับสร้าง terminate web worker (ตัวหยุดการทำงานของสคริปต์ที่กำลังรันอยู่บนหน้าเว็บไซต์)

w.terminate();


ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 14 HTML5 Geolocation ตอนที่ 1
   geolocation คือการระบุพิกัด latitude, longitude ที่เราอยู่ด้วยคำสั่ง{--mlinkarticle=2187--}JavaScript {--mlinkarticle--} ที่มาใหม่กับ{--mlinkarticle=2479--} HTML5{--mlinkarticle--}
การระบุพิกัดนี้ ความแม่นยำขึ้นอยู่กับอุปกรณ์ที่ใช้เปิดเว็บไซต์ เช่น โทรศัพท์มือถืออย่าง {--mlinkarticle=2051--}Android{--mlinkarticle--}, iphone จะมี gps ให้ใช้ และ gps นี้จะช่วยให้ระบุพิกัดได้อย่างแม่นยำมากๆ
   Geolocation นั้นสนับสนุนแทบทุกบราวเซอร์ ไม่ว่าจะเป็น Internet Explorer 9, Firefox, Chrome, Safari และ Opera
1. ตัวอย่าง การแสดงพิกัดแบบ latitude และ longitude

<html>
<body>
<p id="demo">หาตำแหน่งของฉัน</p>
<button onclick="getLocation()">คลิก</button>
<script>

var x=document.getElementById("demo");

function getLocation()
  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition(showPosition);   }
  else{x.innerHTML="Geolocation is not supported by this browser.";}  }function showPosition(position)
  {  x.innerHTML="Latitude: " + position.coords.latitude +   "<br>Longitude: " + position.coords.longitude;      }

</script>
</body>
</html>

ผลลัพธ์คือ

***โค๊ด HTML5 ในการหาพิกัดตามตัวอย่างข้างบนนี้ สามารถใช้หาพิกัด latitude และ longitude โดยเมื่อเรียกแล้ว ในครั้งแรกเบราเซอร์จะถามถึงการอนุญาต share location ก็ให้เรากดแชร์ไป และก็รอสักพัก ข้อมูลต่างๆจะโผล่ขึ้นมาใต้คำว่าตำแหน่งของฉัน:

2.ตัวอย่าง ในกรณีที่เราต้องการแสดงค่า{--mlinkarticle=2246--}Error{--mlinkarticle--} หากไม่สามารถหาพิกัดได้ <โดยเติมโค๊ด function showError(error)>

<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>

var x=document.getElementById("demo");

function getLocation()
  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition(showPosition,showError);    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}  }
function showPosition(position)  {  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;     }

function showError(error)
  {  switch(error.code)     {    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;     case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;     case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;     case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."       break;    }  }

</script>
</body>
</html>

   จากตัวอย่างข้างบนเป็นโค๊ดสำหรับแสดงค่า error ซึ่งจะแสดงให้เห็นค่า error ก็ต่อเมื่อไม่สามารถหาพิกัดได้เท่านั้น

อ่านเพิ่มเติม
{--mlinkarticle=2720--}บทที่ 14 HTML5 Geolocation คือเทคโนโลยีที่ช่วยหาพิกัด ตอนที่ 2{--mlinkarticle--}

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 14 HTML5 Geolocation ตอนที่ 2

3.ตัวอย่าง การแสดงตำแหน่งด้วยแผนที่

<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()   {  if (navigator.geolocation)
    {    navigator.geolocation.getCurrentPosition(showPosition,showError);    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}  }

function showPosition(position)
  {  var latlon=position.coords.latitude+","+position.coords.longitude;
  var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
  +latlon+"&zoom=14&size=400x300&sensor=false";
  document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";  }

</script>
</body>
</html>

ผลลัพธ์คือ

   นอกจากนี้แล้วเรายังสามารถเพิ่มคุณสมบัติอื่นให้กับแผนที่ได้อีกด้วย เช่น จุดมารก์ในแผนที่ การซูมเข้า-ออก และการลากเพื่อดูแผนที่ใกล้เคียง เป็นต้น
ตัวอย่าง

<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var x=document.getElementById("demo");

function getLocation()
  {  if (navigator.geolocation)  
{    navigator.geolocation.getCurrentPosition(showPosition,showError);    }  else{x.innerHTML="Geolocation is not supported by this browser.";}  }

function showPosition(position)
  {  lat=position.coords.latitude;
  lon=position.coords.longitude;
  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';   mapholder.style.width='500px';

  var myOptions={  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});  }

</script>
</body>
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2502--}บทที่ 14 HTML5 Geolocation คือเทคโนโลยีที่ช่วยหาพิกัด ตอนที่ 1{--mlinkarticle--}

ข้อมูลอ้างอิง
http://www.w3schools.com

ให้เรตสมาชิก: 2 / 5

ดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 15 HTML5 Form Attributes ตอนที่ 1
   แอทติบิวใหม่ ใน HTML5 สำหรับปรับแต่ง แท็ก <form> และ <input>
 

  1.แอทติบิวสำหรับ แท็ก <form> 2.แอทติบิวสำหรับ แท็ก <input> บราวเซอร์ที่สนับสนุน
-autocomplete -autocomplete -IE, Firefox, Opera, Chrome, Safari
-novalidate - -Firefox, Opera, Chrome
  -autofocus -Firefox, Opera, Chrome, Safari
  -form -Firefox, Opera, Chrome, Safari
  -formaction -Firefox, Opera, Chrome, Safari
  -formenctype -Firefox, Opera, Chrome, Safari
  -formmethod -Firefox, Opera, Chrome, Safari
  -formnovalidate -Firefox, Opera, Chrome
  -formtarget -Firefox, Opera, Chrome, Safari
  -height and width -IE, Firefox, Opera, Chrome, Safari
  -list -Firefox, Opera, Chrome, Safari
  -min and max -Opera, Chrome
  -multiple -Firefox, Opera, Chrome, Safari
  -pattern (regexp) -Firefox, Opera, Chrome
  -placeholder -IE, Firefox, Opera, Chrome, Safari
  -required -Firefox, Opera, Chrome
  -step -Opera, Chrome

1. autocomplete Attribute คือ คุณลักษณะอัตโนมัติระบุว่าฟอร์มหรือช่องใส่ควรมีฟังก์ชั่นอัตโนมัติ เช่น เมื่อคุณ พิมพ์ตัวอักษรลงไปในช่องป้อนข้อมูล เบราเซอร์ก็จะแสดง คำที่เคยพิมพ์ เพื่อให้สะดวก จะได้ไม่ต้องพิมพ์มาก ซึ่งแอทติบิวนี้ใช้ได้ทั้งแท็ก <form> และ <input>

<html>
<body>

<form action="demo_form.asp" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

   ***ในกรณีที่เราเคยกรอกข้อมูลเเล้ว แอทติบิว autocomplete นี้จะช่วยให้เรากรอกข้อมูลได้สะดวกขึ้น เพราะเราไม่ต้องมาพิมพ์ใหม่ทั้งหมด ดังตัวอย่างข้างบน
   แต่ในบางครั้งเราก็มีความจำเป็น ที่ไม่อยากให้เบราเซอร์มันแสดง autocomplete ขึ้นมา เราสามารถปิดมันได้โดย  ใส่ attribute autocomplete="off" ให้กับ input หรือ form element เช่น

<input type="text" autocomplete="off" />

หรือ

<form autocomplete="off">


อ่านเพิ่มเติม
{--mlinkarticle=2721--}บทที่ 15 HTML5 Form Attributes ตอนที่ 2{--mlinkarticle--}

ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

บทที่ 15 HTML5 Form Attributes ตอนที่ 2
2. autofocus attribute คือ แอทติบิว ระบุว่าเขตข้อมูลโดยอัตโนมัติควรจะได้รับโฟกัสเมื่อเพจโหลด ซึ่งการทำงาน Cursor จะ Focus ไปที่ Input Field ที่กำหนดโดยอัติโนมัติ หลังจากโหลดหน้าเว็บ

<html>
<body>

<form action="demo_form.asp">
  First name:<input type="text" name="fname" autofocus><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

3. novalidate attribute คือ แอทติบิว ที่ใช้กำหนดค่าของข้อมูล โดยค่าของข้อมูลจะแสดงก็ต่อเมื่อ คลิก submit
ตัวอย่าง

<html>
<body>

<form action="demo_form.asp" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>

</body>
</html>

ผลลัพธ์คือ

4. form attribute คือ แอทติบิวที่ใช้กำหนดชื่อ Form ตั้งแต่ 1 form เพื่อเข้ารหัส
ตัวอย่าง

<html>
<body>

<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>

<p>ช่อง "Last name" ที่อยู่ด้านล่างแท็ก form นี้เป็นส่วนหนึ่งของแท็ก form</p>
Last name: <input type="text" name="lname" form="form1">

</body>
</html>

ผลลัพธ์คือ


อ่านเพิ่มเติม
{--mlinkarticle=2503--}บทที่ 15 HTML5 Form Attributes ตอนที่ 1{--mlinkarticle--}

ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน

grid-auto-columns 

grid-auto-columns เป็น Property ใน CSS ใช้เพื่อระบุขนาดสำหรับคอลัมน์ของคอนเทนเนอร์กริดที่มีการสร้างขึ้น

Syntax:

grid-auto-columns: auto|max-content|min-content|length|percentage|minmax(min, max)|initial|inherit;

หากรายการกริดถูกจัดวางไว้ในคอลัมน์ที่ไม่ได้กำหนดขนาดอย่างชัดเจนแทร็กกริด grid-template-columns โดยนัยสำคัญจะถูกสร้างขึ้นเพื่อเก็บไว้ สิ่งนี้สามารถเกิดขึ้นได้โดยการวางตำแหน่งอย่างชัดเจนในคอลัมน์ที่อยู่นอกระยะหรือโดยอัลกอริทึมการจัดตำแหน่งอัตโนมัติเพื่อสร้างคอลัมน์เพิ่มเติม

Property Values:

  • auto : เป็นค่าเริ่มต้น ขนาดถูกกำหนดโดยปริยายตามขนาดของคอนเทนเนอร์

ดังตัวอย่างด้านล่างนี้

<!DOCTYPE html> 
<html> 
	<head> 
		<title> 
			CSS grid-auto-column Property 
		</title> 
			
		<style> 
			.main { 
				display: grid; 
				grid-template-areas: "a a"; 
				grid-gap: 20px; 
				padding: 30px; 
				background-color: green; 
				grid-auto-columns: auto; 
				
			} 
			.GFG { 
				text-align: center; 
				font-size: 35px; 
				background-color: white; 
				padding: 20px 0; 
			} 
		</style> 
	</head> 
		
	<body> 
		<div class = "main"> 
			<div class = "GFG">1</div> 
			<div class = "GFG">2</div> 
			<div class = "GFG">3</div> 
			<div class = "GFG">4</div> 
			<div class = "GFG">5</div> 
		</div> 
	</body> 
</html> 

ผลลัฑธ์ที่ได้

ผลลัพธ์
ผลลัพธ์การใช้ grid-auto-columns Property

จากผลลัพธ์ที่ได้จะเห็นว่า ฝั่งซ้ายและขวานั้นเท่ากัน 

ตัวอย่างที่สอง

<!DOCTYPE html> 
<html> 
	<head> 
		<title> 
			CSS grid-auto-column Property 
		</title> 
			
		<style> 
			.main { 
				display: grid; 
				grid-template-areas: "a a"; 
				grid-gap: 20px; 
				padding: 30px; 
				background-color: green; 
				grid-auto-columns: 8.5cm; 
				
			} 
			.GFG { 
				text-align: center; 
				font-size: 35px; 
				background-color: white; 
				padding: 20px 0; 
			} 
		</style> 
	</head> 
		
	<body> 
		<div class = "main"> 
			<div class = "GFG">1</div> 
			<div class = "GFG">2</div> 
			<div class = "GFG">3</div> 
			<div class = "GFG">4</div> 
			<div class = "GFG">5</div> 
		</div> 
	</body> 
</html> 

จากโค้ดด้านบนเรากำหนดไว้ว่า  grid-auto-columns: 8.5cm;   ผลลัพธ์ที่ได้ดังนี้

ผลลัพธ์
ผลลัพธ์ที่ได้เมื่อกำหนด grid-auto-columns: 8.5cm;

 จากผลลัพธ์เราจะเห็นว่า การวางตำแหน่งหมายเลข 1-5  ด้านขวาจะไม่เท่ากับด้านซ้าย

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน

 

     {--mlinkarticle=2193--}CSS{--mlinkarticle--} ย่อมาจาก Cascading Style Sheet มักเรียกโดยย่อว่า “สไตล์ชีท” คือ ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร {--mlinkarticle=101--}html{--mlinkarticle--}โดยที่ CSS กำหนดกฎเกณฑ์ในการระบุรูปแบบ หรือ “Style” ของเนื้อหาในเอกสาร โดยบทความนี้จะกล่าวถึง การฟิคแถบ Navbar (เมนูบาร์ ซึ่งเป็นส่วนประกอบสำคัญบนเว็บไซด์ ในปัจจุบันอาจจะมีทั้ง {--mlinkarticle=3863--}jQuery{--mlinkarticle--} หรือ JAVASCRIPT ที่มาช่วยให้เราสร้างเมนูบาร์ได้ง่ายขึ้น) โดยใช้ {--mlinkarticle=2187--}JavaScript{--mlinkarticle--}เข้ามาช่วย

     โดยในบทความนี้จะกล่าวถึงการฟิค Navbar ที่เคยฟิคไปแล้ว แต่ในโหมดมือถือจะเลือกให้ฟิคในส่วนที่ต้องการเท่านั้น

 

รูปแบบโค้ด CSS

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

@media (width:320px){   // ขนาดที่กำหนดไว้
.sticky_1 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}
.notst{
    position: relative; 
}

 

รูปแบบโค้ด JavaScript

 <script>
        window.onscroll = function() {myFunction()};
        var navbar = document.getElementById("navbar");
        var navbar_1 = document.getElementById("navbar_1");
        var navbar_2 = document.getElementById("navbar");
        var sticky_1 = navbar_1.offsetTop;
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          }
          if (window.pageYOffset >= sticky_1) {
            navbar_1.classList.add("sticky_1")
            navbar_2.classList.add("notst")
          }
          else {
            navbar_1.classList.remove("sticky_1");
            navbar.classList.remove("sticky");
            navbar_2.classList.remove("notst")
          }
          
        }
          
    </script>

 

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

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: red;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}



#navbar_1 {
  overflow: hidden;
  background-color: red;
}

#navbar_1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar_1 a:hover {
  background-color: #ddd;
  color: black;
}

#navbar_1 a.active {
  background-color: #4CAF50;
  color: white;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}


@media (width:320px){
.sticky_1 {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2000;
}
.notst{
    position: static; 
}
}


</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
</div>

<div id="navbar">
  <a class="active">Home</a>
  <a>News</a>
  <a>Contact</a>
</div>
    
<div id="navbar_1">
  <a class="active">Home_1</a>
  <a>News</a>
  <a>Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation</h3>
  <p>Hello, I am mindphp.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
  <p>I love you.</p>
</div>

<script>
 window.onscroll = function() {myFunction()};
        var navbar = document.getElementById("navbar");
        var navbar_1 = document.getElementById("navbar_1");
        var navbar_2 = document.getElementById("navbar");
        var sticky_1 = navbar_1.offsetTop;
        var sticky = navbar.offsetTop;

        function myFunction() {
          if (window.pageYOffset >= sticky) {
            navbar.classList.add("sticky")
          }
          if (window.pageYOffset >= sticky_1) {
            navbar_1.classList.add("sticky_1")
            navbar_2.classList.add("notst")
          }
          else {
            navbar_1.classList.remove("sticky_1");
            navbar.classList.remove("sticky");
            navbar_2.classList.remove("notst")
          }
          
        }
</script>

</body>
</html>

 

ผลลัพธ์

 

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า desktop

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Desktop
เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Desktop

 

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า desktop

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า desktop
เมื่อเลื่อนเมาส์ Scroll Down ในหน้า desktop

 

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile

เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile
เมื่อยังไม่ได้เลื่อน Scroll Down ในหน้า Mobile

 

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า Mobile

เมื่อเลื่อนเมาส์ Scroll Down  ในหน้า Mobile
เมื่อเลื่อนเมาส์ Scroll Down ในหน้า Mobile

 

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : HTML css CodeIgniter Framework

หมวดหมู่รอง

บทเรียน MySQL Store Procedure เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ MySQL 5.x ศึกษาได้ง่ายๆ แบ่งออกเป็นเรื่องๆ

บทเรียน PostgreSQL Stored Procedures เป็นเนื้อหาสำหรับสอน Store Procedure ด้วยภาษา SQL สำหรับ PostgreSQL แนะนำ ใช้ PostgreSQL เวอร์ชั่น 9.x

บทเรียน Python Framework Flask ในการพัฒนา  Web Application

แนะนำการเขียน Website (เว็บไซต์) ตั้งแต่เริ่มต้นแนะนำทำความรู้จัก โครงสร้างต่างๆ วิธีการคเขียน ตัวอย่างการเขียน ส่วนประกอบที่สำคัญของภาษาโดยใช้ภาษา HTML (เอชทีเอ็มแอล) โดยไม่พึ่งเครื่องมือช่วย ใช้งานได้ทั้ง HTML xHTML สอนพื้นฐาน Tag html ต่างๆ ได้แก่ โครงสร้างภาษา HTML (HyperText Markup Language) วิธีการเขียนภาษา HTML โดยใช้ Notepad หรือ TextEdit ตัวอย่างการเขียนภาษา HTML ส่วนประกอบสำคัญของภาษา HTML

บทเรียน HTML5 (เอชทีเอ็มแอลห้า) ภาษามาร์กอัป ที่ใช้สำหรับเขียน website ที่พัฒนามาจาก HTML ในบทเรียนนี้ก็จะสอนในเรื่อง Tag (แท๊ก) ต่างๆ ของ HTML5 ที่เพิ่มมาจาก HTML4 หรือ xHTML (เอ็กซ์เอชทีเอ็มแอล) ทำความรู้จักตั้งแต่เบื้องต้นก่อนการเริ่มเขียน สามารถเขียนตามได้ มีโค้ดตัวอย่างให้สามารถเขียนตามได้ HTML5 new Elements อิลิเม็นท์ส่วนประกอบใหม่ๆ ใน HTML5 สามารถใช้งานได้ดียิ่งขึ้น HTML5 Canvas แท็กที่ใช้สร้างงานกราฟฟิกเปลี่ยนลูกเล่นการแสดงผลจากเดิม

บทเรียน CSS (ซีเอสเอส) หรือ Cascading Style Sheets ภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML สอนพื้นฐานของ CSS สอนรูปแบบการเขียน Syntax ที่เฉพาะ ใช้สำหรับตกแต่งเอกสาร HTML หรือ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลังการใส่ลูกเล่นให้หน้าเว็บด้วย CSS ความรู้เบื้องต้นเกี่ยวกับ CSS3 ใช้จัดรูปแบบการแสดงผลให้สวยงามขึ้น

บทเรียน เนื้อหา การเขียนเว็บเพจ ภาษา PHP ประวัติความเป็นมาของภาษา PHP ทำความรู้จักประวัติของ php mysql date datetime การใช้งาน math functions การใช้งาน php ส่งเมล send mail การสอดแทรกคำสั่งภาษา PHP ในเอกสาร HTML การใช้ตัวแปรในภาษา PHP การกำหนดค่าของตัวแปร คำอธิบาย Comment หมายเหตุ คอมเม้น ในภาษา PHP ตัวอย่างการใช้ echo เพื่อแสดงข้อความ การใช้ตัวแปรในภาษา PHP

ReactJS เป็น JavaScript library ตัวหนึ่ง สำหรับสร้าง UI (User interfaces) ที่มีการนำไปใช้ใน Facebook, Instagram

บทเรียน php 5 เนื้อหาสอนเขียน PHP5 แบบ OOP การเขียนโปรแกรมเชิงวัตถุใน PHP5 เรียนรู้การเขียนโปรแกรมภาษา PHP แบบ OOP (Object Oriented Programming) ที่จะช่วยให้สามารถเขียนโปรแกรมภาษา PHP ที่เป็นมาตรฐานสากลมากยิ่งขึ้น การสร้าง Methods สำหรับ Class php5  สร้างคลาส และใช้งานคลาส ใน PHP5 OOP Class Constructors in PHP5 ฟังก์ชั่นที่ถูกเรียกใช้งานโดยอัตโนมัติ

บทเรียนสอนการพัฒนา Web Application โดยการใช้ Joomla Framework การเขียนโปรแกรมตามหลัก MVC การสร้าง Component เรียนรู้ MVC แบบ Joomla การใช้ class ติดต่อฐานข้อมูล ของ Joomla สอน JHTML เพื่อสร้าง HTML แบบไม่ต้องเขียน Tag HTML เรียนรู้การสร้าง addon คอมโพเน้นท์ โมดูล ปลั๊กอิน สร้าง Controller สร้าง View ในส่วนที่ไม่ใช่ Template Joomla Model สร้างโฟลเดอร์สำหรับเก็บไฟล์ Model

สอนการเขียนเว็บ ด้วย Yii Framework ซึ่งเป็น PHP Framework ที่มีสมรรถนะสูง สำหรับการพัฒนา Web Application ตั้งแต่เริ่มจนทำเว็บด้วย Yii Framework ได้ Debug ด้วย Unit test สอนตั้งแต่พื้นฐานทำความรู้จัก Yii Framework  ความสามารถเด่นของ Yii Framework หลักการทำงานของ Yii Framework เริ่มต้นใช้ Yii Framework Testing การทดสอบ โปรแกรม Yii Framework โปรแกรมประยุกต์บนเว็บ

บทเรียน SQL สอนคำสั่ง SQL เพื่อการใช้งานที่หลากหลาย และเพื่อความเร็วในการค้นหาข้อมูลจากฐานข้อมูล ชนิดต่างๆ เช่น Mysql, Oracle, SQL SERVER, PGSQL และ SQL มาตรฐานอื่นๆ การใช้ INNER JOIN ชนิดของข้อมูล (Data type) คำสั่ง SQL การใช้ CASE การใช้สูตรทางคณิตต่างๆ ได้แก่ ABS, Power การแปลงชนิดข้อมูล การใช้ Operator การ SELECT ข้อมูล การ INSERT ข้อมูล

เนื้อหา บทเรียน SQL: http://www.mindphp.com/forums/viewforum.php?f=74

บทเรียน สอนการใช้งาน phpMyadmin สอนการช้งานโปรแกรมใช้ในการจัดการฐานข้อมูล Mysql บน browser ด้วย phpMyadmin ทำความรู้จัก phpMyAdmin การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table ในฐานข้อมูล การเพิ่มฟิลด์ Field ในตาราง ที่สร้างไว้แล้ว การป้อนข้อมูลของฟิลด์ Field ในตาราง Table การเพิ่ม user มีวิธีการใช้งานที่ง่ายๆ การลบข้อมูลในฟิลด์ Field การลบฟิลด์ Field ในตาราง การลบฐานข้อมูล Database MySQL วิธีการลบตาราง Table การแก้ไขข้อมูลในฟิลด์ Field การเปลี่ยนชื่อฐานข้อมูล นำเข้า Import ส่งออก Export ฐานข้อมูล นำเข้า Import ส่งออก Export ตาราง Table MySQL

บทเรียนสอนการใช้งาน PgAdmin มารู้จักและติดตั้ง PostgreSQL ระบบการจัดการฐานข้อมูลเชิงวัตถุ-สัมพันธ์ แบบ ORDBMS โดยสามารถใช้รูปแบบคำสั่งของภาษา SQL ได้เกือบทั้งหมด การเชื่อมต่อ SERVER รู้จักส่วนประกอบของโปรแกรม PostgreSQL การเชื่อมต่อฐานข้อมูล Connect to Database การสร้างฐานข้อมูล Create Database การสร้างตาราง Create Table การสร้างคอลัมน์ Column และคีย์หลัก Primary Key ให้กับตาราง Table การป้อนข้อมูลในคอลัมน์ Columns การลบข้อมูล Delete การแก้ไขข้อมูลในคอลัมน์ Columns 

บทเรียน Javascript เป็นการสอน เขียนโปรแกรมภาษา Javascript เบื้องต้น สำหรับ เป็นพื้นความรู้ในการพัฒนเว็บ ที่มีลูกเล่น และใช้คู่กับ CSS มีตัวอย่างโค้ดจาวาสคริปให้ ดาวน์โหลดไปทดลอง รันได้ สอนพื้นฐานการเขียนโปรแกรม ภาษา Javascript ทั้งหมด 19 บทเรียนรู้ง่าย ๆ เข้าใจได้เร็ว วิธีการใช้งาน JavaScript คำสั่งต่างๆ ในการเเสดงผลหน้าเว็บไซต์ Javascript statements คำสั่งที่ให้ทำงานตามลำดับ Comments เขียนข้อความบอกรายละเอียดในโค้ดโปรแกรม การประกาศตัวแปร

บทเรียนสอน AJAX ย่อมาจาก Asynchronous JavaScript and XML PHP AJAX เนื้อหา php Javascript XML บทเรียนการใช้งาน Ajax เทคนิคการเขียน สอนแบบเน้นลงมือปฏิบัติจริง การทำงานของ AJAX สร้าง Ajax ด้วย Jquery Example ควรมีความรู้ พวกภาษาที่ทำงาน บน server เช่น php, jsp, asp อย่างใดอย่างหนึ่งด้วย เพื่อเพิ่มประสิทธิภาพ และ ความสามารถของ AJAX ยิ่งขึ้น aj

บทเรียน Jquery สอน Jquery ตั้งแต่พื้นฐาน จนถึงการนำ jquery ไปใช้กับงานจริง ซึ่ง JavaScript Library ตัวหนึ่งที่นิยมมากในปัจจุบันซึ่งถูกออกแบบมาเพื่อให้การเขียน Javascript ทำความรู้จักกับ Jquery การ Selectors ส่วนที่เลือก การ Event Funtions กำหนดเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ Effects เอฟเฟคต่างๆของ jQuery การมองส่วนต่างๆของหน้าเว็บ DOM = Document Object Model 

บทเรียนออนไลน์ android ประวัติความเป็นมาของ Android วิวัฒนาการ สอนการพัฒนา App android ตั้งแต่พื้นฐานและนำไปใช้ใน อุปกรณ์พกพา ได้จริงๆ พร้อมทั้งแนะนำ เทคนิคต่างๆ ในการพัฒนา App บน android OS การใช้งาน IDE พื้นฐานภาษา JAVA เครื่องมือในการพัฒนาสำหรับมือใหม่ที่เริ่มพัฒนา แนะนำ Android Studio เพราะไม่ต้องตั้งค่าเพิ่มเติม และง่ายต่อการใช้งาน
สำหรับท่านที่ยังไม่รู้ว่า android คืออะไรลองอ่านบทความนี้ 
พูดคุยการพัฒนาและปัญหาการใช้ Android

บทเรียน Python สอนการเขียน ภาษา Python เบื้องต้น Python สามารถพัฒนา Web Application ได้เหมือนกับ ภาษา PHP ,Perl , JSP และ ASP

บทเรียนออนไลน์ Java สอนกาเขียน  พื้นฐาน เรียนรู้ Java ตั้งแต่เบื้องต้น การเขียนโปรแกรมด้วยภาษา Java สอนตั้งแต่ Basic พื้นฐานจนการเขียนโปรแกรมสามารถนำไปใช้งานได้จริง 

เรียนภาษาอังกฤษกับโปรแกรมเมอร์ ฉบับโปรแกรมเมอร์สอน สอนภาษาอังกฤษที่เกี่ยวข้องกับคอมพิวเตอร์ ภาษาคอมพิวเตอร์เรียกว่าอะไร หมายถึงอะไรเรียนรู้ได้จากที่นี่

บทเรียน สอนการใช้ คอมพิวเตอร์พื้นฐาน สอน การใช้งานตั้งค่า Internet ความรู้ทั่วไป เกี่ยวกับคอมพิวเตอร์

หมวดหลัก วีดีโอสอน เขียนโปรแกรม ด้วยภาษาต่าง PHP, Python, Javascript, Odoo Website, Joomla, phpBB, PostgreSQL, Framework ต่างๆ

วีดีโอสอน เขียน php7 พื้นฐานสำหรับนักพัฒนาเว็บไซต์ ทำความรู้จัก php เครื่องมือที่ใช้พัฒนา โปรแกรม ภาษา PHP แนะนำ เครื่องมือ พัฒนา ทำความรู้จัก ตัวแปลใน php - PHP Variable

วีดีโอสอนเขียน Python สำหรับพื้นฐาน สามารถเขียนตามได้ง่าย การเขียน Server Script และ พัฒนาโมดูล OpenERP หรือ Odoo

บทเรียน CSS ความรู้เบื้องต้นเกี่ยวกับ CSS แนะนำ ซีเอสเอส ทำเว็บสวย ตกแต่งเว็บไซต์ให้สวยงามด้วยการใช้ CSS ทำตามได้ไม่ยาก อยากทำเว็บไซต์ให้สวยต้องดู

VDO สอนการใช้โปรแกรมจัดการฐานข้อมูล PostgreSQL สำหรับผู้ใช้งานเบื้องต้น สอนการสร้างฐานข้อมูล (Database) อธิบายเข้าใจง่าย สามารถศึกษาได้จากวีดีโอเลย

VDO สอนการใช้งาน phpBB Webboard (พีเอสพีบีบี เว็บบอร์ด) สอนการใช้งานตั้งแต่พื้นฐาน ไปจนถึงการสร้างเป็นเว็บบอร์ด อธิบายละเอียดสามารถเข้าใจได้ง่าย

VDO สอนการใช้งาน Odoo Website (โอดู เว็บไซต์) สอนการใช้งานเบื้อต้น การปรับแต่งส่วนต่างๆของ Odoo Website สามารถปรับแต่งได้อย่างไรบ้าง รับชมได้จากวีดีโอสอนการใช้งานเลย

VDO สอนการใช้งาน Joomla พื้นฐาน สามารถใช้งานส่วนอะไรได้บ้าง อยากปรับแต่ง Joomla ให้เป็นแบบที่ต้องการต้องทำอย่างไร ศึกษาได้จากวีดีโอ

บทเรียน Python GUI

บทเรียน Python Tensorflow สอนใช้งาน

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เช็คของ ที่ตรวจแล้ว
โดย Kanyarat Kanthawong อ 26 พฤษภาคม 2019 3:48 pm บอร์ด SQL - Database
1
9
อ 26 พฤษภาคม 2019 4:47 pm โดย mindphp
B - Error เข้าระบบ อัตโนมัติ ด้วย facebook
โดย mindphp อ 26 พฤษภาคม 2019 5:57 pm บอร์ด phpbbthailand.com
0
2
อ 26 พฤษภาคม 2019 5:57 pm โดย mindphp
วิธีติดตั้ง Joomla 3.9.6 ตอนที่2
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:42 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 5:42 pm โดย jamepiyawat
วิธีติดตั้ง Joomla 3.9.6 บน Ubuntu ตอนที่1
โดย jamepiyawat ส 25 พฤษภาคม 2019 5:32 pm บอร์ด Joomla user Guide Knowledge
1
26
ส 25 พฤษภาคม 2019 8:10 pm โดย mindphp
รับค่ามาแล้วแต่แปลงไฟล์ไม่ได้ครับ
โดย teenproza7 ส 25 พฤษภาคม 2019 4:36 pm บอร์ด Programming - C/C++ & java & Python
5
27
ส 25 พฤษภาคม 2019 7:33 pm โดย mindphp
คำศัพท์ที่เจอบ่อยในการทำงาน Master data management
โดย nanthiya ส 25 พฤษภาคม 2019 4:29 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
16
ส 25 พฤษภาคม 2019 4:29 pm โดย nanthiya
python รับค่าจาก form แล้วสร้างเป็นไฟล์ เพื่อนำไปใช้ต่อ
โดย teenproza7 ส 25 พฤษภาคม 2019 3:19 pm บอร์ด Programming - C/C++ & java & Python
2
20
ส 25 พฤษภาคม 2019 7:14 pm โดย teenproza7
Localhost คืออะไร
โดย jamepiyawat ส 25 พฤษภาคม 2019 3:04 pm บอร์ด Share Knowledge
0
14
ส 25 พฤษภาคม 2019 3:04 pm โดย jamepiyawat
เจอปัญหา จุมล่าขอ Host จริงส่งเมลออกไม่ได้
โดย mindphp ส 25 พฤษภาคม 2019 1:06 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
0
8
ส 25 พฤษภาคม 2019 1:06 pm โดย mindphp
ที่มาของชื่อกลุ่มดาวคนแบกงู
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:50 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
ส 25 พฤษภาคม 2019 11:50 am โดย jamepiyawat
แปลข้อความเป็นภาษาอื่น ฟีเจอร์ใหม่ใน Microsoft Office
โดย teenproza7 ส 25 พฤษภาคม 2019 11:34 am บอร์ด Microsoft Office Knowledge & line & Etc
0
11
ส 25 พฤษภาคม 2019 11:34 am โดย teenproza7
ราศีที่ 13
โดย jamepiyawat ส 25 พฤษภาคม 2019 11:22 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
8
ส 25 พฤษภาคม 2019 11:22 am โดย jamepiyawat
ทำไมเราถึงเห็นน้ำอยู่กลางถนนนะ?
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:34 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
ส 25 พฤษภาคม 2019 10:34 am โดย jamepiyawat
งานประจำวันที่ 25 พฤษภาคม 2562
โดย nanthiya ส 25 พฤษภาคม 2019 10:21 am บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
4
46
ส 25 พฤษภาคม 2019 7:51 pm โดย nanthiya
งานประจำวันที่ 25 พฤษาภาคม 2562
โดย jamepiyawat ส 25 พฤษภาคม 2019 10:07 am บอร์ด M084 - นายปิยวัช เชาว์วิมล
3
25
ส 25 พฤษภาคม 2019 8:15 pm โดย mindphp
งานประจำวันที่ 25 พฤษภาคม 2562
โดย teenproza7 ส 25 พฤษภาคม 2019 9:52 am บอร์ด M082 - ยศนันท์ ปันคำ
1
11
ส 25 พฤษภาคม 2019 7:40 pm โดย teenproza7
ทดลองสอบ TOEIC ก่อนไปลงสนามจริง
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:33 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 24 พฤษภาคม 2019 7:33 pm โดย teenproza7
แก้เมารถ ขี้เมารถ ขึ้นรถทีไรลำบากตลอด
โดย teenproza7 ศ 24 พฤษภาคม 2019 7:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
22
ศ 24 พฤษภาคม 2019 7:10 pm โดย teenproza7
ใส่เงาให้กับตัวอักษร
โดย jamepiyawat ศ 24 พฤษภาคม 2019 6:06 pm บอร์ด CSS Knowledge
0
22
ศ 24 พฤษภาคม 2019 6:06 pm โดย jamepiyawat
ความรู้และประสบการณ์ก่อนเริ่มงาน
โดย nanthiya ศ 24 พฤษภาคม 2019 5:58 pm บอร์ด M085 - นางสาวนันทิยา ศรีเพียงจันทร์
0
8
ศ 24 พฤษภาคม 2019 5:58 pm โดย nanthiya