มี ที่ นี่

Posts Tagged ‘jquery’

แหม่ๆๆๆ ขึ้นต้นซะอย่างดี เลย เสียท่าทางทีมงาน jquery นั้นได้ทำเสร็จเรียบร้อยแล้ว เพราะเมื่อก่อน เวลาที่เรา gen theme roller มานั้น เราต้องเอา theme roller มาแต่งเอง แล้วก็ต้องเข้าไปแก้ .js ด้วย ในแต่ละตัว ให้มี class ตรงกับ theme roller ที่เรา gen มา

คราวที่แล้วเขียน jquery tab ไปด้วย เลย อยากเขียนให้มันเอามาใช้ได้จริงๆ

แต่ตอนนี้ ได้เสร็จแล้ว เหอะๆ load มาตกใจเลย แหม่ ได้ theme roller มา ได้ jquery ได้ ui.jquery ได้ theme roller แถมยังใช้งานได้เลยทันทีด้วย อะไรช่างดีเอี่ยมนี้เนี่ย

ก็ลองไปดูกันเอาเองนะครับ ที่ http://ui.jquery.com

ในการเขียน tab ด้วย jquery นั้นเราทำได้โดยง่าย แต่การแสดงผลนั้นก็เป็นสิ่งที่เราต้องทำ ดังนั้นเราก็ต้องรู้ด้วยว่าการที่ คลิกแต่ละที่นั้น jquery ได้เปลี่ยน a และ span แต่ละตัวไปเป็น css ตัวใหนแล้ว

โดยปกติแล้ว state css จะอยู่ใน /ui.tabs.js เราสามารถเปลี่ยนได้ว่าต้องการให้เป็น class อะไร

hideClass: 'ui-tabs-hide',
idPrefix: 'ui-tabs-',
loadingClass: 'ui-tabs-loading',
navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all',
tabClass: 'ui-state-default ui-corner-top',
panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',

เวลาเปลี่ยนไปแล้วก็อย่าลืมเปลี่ยน  style ใน css ตามด้วยละ เด่วจะเพี้ยนกันหมด

วันก่อนได้เห็น CMS ตัวนึง เป็น CMS E-commerce 2.0 ผมก็เลยได้ลองๆ แล้วได้นำไปเป็นตัวอย่างของ web hosting ด้วย ชื่อว่า Presta Shop

ชื่อเท่ดีใหมเล่า อิอิ ออกแนวฝรั่งเศษหน่อย แต่ไม่รู้ว่า ประเทศอะไรเขียน เพราะผมยังไม่ได้อ่านรายละเอียดมา แต่ดู Demo หน้าร้านแล้วชอบใจเพราะทำงานด้วย jQuery ใช้การแสดงผลของ UI ที่ jquery ด้วย ทำให้ยิ่งชอบใจใหญ่ อิอิ

เอาล่ะครับ มาดูกันเลยแล้วกัน

เว็บหลักอยู่ที่นี่ http://www.prestashop.com/

หน้าเว็บหลักของ Presta Shop ก็ประมาณนี้ครับสวยดี มีความทันสมัยใส่เข้าไปด้วย และยังมีส่วนที่เป็น Demo ให้ดูตรงกลาง ที่บอกว่า Show Case แต่ผมเห็นว่าอยู่ต่างประเทศเลย ลงไว้ที่ Presta Shop Demo ของผมเองด้วย

ตอน install ผมไม่ได้ทำภาพประกอบนะครับ เพราะทำไม่ทัน เร็วจัด อิอิ เวลาลงนั้นคล้ายๆกัน CMS ทั่วไป แต่จะต่างกันที่ใช้ UI ของ jQuery มาใช้ด้วยทำให้มีระดับมากเลยทีเดียว ใส่แค่ username database อะไรนิดนึงก็เสร็จแล้ว

หลังจากนั้นก็ ลบ install ทิ้ง พอจะเข้าหน้าเว็บนี่แหละครับ ที่เป็นที่ที่ผมชอบมากเลยคือ ระบบของ Presta Shop บอกว่าให้เราเปลี่ยน folder name จาก admin เ็ป็นอย่างอื่น แล้วจำเป็นต้องเปลี่ยนด้วย เพราะไม่งั้นไม่ให้เข้า admin มันเป็น security ที่ดีเลยนะครับ

หลักจากเปลี่ยนไปแล้วก็ เข้าได้

หน้าจอสวยเลยทีเดียว เข้ามาจะเจอสถิติเบื้องต้นก่อน แล้วข้างในก็จะมี option อีกหลายอย่างเลยทีเดียวภายในมี module มาให้เยอะพอควรอยู่แล้ว ทำให้ไม่ต้องติดตั้งอะไรเพิ่มมากนัก เพียงแต่ใ่ส่ข้อมูลของสินค้าไปให้ครบถ้วนก็พอ แล้วก็เปลี่ยนหน้าตาอีกนิดหน่อย install  module บางตัว เพิ่ม

วันนี้แค่นี้ก่อนนนะ แล้วจะมาเขียนเรื่องการ ใช้งาน module เพิ่มทีหลัง

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

วันนี้จะเสนอ แท่น แทน แท้นนนนนนน

DOM Elements Creator  ด้วย jQuery เพราะได้ใช้ jQuery มาพักนึงแล้ว ก็ได้แต่อ่านของคนอื่นเค้าเช่น jQueryTip เป็นต้น วันนี้ก็เลยเขียนเองบ้าง

DOM Elements Creator  มีไว้ทำอะไร พูดง่ายๆ ก็คือ เอาไว้ใช้สำหรับสร้าง Element DOM นั้นเอง เพราะการใช้ Dom create Element นึงนั้นอาจจะต้องเขียน code ขึ้นมาหลายบนนทัก คราวนี้ก็เลย ใช้ jQuery และ Plugin ตัวนี้ซะเลย ง่ายดี บรรทัดเดียวจบ

เิริ่มจาก รู้จักกันก่อน  ตัวจริงๆ อยู่ที่ http://plugins.jquery.com/project/DOMECทำ link ให้เลยนะครับ อิอิ ข้างในก็จะมี Official releases ให้ เอา version ล่านสุดแบบใหญ่แหละ จะได้ใช้ได้เต็มที่นะครับ

การใช้งานก็ง่ายมาก include lib นี้ด้วย javascript แล้วก็เรียกใช้ได้ (ต้องมี jQuery ด้วยนะ) จากนั้นก็เขียนแบบนี้

$.create('div', {'id': 'myId'}, 'myText').appendTo('#myElem');

ง่ายๆ คือ

div

สีแดงคือ element ที่เราสร้างขึ้นมา เช่นจะสร้าง span ก็ใส่ span ลงไป

'id': 'myId'

หมายถึง attribute นั่นเอง ใส่หลายอันได้นะ คั่นด้วย, ตามรูปแบบของ javascript

'myText'

หมายถึง innerHTML นั้นเอง หรือข้อมูลที่อยู่ข้างในนั้น บาง element ไม่มี text เช่น <br />

appendTo('#myElem');

สีเขียว คือ Element ที่เราต้องการจะใส่ลงไป โดยในกรณีนี้ก็เรียกจาก id=”myElem” นั่นเอง

ถ้าเราเขียนว่า

$.create('div', {'id': 'innerdiv'}, 'superHTMLinside').appendTo('#wrapper');

ก็จะหมายถึงเราสร้าง div มีข้อมูลข้างในคือ  superHTMLinside ใส่ลง Element ที่มี id คือ rapper

DOM อาจจะมองยากหน่อยแต่ถ้าเข้าใจโครงสร้างของ HTML ออกก็จะง่ายนะครับ