jsp页面调用火狐插件

同事已经开发了火狐插件，用于读取非接触卡的卡片信息，但是页面上不会调用，查了资料之后发现其实蛮简单，就是坑比较多。

<head>
<title>测试</title>    
<embed id="plugin" type="application/intime-plugin" style="display:block;width:50%;height:100px;"></embed>
<script language="JavaScript">
     var plugin = document.getElementById("plugin");
function doTest() {
        plugin.getcard();
        card = plugin.getcard;
        alert(card);
}     
</script>
</head>
<body>    
    <form name="formname">
     <input type="button" onclick="doTest()" value="读卡"/>
    </form>
</body>

embed是插件的载入，getcard()是读取卡的操作，getcard是获得卡号信息。
1、即便使用jQuery，在定位插件所在DOM元素的时候也不能使用jQuery自带的selector，否则读不出来
2、插件不能被隐藏，如果被隐藏之后，就失效了，所以display:none;或者hide()都不可取。

将这个写成了插件，方便读卡操作使用。

(function($){
    $.fn.swipeCpu = function(params){
        var defaults = {
                trigger:false
        };
        $.extend(defaults, params);
        var ele = $(this);
        //height 1px,width 0px 尽可能压缩插件在页面的位置，不能设为0，也不能将display设置none,会导致插件失效；
        ele.after("<embed id=\"plugin-cpu-read\" type=\"application/intime-plugin\" style=\"display:block;height:0px;width:0px;\">");
        var plugin = document.getElementById("plugin-cpu-read");
        plugin.getcard();
        //虽然在插件中定义了该属性是字符串，但是传递出来的是个对象，所以只能先复制到文本框，再取值，再截取
        var cardno = plugin.getcard;
        ele.val(cardno);
        cardno = substrCard($(this).val());
        ele.val(cardno);
        $("#plugin-cpu-read").remove();
        //是否需要触发回车事件
        if(defaults.trigger){
            var event = $.Event("keyup");
            event.keyCode = 13;
            event.which = 13;
            ele.trigger(event);
        }
    };
})(jQuery);

posted on 2013-04-08 18:59 你爸是李刚阅读(328) 评论(1) 编辑收藏

# re: jsp页面调用火狐插件 2013-04-08 23:35 wet

即便使用jQuery，在定位插件所在DOM元素的时候也不能使用jQuery自带的selector，否则读不出来，感谢楼主分享，利博亚洲www.libofun.com
插件不能被隐藏，如果被隐藏之后，就失效了，所以display:none;或者hide()都不可取。

回复更多评论

新用户注册刷新评论列表


只有注册用户登录后才能发表评论。




网站导航: 博客园 IT新闻知识库 C++博客博问管理

# re: jsp页面调用火狐插件 2013-04-08 23:35 wet

氟塑料离心泵www.buybeng.com

jsp页面调用火狐插件

评论

导航

统计

常用链接

留言簿

随笔档案

文章档案

技术网站

行业网站

搜索

最新评论

阅读排行榜

评论排行榜