วันก่อนขอให้เพื่อนที่บริษัทสอนเขียน Jquery ให้ ใช้เวลาเรียน 1 ชม. กว่าๆ เกี่ยวกับ Selector ล้วนๆ ตอนนี้เริ่มเขียนได้บ้างแล้ว รู้สึกว่า Jquery ไม่ยากอย่างที่เคยคิด

โดยปกติแล้วเวลาที่เราเขียนเว็บ เราจะใช้ ID, Class หรือ Tag HTML ต่างๆ ซึ่ง Selectors ก็คือ การบอกตำแหน่งของโค้ดที่เราต้องการใส่ action นั้นๆลงไปนั่นเอง การเลือก selector ใน Jquery เหมือนใน CSS ทุกประการ และมีเพิ่มเติมจาก CSS2 มาบ้างเล็กน้อย ซึ่งรายละเอียดของ Selectors ทั้งหมดสามารถหาอ่านได้ใน Docs ของเว็บ Jquery

การเรียก Selectors

การเรียก Selectors เป็นพื้นฐานที่ควรรู้อย่างแรกในการเรียนรู้ Jquery เพราะเราจำเป็นต้องระบุตำแหน่งที่ต้องการให้เกิด action ที่จะเขียนขึ้นมา โดยเราจะประกาศ ในรูปแบบของ $(selector) โดยในส่วนของ [selector] นั้นจะใส่เป็นตัวแปร string ก็ได้ แล้วแต่สะดวก มาดูตัวอย่างกันเยอะๆเพื่อความเข้าใจดึกว่า

สมมติว่าเรามีโค้ดตามนี้

Hello world


  • ciao!

 

 

สมมติเราต้องการชี้ตำแหน่งของข้อความ "Hello world" เราจะสามารถเรียกตำแหน่งของข้อความนี้เป็น

$("div#content div.a") -> ผลที่ได้ออกมาเป็น div.a ซึ่งมี text อยู่ภายในคือ Hello world

หรือ ถ้าต้องการชี้ตำแหน่งที่ "ciao!" จะเรียกเป็น

$("#content .b ul > li")

สรุปง่ายๆจากตรงนี้ก็คือ เราต้องการทำอะไรตรงไหน เราก็ชี้ไปที่ Tag ที่ครอบตัวนั้นอยู่นั่นเองค่ะ ถ้ามีปัญหาเรื่อง Tag ซ้ำซ้อนมีเยอะ ให้แก้ปัญหาด้วยการใส่ id หรือ class เข้าไปเพื่อให้ระบุตำแหน่งได้ง่ายขึ้นค่ะ

จากโจทย์ เราต้องการเปลี่ยน คำว่า "Hello world" ให้เป็นอักษรสีแดง เราสามารถแก้ CSS ได้ โดยเพิ่ม .css() เข้าไปข้างหลัง selector ตัวอย่างนี้คือ

$("#content .a").css('corlor','red'); -> ผลที่ได้จะได้คำว่า Hello World เป็นสีแดง

เราสามารถเรียกใช้ selector ผ่าน ตัวแปรได้ เช่น จากตัวอย่างเดียวกันนี้สามารถเขียนได้เป็น

var selector = "#content .a";

$(selector).css('corlor','red');

หรือ

var id = "#content";

var class = ".a";

$(id+" "+class).css('corlor','red');

ทั้ง 3 แบบนี้จะให้ผลลัพธ์เดียวกันหมด

ถ้าเราเคยเขียน CSS มาก่อน คงจะคุ้นกับการเขียน Selectors ใน Jquery ไม่มากก็น้อย ส่วนฟังชั่นอื่นๆที่ตามมาข้างหลังมาหลากหลายมาก ทั้ง Event เช่น เมื่อกดเม้าส์ เมื่อกดปุ่ม เป็นต้น หรือการดึงค่าต่างๆใน selectors นั้นๆออกมา เพื่ออ่าน หรือแก้ไขมัน

ตัวอย่างง่ายๆเช่น

จากโค้ดข้างบน ถ้าเราต้องการดึงคำว่า "Hello world" ออกมา เราสามารถสั่งได้เป็น

var a = $("#content .a").text();  -> ค่าของ a จะเท่ากับ "Hello world"

ในที่นี้ คำสั่ง text() จะดึงเฉพาะ text ออกมาเท่านั้น ถ้าต้องการดึง HTML ออกมาให้ใช้คำสั่ง html() แทน

var a = $("#content .a").html();  -> ค่าของ a จะเท่ากับ "Hello world"

หรือ ถ้าต้องการดึงโค้ดทั้งหมดใน class b จะต้องสั่งเป็น

var b = $("#content .b").html();  -> ค่าของ b จะเท่ากับ

  • ciao!

การดึงโค้ดเป็น html เราสามารถนำโค้ดดังกล่าวไปแปะในส่วนอื่นๆได้

นี่เป็นตัวอย่างการใช้ jquery แบบคร่าวๆ ค่ะ คำสั่งอื่นๆสามารถอ่านเพิ่มเติมได้จาก Jquery Docs
 
ถ้าผิดพลาดประการใด ขออภัยด้วยค่ะ มือใหม่ กำลังหัดเขียน

ไม่ได้มาอัพนาน ยุ่งๆ เหนื่อยๆ แต่วันนี้มีเรื่องอยากเล่าให้ฟังกัน

วันนี้ขึ้น BTS ตามปกติประจำวัน ทุกๆวันก็จะเห็นผู้คนกึ่งเดินกึ่งแย่ง เพื่อให้ได้ที่นั่งกัน วันนี้ก็เหลือบไปเห็นฝรั่งตัวใหญ่ ลากรถเข็นเด็กมากับลูกเค้าอีก 2 คน คาดว่าอายุประมาณ 5 ขวบ กำลังน่ารักเลย

