อธิบายไม่ค่อยถูกแฮะ รบกวนพยายามทำความเข้าใจหน่อยนะครับ - -''
ประมาณว่า ถ้าผมต้องการเขียน jQuery event handler ให้มันไป bind กับ DOM element ที่ generate on-the-fly ( เช่น generate มาจาก AJAX ) เนีย เท่าที่ทราบ คือ jQuery จะใช้ live() ในการ bind object กับ event เอา
ประเด็น คือ เท่าที่ผมดู Tooltip Plugin ผ่านๆมา 2-3 ตัว ( qtip2 , jQuery bubble popup )
ไม่ค่อยพูดถึงกรณีนี้เท่าไหร่อ่ะครับ ส่วนใหญ่จะเป็น static element มากกว่า (ส่วนใหญ่จะเน้นว่าไปดึง dynamic content มาแสดงในตัว tooltip ได้) โดยที่ส่วนใหญ่ plugin พวกนี้ จะเข้าไป handle พวก mouse event เองอยู่แล้ว
คำถามครับ
1.ถ้าผมจะทำให้ on-the-fly DOM นี่ทำงานร่วมกันกับ Tooltips Plugin นี่ มี Plugin ตัวไหนที่เป็น native (ไม่ต้องเขียน code จัดการ bind new Element / Event ) เลยไหมครับ
2.ถ้าจำเป็นต้องใช้ live() เข้ามาช่วยจริงๆ eventType ควรจะต้องเป็นอะไรครับ ( ไม่น่าจะเป็น mouse event ?)
ขอบคุณครับ
ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
Moderator: mindphp
- secivon
- PHP Full Member
- โพสต์: 35
- ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm
ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41239
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
อ่านสองรอบ ล่ะ ยังไม่ค่อยเข้าใจเท่าไร
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
- secivon
- PHP Full Member
- โพสต์: 35
- ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
แทรกโค้ดไว้หน่อยนะครับ
จากโค้ดคร่าวๆนี้ ผมอยาก apply tooltip กับ class ที่เป็น hoverable ทั้งหมด ซึ่งมีทั้ง static DOM และ on-the-fly ที่มาจาก AJAX ครับ (ใน code เอาเป็นว่า inject string ดื้อๆไปละกัน - -'')
ประเด็นคือ
1.เท่าที่ดูมา ไม่มี jQuery tooltip plugin ตัวไหน ที่ bind ตรงนี้ให้โดยอัตโนมัติ (แทบไม่พูดถึงเลย) เพื่อหลีกเลี่ยงความยุ่งยากในการ binding Element / Event (ดู 2. ประกอบ) ก็เลยอยากจะถามว่ามีใครพอรู้จัก Tooltips ที่มี feature ตรงนี้ให้แล้วบ้างไหมครับ
2.ถ้าหลีกเลี่ยงไม่ได้ และจำเป็นต้อง bind เอง , parameter eventType ของ live() เนี่ย ควรจะเป็นอะไรครับ เท่าที่คิดไว้ไม่น่าเป็น mouse event เพราะใน jQuery tooltip plugin น่าจะมีส่วนที่ handle event ตรงนี้ไว้แล้ว?
นั่นก็คือ ผมไม่รู้ว่าจะต้องใช้ parameter eventType ใน line 19 ,22 เป็นอะไรน่ะครับ - -''
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.hoverable').qtip({
content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">' }
, position: { my: 'top center' , at : 'bottom center'}
, style: {
classes: 'ui-tooltip-shadow ui-tooltip-light'
}
});
$('#main').html('<div class="hoverable" style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
$('.hoverable').live('mouseover', function() {
$(this).css('border','solid 1px red');
});
$('.hoverable').live('mouseout', function() {
$(this).css('border','');
});
});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me! both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>
ประเด็นคือ
1.เท่าที่ดูมา ไม่มี jQuery tooltip plugin ตัวไหน ที่ bind ตรงนี้ให้โดยอัตโนมัติ (แทบไม่พูดถึงเลย) เพื่อหลีกเลี่ยงความยุ่งยากในการ binding Element / Event (ดู 2. ประกอบ) ก็เลยอยากจะถามว่ามีใครพอรู้จัก Tooltips ที่มี feature ตรงนี้ให้แล้วบ้างไหมครับ
2.ถ้าหลีกเลี่ยงไม่ได้ และจำเป็นต้อง bind เอง , parameter eventType ของ live() เนี่ย ควรจะเป็นอะไรครับ เท่าที่คิดไว้ไม่น่าเป็น mouse event เพราะใน jQuery tooltip plugin น่าจะมีส่วนที่ handle event ตรงนี้ไว้แล้ว?
นั่นก็คือ ผมไม่รู้ว่าจะต้องใช้ parameter eventType ใน line 19 ,22 เป็นอะไรน่ะครับ - -''
- แนบไฟล์
-
- tooltip.rar
- code เดียวกัน open ได้เลยครับ
javascript code อยู่ที่ original site แล้ว - (770 ไบต์) ดาวน์โหลดแล้ว 321 ครั้ง
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
- imsn
- PHP Super Member
- โพสต์: 375
- ลงทะเบียนเมื่อ: 07/05/2010 12:58 pm
- ติดต่อ:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
เข้ามาร่วมด้วย ช่วยกันงง
หมึนตึบไปเลยครับ
หมึนตึบไปเลยครับ
ช่วยตอบเพราะอยากโปรโหมทเว็บ คิคิคลิกเลย
หาเพื่อนฝรั่งคุย M ...
หาเพื่อนฝรั่งคุย M ...
- mindphp
- ผู้ดูแลระบบ MindPHP
- โพสต์: 41239
- ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
- ติดต่อ:
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
ลองสร้าง function ไปเรียก อีกที
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา
ไม่รู้ตรงตามต้องการหรือเปล่านะครับ ได้ไม่ได้หรือ เข้าใจผิดยังไง ขออภัยด้วยครับ
ข้อมูลที่ส่งมา เพิ่ม event เข้าไป ให้ event นั้นเรียก function ที่สร้างขึ้นมา
โค้ด: เลือกทั้งหมด
$('#main').html('<div class="hoverable" onclick="getxx()" style="width:500px;height:300px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
โค้ด: เลือกทั้งหมด
function getxx() {
alert('ทดสอบ');
}
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
- secivon
- PHP Full Member
- โพสต์: 35
- ลงทะเบียนเมื่อ: 24/03/2009 5:15 pm
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท
ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง
ตอนนี้ได้ลองแก้ script ดูแล้วครับ แต่แทนที่จะฝัง event ลงไปใน Element ที่สร้างขึ้นมาใหม่
ก็เปลี่ยนเป็นเมื่อมีการจะแก้ไข / สร้าง element ใหม่ ( ในจุดที่จะเอาไปใช้คือรับ response ของ AJAX )
ก็ให้ Qtip ทำการ initialize() ใหม่หมดอีกครั้ง
โค้ด: เลือกทั้งหมด
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.js"></script>
<link rel="stylesheet" type="text/css" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.css" />
<link rel="stylesheet" type="text/css" href="jquery.qtip.css" />
<script type="text/javascript">
$(document).ready(function() {
function doQtipInit() {
$('.hoverable').qtip({
content : {text : 'This is Random Text<img src="http://www.google.com/intl/th/images/logos/translate_logo.gif">' }
, position: { my: 'top center' , at : 'bottom center'}
, style: {
classes: 'ui-tooltip-shadow ui-tooltip-light'
}
});
}
$('.hoverable').live('mouseover', function() {
$(this).css('border','solid 1px red');
});
$('.hoverable').live('mouseout', function() {
$(this).css('border','');
});
$('#btnAddContent').click(function() {
$('#main').append('<div class="hoverable" style="width:500px;height:100px;background:#CCFF33;margin-top:250px;">I\'m on-the-fly element , hover me , live() binding will active , while qtip() will not</div>');
doQtipInit();
})
// first call for static element
doQtipInit();
});
</script>
<div id="demo-tips" class="hoverable" style="background:#E1E1E1;padding:15px;">I'm static Element, Hover me! both live() and qtip() should do the trick</div>
<center id="main"> </center>
<div id="divDebug"></div>
<input type="button" value="Add content" id="btnAddContent">
"อย่าเอาแต่โทษเด็ก ถ้าเด็กมันจะห่วย ดูตัวเองบ้างว่าทำบ้านเมืองไว้เป็นยังไง"
-
- Similar Topics
- ตอบกลับ
- แสดง
- โพสต์ล่าสุด
-
-
โพสต์ใหม่ Selenium IDE - waitFor.. แก้ปัญหา element not found กับ ajax
โดย chbbk » 07/10/2014 6:23 pm » ใน Software testing - 0 ตอบกลับ
- 6835 แสดง
-
โพสต์ล่าสุด โดย chbbk
07/10/2014 6:23 pm
-
-
- 0 ตอบกลับ
- 3365 แสดง
-
โพสต์ล่าสุด โดย jamepiyawat
26/08/2019 5:37 pm
-
-
โพสต์ใหม่ วิธีการสร้าง element ที่ผู้ใช้สามารถปรับขนาดของ element เองได้ด้วย Resizable jquery-UI
โดย ewqolf » 01/03/2023 11:27 am » ใน jQuery & Ajax Knowledge - 0 ตอบกลับ
- 1244 แสดง
-
โพสต์ล่าสุด โดย ewqolf
01/03/2023 11:27 am
-
-
-
โพสต์ใหม่ สร้างกล่องข้อความตัวช่วยเหลือแบบสั้นๆ Tooltip
โดย m038 » 01/08/2016 4:34 pm » ใน Booststap Knowledge - 0 ตอบกลับ
- 1294 แสดง
-
โพสต์ล่าสุด โดย m038
01/08/2016 4:34 pm
-
-
- 0 ตอบกลับ
- 3099 แสดง
-
โพสต์ล่าสุด โดย abdkode
17/01/2019 7:10 pm
-
- 0 ตอบกลับ
- 1694 แสดง
-
โพสต์ล่าสุด โดย Ittichai_chupol
15/11/2019 6:29 pm
ผู้ใช้งานขณะนี้
สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 61