หน้า 1 จากทั้งหมด 1
ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 19/04/2011 7:41 pm
โดย secivon
อธิบายไม่ค่อยถูกแฮะ รบกวนพยายามทำความเข้าใจหน่อยนะครับ - -''
ประมาณว่า ถ้าผมต้องการเขียน 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 ?)
ขอบคุณครับ
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 20/04/2011 1:04 am
โดย mindphp
อ่านสองรอบ ล่ะ ยังไม่ค่อยเข้าใจเท่าไร
พอมีรูปตัวอย่างไหมครับ
แต่ที่เคยทำ DOM จะมีปัญหาเยอะถ้าเราสร้างอะไรขึ้นมาใหม่จาก DOM แล้ว เอามันไปใช้งานต่อ
แต่ถ้าเป็น html จาก Tooltip แล้วเรียกใช้งานอย่างอื่นอีกชั้นไม่น่าจะมีปัญหา
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 20/04/2011 10:30 am
โดย secivon
แทรกโค้ดไว้หน่อยนะครับ
โค้ด: เลือกทั้งหมด
<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>
จากโค้ดคร่าวๆนี้ ผมอยาก 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 เป็นอะไรน่ะครับ - -''
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 20/04/2011 12:56 pm
โดย imsn
เข้ามาร่วมด้วย ช่วยกันงง
หมึนตึบไปเลยครับ
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 20/04/2011 7:24 pm
โดย mindphp
ลองสร้าง 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>');
ไม่รู้ตรงตามต้องการหรือเปล่านะครับ ได้ไม่ได้หรือ เข้าใจผิดยังไง ขออภัยด้วยครับ
Re: ช่วยแนะนำการทำ tooltip ให้มัน active บน DOM element ที่เกิดจาก AJAX ทีครับ
โพสต์แล้ว: 21/04/2011 10:58 am
โดย secivon
โอ้ว ขอบคุณท่าน webmaster มากเลยครับ ผมลืม idea การเรียก function ไปซะสนิท
ตอนนี้ได้ลองแก้ 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">