เริ่มต้นกับ jquery

jquery
jquery

23 มี.ค.57 มีโอกาสได้ทดสอบ code ของ jquery ใน 2 รูปแบบ
คือ 1) การใช้ fieldset + legend สร้าง frame ที่สวยงาม
และ 2) การควบคุมวัตถุในการแสดงข้อความแบบต่าง ๆ
อันที่จริง jquery มีความสามารถที่หลากหลาย มากมาย
หนึ่งในบริการที่ผมใช้อยู่คือการดึง googlemap เชื่อมกับ mysql

แต่ที่สนใจขึ้นมา
เพราะนักศึกษา ไวภพ ตุ้ยน้อย นำเสนอโครงงานระบบ อ.ที่ปรึกษา
และนำเสนอ frame ที่มีข้อความกำกับเฟรมอย่างสวยงาม
สอบถามว่าใช้ html หรือใช้อะไร ก็ได้ความว่าใช้ jquery
เพราะถ้าเป็นผมเขียนก็คงใช้ layer ด้วย div
แล้วคุมการกำหนดตำแหน่ง
และใช้ table ธรรมดาให้ข้อความไปทับตารางด้านบน
http://www.thaiall.com/jquery

ประเด็นปัญหาที่มักพบกับ jquery
คือแสดงผลแตกต่างกันในแต่ละ browser
โดยเฉพาะ IE=Internet explorer
จะแสดงผลไม่ตรงกับที่พบใน firefox หรือ chrome
นั่นเป็นข้อพึงระวังในการใช้ jquery

div tag is in HTML 3.2
http://reference.sitepoint.com/html/div

fieldset + legend is in HTML 4.0
http://reference.sitepoint.com/html/fieldset

กรอบแผนอุดมศึกษาระยะยาว 15 ปี : 2551 – 2565

กรอบแผนอุดมศึกษาระยะยาว 15 ปี : 2551 - 2565
กรอบแผนอุดมศึกษาระยะยาว 15 ปี : 2551 - 2565

จากในคู่มือการประกันคุณภาพการศึกษา ปีการศึกษา 2554 – 2556 (Quality Assurance Manual) ที่จัดทำโดยสำนักงานมาตรฐานและประกันคุณภาพการศึกษา มหาวิทยาลัยเนชั่น หน้า 43 ระบุเกณฑ์คุณภาพ ตัวที่ 1.1.1 ว่า การจัดแผนกลยุทธ์ให้มีความสอดคล้องกับ กรอบแผนอุดมศึกษาระยะยาว 15 ปี ฉบัยที่ 2 (พ.ศ.2551 – 2565) โดยกรอบแผนนี้ลงวันที่ 30 กันยายน 2550 มี 72 หน้า เนื้อหาตั้งแต่หน้า 12 – 63 แบ่งออกเป็นข้อได้ถึง 178 ข้อ .. ผมยังอ่านไม่จบเลย แล้วข้อไหนก็เขียนดี รู้สึกดีกับประเทศของเราทุกข้อ
รายละเอียด ที่ http://www.thaiall.com/pdf/he_frame_2_2551_2556.pdf

การนำเสนอภาพด้วย lightbox ใน frame

lightbox
lightbox

19 มี.ค.54 เนื่องจากเห็นตัวอย่างภาพที่นำเสนอใน  facebook.com ซึ่งใช้หลักการคล้ายกับ lightbox script แต่เดิมการนำเสนอภาพที่มีขนาดใหญ่ จะตกขอบของ windows screen แต่ใน facebook ไม่มีตกครับ ประกอบกับคิดจะรวมเอกสารส่วนบุคคลให้มองเห็นทั้งฉบับใน windows screen จึงต้องแก้ไข code ของ light box เพื่อให้การนำเสนอภาพกว้างไม่เกิน 800px และสูงไม่เกิน 500px ซึ่งแก้ไข 2 จุดคือ

จุดแรก แก้แฟ้ม lightbox.css
จาก #lightbox img{width:auto; height:auto;}
เป็น #lightbox img{max-width:800px; max-height:600px;}

จุดที่สอง แก้แฟ้ม lightbox.js
จาก
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}).bind(this);

เป็น
imgPreloader.onload = (function(){
this.lightboxImage.src = this.imageArray[this.activeImage][0];
if (imgPreloader.height > 500 || imgPreloader.width > 800)    {
var sc = imgPreloader.height / 500;
if (imgPreloader.width > 800) { sc = imgPreloader.width / 800; }
this.resizeImageContainer((imgPreloader.width / sc), (imgPreloader.height / sc));
} else {
this.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}
}).bind(this);

แนะนำเว็บไซต์
+ http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
+ http://blog.lysender.com/2010/07/scale-image-lightbox-another-javascript-hack/
+ http://www.thaiall.com/blog/burin/2440/