Hovercard เป็น jQuery Plugin ที่ช่วยแสดงข้อความบริเวณที่เรานำเมาส์ไปชี้ ซึ่งสามารถแสดงผลโดยใช้งานคำสั่ง html ได้ข้อความที่ปรากฏจะแสดงขึ้นมาในลักษณะกล่องข้อความด้วยเอฟเฟกแบบ Fade

 

 

การใช้งานนั่นก็ง่ายๆแบบสไตล์ jQuery นั่นล่ะครับ โดยตัวปลั๊กอินนี้มีขนาดค่อนข้างเล็กอยู่แล้วทำให้สามารถใช้งานได้อย่างรวดเร็ว นอกจากนี้ยังรองรับการใช้งานร่วมกับ Facebook และ Twitter ได้อีกด้วย ด้านล่างนี่คือตัวอย่างโค๊ดการใช้งานเจ้า  Hovercard

 

//html---
<p>
jQuery by <label id="demo-basic">John Resig</label> is a cross-browser JS library
designed to simplify the client-side scripting of HTML. It was released 
in January of 2006 at BarCamp NYC. Used by over 46% of the 10,000 most 
visited websites, it's the most popular JavaScript library in use today.
</p>

//plugin script---
<script type="text/javascript">
$(document).ready(function () {
    var hoverHTMLDemoBasic = '<p>' +
        'John Resig is an application developer at Khan Academy. He was a ' +
        'JavaScript tool developer for the Mozilla Corporation. He is also the' +
        'creator and lead developer of the jQuery JavaScript library.<p>';

    $("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
});
</script>

ความคิดเห็นบทความ

แสดงความคิดเห็น