<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Grass still Green &#187; jquery</title>
	<atom:link href="http://wegrass.com/article/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://wegrass.com</link>
	<description>All About Web Development</description>
	<lastBuildDate>Fri, 13 Aug 2010 15:52:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>สร้างนาฬิกาตัวเลขด้วย jClock</title>
		<link>http://wegrass.com/article/java-scripts-digital-clock-with-jclock/</link>
		<comments>http://wegrass.com/article/java-scripts-digital-clock-with-jclock/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 18:11:45 +0000</pubDate>
		<dc:creator>Nutrawee</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jClock]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[ความรู้]]></category>

		<guid isPermaLink="false">http://wegrass.com/?p=987</guid>
		<description><![CDATA[พอดีผมกำลังทำโปรเจคที่ได้ออกแบบให้มีนาฬิกาแบบตัวเลขติดอยู่บนหน้าเว็บเพจด้วย อย่างน้อยมันต้องมีซักคนบนโลกที่เคยทำแบบนี้ไปแล้ว ผมจึงทำการออกตามหาว่ามีใครทำสคริปส์แบบนี้ไว้รึปล่าว แล้วในที่สุดก็เจอคนใจดีชื่อนาย Doug Sparling เค้าก็เป็นคนสร้าง jClock ซึ่งทำให้การสร้างนาฬิการบนเว็บเพจที่ง่ายอยู่แล้วกลายเป็นง่ายเงอร์ (ขั้นสองของ ง่าย) เขียนมาตั้งยาวไม่ได้มีสาระอะไรเลย มาเริ่มกันเลยดีกว่าครับ
สิ่งที่ต้องใช้

jQuery จาวาสคริปส์เฟรมเวิร์ค มันมีหลายแบบนะครับ เลือกเอาตามใจชอบได้เลย แต่ถ้าหาไม่เจอก็ คลิกเพื่อดาวน์โหลด jQuery 1.4.2 minified
jClock ปลั๊กอินของ jQuery ถ้าหาที่โหลดไม่เจอก็ คลิกเพื่อดาวน์โหลด jClock

แนวคิด
หน้าที่ของ jClock คือวาง text บ่งบอกเวลา ลงใน html element (เช่น &#60;p&#62; &#60;span&#62; &#60;div&#62; เป็นต้น) ที่เรากำหนด ดังนั้นสิ่งที่เราจะทำคือ สร้าง html element ขึ้นมา กำหนด css เพื่อควบคุมการแสดงผล จัดรูปแบบให้สวยงาม เมื่อพอใจแล้วก็บอกให้ jClock ใส่ข้อมูลเวลาลงใน element ที่ต้องการครับ
เริ่มกันเลย
เริ่มจากการออกแบบก่อนนะครับ อันนี้แล้วแต่ชอบเลยครับ ส่วนผมออกแบบได้ดังรูปด้านล่างครับ


เวลาออกแบบ ให้คิดไปด้วยนะครับว่าจะวางโครงสร้าง [...]]]></description>
		<wfw:commentRss>http://wegrass.com/article/java-scripts-digital-clock-with-jclock/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Drag &amp; Drop from scratch (return)</title>
		<link>http://wegrass.com/article/drag-drop-from-scratch/</link>
		<comments>http://wegrass.com/article/drag-drop-from-scratch/#comments</comments>
		<pubDate>Wed, 17 Feb 2010 08:40:29 +0000</pubDate>
		<dc:creator>Nutrawee</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[drag & drop]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[ความรู้]]></category>

		<guid isPermaLink="false">http://obbon.net/?p=123</guid>
		<description><![CDATA[หลายคนอาจคิดว่า Drag &#38; Drop นั้นต้องทำยากแน่ๆ แต่ความจริงแล้วการ coding ไม่ยากเลย แต่ความยากมันอยู่ที่การนำไปใช้ บทความนี้จะบอกว่าทำอย่างไร ส่วนจะเอาไปใช้อย่างไรนั้น ต้องลองนำไปต่อยอดดูนะคับ  ว่าแล้วก็มาจับกบกันเต๊อะ 



Obbs &#38; Basket
เริ่มแรกเราต้องสร้างเพจที่มีกบและตะกร้าก่อนนะคับ โดยสร้างไฟล์ html ไฟล์ obb.html ซึ่งจะทำหน้าที่เป็นหน้าเว็ปเพจของเรานะคับ และสร้าง style sheet ไฟล์ ชื่อ obb.css จากนั้นผูกทั้งสองไฟล์เข้าด้วยกัน เป็นอันเสร็จพิธี
// obb.html นะคับ
&#60;html&#62;

  &#60;head&#62;
    &#60;link media="screen" type="text/css" href="obb.css" rel="stylesheet"&#62;
  &#60;/head&#62;

  &#60;body&#62;
    &#60;div class="obb" id="1"&#62;&#60;/div&#62;
    [...]]]></description>
		<wfw:commentRss>http://wegrass.com/article/drag-drop-from-scratch/feed/</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>jQuery Selectors &#8211; Basic</title>
		<link>http://wegrass.com/article/jquery-selectors-basic/</link>
		<comments>http://wegrass.com/article/jquery-selectors-basic/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 01:41:56 +0000</pubDate>
		<dc:creator>Nutrawee</dc:creator>
				<category><![CDATA[Misc]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[สาระ]]></category>

		<guid isPermaLink="false">http://wegrass.com/?p=827</guid>
		<description><![CDATA[ขอเปรียบให้เว็บเพจเป็นตู้ปลา ให้ข้อมูลต่างๆ เป็นปลาที่แหวกว่ายอยู่ในตู้  ให้ jQuery คือพ่อค้า เราเป็นลูกค้า ถ้าเราอยากได้ปลาทอง เราก็บอกพ่อค้าว่า &#8220;พี่คับ เอาปลาทองตัวนึง&#8221; อยากได้ปลาทองสีดำก็บอกพ่อค้าว่า &#8220;พี่คับ เอาปลาทองตัวสีดำ ตัวนั้นคับ&#8221; นี่แหละคับ Selectors
แนะนำตัวละคร
ผมจะอธิบายด้วยภาพนะคับ แขกรับเชิญคือกบน้อยน่ารักผู้พิทักษ์แห่งดวงจันทร์ 3 ตัว ชื่ออีแดง อีเขียว และ อีน้ำเงินนะคับ ทั้งสามตัวรักกันเหมือนพี่น้อง แต่ละตัวมีไข่ตัวละ 2 ฟอง (ถ้ารู้สึกว่าไร้สาระก็ข้ามไปเลยนะคับ &#8211; -&#8221; อันนี้ผมไม่บังคับ)


ขอโทษด้วยนะคับที่โค๊ดเป็นรูปภาพ เหตุผลคือผมยังหาวิธี &#8220;เขียนโค๊ดลงใน WordPress แบบที่ไม่ก่อให้เกิดปัญหาภายหลัง&#8221; ไม่ได้เลยคับ

กบแต่ละตัวก็คือ tag DIV ซึ่งมี class=&#8221;obb&#8221; จำแนกแต่ละตัวด้วย id ที่แตกต่างกันคับ
ส่วน tag P ซึ่งมี class=&#8221;obb-word&#8221; ก็คือคำพูดของกบแต่ละตัว ไม่จำเป็นต้องมี id เพราะมันอยู่ใน DIV ซึ่งมี [...]]]></description>
		<wfw:commentRss>http://wegrass.com/article/jquery-selectors-basic/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
