โดย secivon » 20/04/2011 10:30 am
แทรกโค้ดไว้หน่อยนะครับ
โค้ด: เลือกทั้งหมด
<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 เป็นอะไรน่ะครับ - -''
- แนบไฟล์
-
- tooltip.rar
- code เดียวกัน open ได้เลยครับ
javascript code อยู่ที่ original site แล้ว - (770 ไบต์) ดาวน์โหลดแล้ว 326 ครั้ง
แทรกโค้ดไว้หน่อยนะครับ
[code]<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>
[/code]
จากโค้ดคร่าวๆนี้ ผมอยาก 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 เป็นอะไรน่ะครับ - -''