แต่ว่า ที่นั่งว่างที่เค้าได้มี 2 ที่สำหรับเด็ก 2 คน และมันอยู่คนละฝั่งของรถ เราก็มองๆห่างๆ(ไม่ได้นั่งติดกับลูกเค้า) สักพักผู้หญิงวัยทำงาน ที่นั่งข้างๆเด็กฝรั่งคนหนึ่ง ก็ถามคุณพ่อหัวทองว่า "Do you want to sit in the same side?" แล้วเธอก็ลุกให้ที่นั่งโดยไม่รอคำตอบจากฝรั่งคนนั้น ฝรั่งงงอยู่ชั่วขณะ แล้วก็แลกที่นั่งกับผู้หญิงคนนั้น จากนั้นผ่านไปไม่นาน ท่ามกลางสายตาของผู้โดยสารรถไฟฟ้า ที่จ้องมองเด็กฝรั่งอยู่นั้น อยู่ๆเด็กฝรั่งคนหนึ่งก็เดินไปหาผู้หญิงคนนั้น แล้วพูดว่า "ขอบคุณขรั๊บ" (ไม่ชัด) พร้อมยืนขนมให้ชิ้นหนึ่ง แล้ววิ่งกลับไปนั่งที่เดิม

ผู้หญิงคนนั้นอึ้งๆ แต่ก็อมยิ้มมีความสุข พร้อมกับถามกลับมาว่า "Thank you, What is it?" จากนั้นเราได้ยินไม่ชัด แต่เธอพูดตอบกลับมาว่า "I like it." แล้วเธอก็เอาขนมชิ้นนั้นเข้าปากไป (เป็นเยลลี่สีแดง) และยิ้มอย่างมีความสุข

เห็นเหตุการณ์เล็กๆ ที่แม้เราเป็นแค่ผู้สังเกตการณ์ ก็ทำให้เรายิ้มได้ สังคมจะน่าอยู่ถ้าเราเริ่มคิดดี ทำดี จากสิ่งเล็กๆ ที่เราสามารถทำได้ง่ายๆ

วันนี้มีความสุขจัง

[Learning] Layer Comps in Photoshop

posted on 16 Jun 2010 01:51 by niciuzza

มาดูกันว่า Layer Comps คืออะไรแล้วมีประโยชน์ในการออกแบบอย่างไร

ที่มา : http://help.adobe.com/en_US/Photoshop/11.0/index.html

Layer Comps คือการเซฟ สถานะของ layers ที่เราทำงานไว้ เพื่อให้แสดงผลได้หลายๆแบบ ในไฟล์ๆเดียว ก็คือมันจะเก็บ state การแสดง layer ต่างๆของเราไว้นั่นเอง โดยจะสามารถเก็บรายละเอียดได้ 3 อย่างคือ

  • Layer visibility คือ การเก็บการ ซ่อน/แสดง ของแต่ละ layer
  • Layer position คือ การเก็บตำแหน่งของภาพ
  • Layer appearance คือ เก็บ Layer Style และ ค่าต่างๆที่ตั้งไว้ใน Blending Option

ความสามารถของ Layer Comps นี้ มีประโยชน์มากๆ สำหรับงานที่มีการแบ่งเป็นหน้าๆ เช่น งานออกแบบเว็บ, ภาพวีดีโอ หรือทำภาพ gif เนื่องจากสามารถแสดงผลได้หลายหน้า ในไฟล์ๆเดียว โดยที่ไม่ต้องยุ่งยากในการจำว่า Layers ไหน ซ่อน หรือ แสดงอยู่ ในหน้านั้นๆ

How to use Layer Comps.

ในการใช้ Layer Comps นั้น ง่ายๆก็แค่เปิดหน้าต่าง Layer Comps ที่เมนู Window > Layer Comps

Layer Comps panel
A. Apply Layer Comp icon    B.Last Document State    C.Selected comps    D.Layer Comp Cannot Be Fully Restored icon

จากนั้นเราก็แค่  สร้าง layer comps ขึ้นมาใหม่ ให้เราตั้งค่าการเก็บตามที่ต้องการ ตั้งชื่อให้เรียบร้อย เพื่อให้จดจำได้ง่าย
สัญลักษณ์  จะแสดง layer comp ปัจจุบัน ถ้าหากเราต้องการ update layer comps ที่สร้างขึ้น ให้เลือก layer comps ที่ต้องการอัพเดท และกดปุ่ม  เพื่ออัพเดท ให้จดจำรูปแบบการแสดงปัจจุบันไว้ใน layer comps นั้น

ส่วน  จะเป็นการแสดง warning ซึ่งมันจะแสดงสัญลักษณ์นี้ ต่อเมื่อ การ save state ของ layer comps นั้น ไม่สามารถแสดงได้เหมือนเดิม คือ มีการ delete layer, merge layer, หรือ แปลง layer เป็น background layer

 นอกจากนี้เราสามารถ export layer comp แต่ละอันออกมาเป็นไฟล์ .jpg หรือ .psd ได้อีกด้วย โดยเลือก File > Scripts > Layer Comps to Files แล้วเลือกชนิดของภาพที่ต้องการ

ตัว layer comps นี้ ยังมีประโยชน์เวลาที่เรา import ไฟล์ ในโปรแกรมอื่นๆด้วย เช่นใน Fireworks เมื่อเรา import .psd  ไฟล์ที่มีการกำหนด layer comps ไว้ จะสามารถ import และแบ่งได้สะดวกว่า หน้าไหนแสดงอย่างไร เป็นต้น