如果使用JS 要弹出一个新窗口要使用如下代码
|
1 |
window.open("http://www.w3school.com.cn","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400" |
所以我就基于jq 写了个小功能 ? element.open();
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
;(function ($){ //定义定义Open的构造函数 var Open = function (ele,opt,url,targets,width,height){ this.$element = ele; this.defaults ={ url:(url ? url : 'http://www.baidu.com'), targets:(targets ? targets : '_blank'), width:(width ? width : '400'), height:(height ? height : '400') } this.option = $.extend({},this.defaults,opt); }; // 定义op 方法 Open.prototype = { op:function(){ var style = '"' + this.option.url + '","target=' + this.option.targets + '","width=' + this.option.width + ',height=' + this.option.height + '"'; var html = 'window.open(' + style + ')'; return eval(html); } }; // 在插件中使用 Open对象 $.fn.open = function(option,url,targets,width,height){ var a = new Open(this,option,url,targets,width,height); return a.op(); } })(jQuery); |
调用
|
1 2 3 4 5 6 |
$(function(){ // 单击按钮弹出新窗口 $("button").bind("click",function(){ $(this).open(null,'http://www.chenzejiang.com','_blank'); }) }) |
我这里的参数是一个一个传递的，有个老外写的是直接多个参数传递的… 我感觉他的挺好的 ，下面这个是他的
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> //if popup block, then new window will not open $.fn.openWindow = function(link, settings) { this.click(function(){ if (link == undefined){ return false; } if (settings == undefined){ window.open(link, "_blank"); } else{ //setting: http://www.w3schools.com/jsref/met_win_open.asp window.open(link, "_blank", settings); } }); }; </script> </head> <body> <a id="a1" href="#">click me</a> <br/> <a id="a2" href="#">click me with settings</a> <script> $(document).ready(function(){ $("#a1").openWindow('http://www.google.com'); $("#a2").openWindow('http://www.google.com', 'toolbar=yes, scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400'); }); </script> </body> </html> |
我的第一个jq 插件 在此记录一下