GElement หัวใจของ GAjax
GElement เป็น class ที่สำคัญที่สุดของ GAjax เนื่องจากมันจะถูกรวมเข้ากับ Element ต่างๆ ของ DOM เพื่อเพิ่มเติมคุณสมบัติของมัน เพื่อให้ Element นั้นๆ มีคุณสมบัติเพิ่มเติมหรือสามารถใช้คำสั่ง Javascript กับ Element นั้นๆ ได้อย่าง Cross Browser
การเรียกใช้งาน GElement
$G() เป็นคำสั่งแบบสั้นสำหรับการเรียกใช้งาน GElement
element_id สามารถระบุเป็น id ของ Element หรือ name หรือ DOM ก้ได้ เช่น
เราสามารถเข้าถึง Element ด้านบนได้ด้วยวิธีต่อไปนี้
เมื่อรวม Element ที่ต้องการเข้ากับ GElement แล้ว จะทำให้เราสามารถเรียกใช้คำสั่งของ GElement ได้จากตัว Element เอง และนอกจากนี้ เรายังสามารถเรียกใช้งาน คำสั่งพื้นฐานของ Element ได้เหมือนเดิมด้วย
การเรียกใช้งาน GElement
var e = $G('element_id')
$G() เป็นคำสั่งแบบสั้นสำหรับการเรียกใช้งาน GElement
element_id สามารถระบุเป็น id ของ Element หรือ name หรือ DOM ก้ได้ เช่น
<input type="text" id="input_id" name="input_name" />
เราสามารถเข้าถึง Element ด้านบนได้ด้วยวิธีต่อไปนี้
// เรียกใช้ด้วย id
var input = $G('input_id');
// เรียกใช้ด้วย name
var input = $G('input_name');
// คืนค่า element (DOM) ของ input ทั้งหมด
var inps= document.getElementsByTagName('input');
// เรียกใช้ด้วย DOM
var input = $G(inps[0]);
เมื่อรวม Element ที่ต้องการเข้ากับ GElement แล้ว จะทำให้เราสามารถเรียกใช้คำสั่งของ GElement ได้จากตัว Element เอง และนอกจากนี้ เรายังสามารถเรียกใช้งาน คำสั่งพื้นฐานของ Element ได้เหมือนเดิมด้วย
<input id="text_id" type="text" value="Test" />
<input id="button_id" type="button" value="Test" />
<script type="text/javascript">
$G('button_id').onclick = function(){ // คำสั่งของ DOM ปกติ
$G('text_id').highlight(); // highlight input เมื่อคลิกปุ่ม
};
</script>
ตัวอย่าง