การแสดงรูปรอโหลด ด้วย GAJAX
GAJAX.inintLoading(loading,center);ซี่ง loading ใช้สำหรับกำหนด div ที่จะแสดงรูปรอโหลด และ
center สำหรับกำหนดว่าจะแสดง loading กลางจอภาพหรือไม่
คำสั่ง inintLoading() นี้จะสามารถใช้ได้บน GAjaxและ GFormและ Gloader ซึ่งจะมีการทำงานที่เหมือนๆกันครับ
โดยปกติแล้ว คำสั่งนี้เป็นแค่การกำหนด loading ให้กับ class เท่านั้น ส่วนการแสดงผล หรือ ซ่อน จะเป็นหน้าที่ของ class ในการจัดการเป็นการภายใน โดยจะทำการแสดง loading เมื่อมีการเรียกใช้หรือทำการส่ง และ ทำการซ่อนอัตโนมัติเมื่อได้รับค่ากลับมาเรียบร้อยแล้ว
ในส่วนของพื้นที่แสดงผลรูปรอโหลด เราสามารถใช้ div ในการกำหนดเป็นพื้นที่แสดงผลได้ โดยใช้ร่วมกับ การกำหนด CSS เพื่อให้สวยงาม
<div id="wait"> </div>
<style type="text/css">
div#wait {
background:transparent url(img/loading.gif) no-repeat scroll center center;
width:48px;
height:48px;
position:absolute; /* เพื่อให้สมารถแสดงกลางจอภาพได้ */
display:none; /* ซ่อนไว้ก่อน */
}
</style>ตัวอย่างด้านบน เป็นการกำหนด loading แบบของเว็บผมนี้ครับสำหรับในการแสดงรูปรอโหลด เมื่อทำการเลือกหน้าต่างๆ โดยที่เมื่อเรียกใช้ inintLoading() เราต้องกำหนดให้ center เป็น true ซึ่งหมายถึงการแสดงรูปรอโหลดกลางจอภาพ ดังโค้ด ด่านล่าง
var req = new GAjax();
req.inintLoading('wait', true);
req.send('modules/member/chklogin.php' , req.getRequestBody(GEvent.element(event)) , function(xhr) {
// do something
});สำหรับอีกแบบ เมื่อมีการกำหนดให้ center เป็น false ซึ่งหมายถึงการแสดง loadding ตรงจุดที่มันอยู่ เช่นการแสดง loading ข้างๆ input เมือทำการประมวลผลเฉพาะทีี่ input นั้น (เช่นในขณะที่ส่งชื่อไปตรวจสอบชื่อซ้ำด้วย Ajax) ซี่งข้อแตกต่างสำหรับแบบที่ 2 นี้ก็คือ กำหนดให้ center เป็น false และ CSS ที่แตกต่างกันเล็กน้อย โดยเฉพาะในส่วนที่จะทำการซ่อนรูปรอโหลด
<div id="save_wait">กำลังบันทึก...</div>
<style type="text/css">
#save_wait {
background: transparent url(img/wait.gif) 0 50% no-repeat;
color: #F00;
margin-left: 5px;
padding-left: 20px;
visibility: hidden; /* ซ่อนไว้ก่อน */
}
</style>