点击jQuery实时预览插件 [英] Jquery live preview plugin on click

问题描述

我正在尝试使用jquery实时预览插件，该工具在工具提示中将鼠标悬停显示在网站上.您可以在此处签出插件: https://github.com/alanphoon/jquery-live-预览

I'm experimenting with jquery live preview plugin wich shows preview of websites on hover in tooltip. You can check out the plug in here: https://github.com/alanphoon/jquery-live-preview

我想知道是否可以通过单击按钮而不是默认的悬停功能来设置要激活的插件?

I was wondering if it's possible to set up that plug in to be activated on click of button instead of default hover function?

我试图在此处进行设置，但未成功: http://jsfiddle.net/dzorz/YARYp/

I'm trying to set this up here but I did not succeeded: http://jsfiddle.net/dzorz/YARYp/

第一个是鼠标悬停时的默认链接，第二个是我想在上面应用此插件但单击的按钮.

first one is default link on hover and second one is button on which I wanna apply this plug in but on click.

我尝试过.on("click",function...和.click，但是失败了.

I've tried .on("click",function... and .click but it failed..

代码如下:

html:

<a href="http://www.bing.com" target="_blank" class="livepreview">Hover over to preview, click to link!</a>
<br />
<button class="clickpreview">Preview</button>

脚本:

$(document).ready(function() {
            $(".livepreview").livePreview({
                viewWidth: 400,  
                viewHeight: 300,

                });
        });

欢迎任何建议或帮助

谢谢

推荐答案

这就是您要寻找的

$(document).ready(function() {
    $(".livepreview").livePreview({
        viewWidth: 400,  
        viewHeight: 300,

    });

    $("#btn").click(function(){
        $("#link").trigger("mouseenter");
    });
});

FIDDLE

这篇关于点击jQuery实时预览插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！