世界之窗论坛's Archiver

jieke 发表于 2011-1-13 22:50

网页弹层插件制作；

网页弹层插件制作；请教个问题，就是插件的制作方法。我制作了个网页弹层，想把这个弹层制作一个世界之窗2.0的插件。我想要的效果就是在世界之窗浏览器插件栏里点一下相应的ICO图标就能在本页里弹出我的这个弹层插件。不知道怎样实现。请你帮我指点一下。
代码如下：

<script language=javascript>

var bIsCatchFlyBar = false;

var dragClickX = 1;

var dragClickY = 1;

function HideFlyBar(){

divFlyBar.style.visibility = "hidden";

myFlyBarRestorButton.style.display = '';

}

function openFlyBar(){

myload_flybar();

divFlyBar.style.visibility = "visible";

myFlyBarRestorButton.style.display = "";

}

function catchFlyBar(e){

bIsCatchFlyBar = true;

var x=event.x+document.body.scrollLeft;

var y=event.y+document.body.scrollTop;

dragClickX=x-divFlyBar.style.pixelLeft;

dragClickY=y-divFlyBar.style.pixelTop;

divFlyBar.setCapture();

document.onmousemove = moveFlyBar;

}

function releaseFlyBar(e){

bIsCatchFlyBar = false;

divFlyBar.releaseCapture();

document.onmousemove = null;

}

function moveFlyBar(e){

if(bIsCatchFlyBar){

divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;

divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;

}

}

function myload_flybar(){

divFlyBar.style.top=document.body.scrollTop;

divFlyBar.style.left=document.body.offsetWidth-divFlyBar.clientWidth-30+document.body.scrollLeft;

}

</script>

<div id=divFlyBar style='position:absolute;top:0;left:1;visibility:hidden;z-index:100'>

<table style="filter:alpha(opacity=90);background-color:#9A9A9A;" width=192 border="0" cellspacing="1" cellpadding="0">

<tr><td>

<table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle style="background-color:#212121;">

<td>

<img src="z-smallLogo.gif" align="absmiddle" border=0 width=12 height=12>

</td>

<td style="font-size:12px;color:#F4F4F4;font-weight:bold" width=100% align=left> Z-Tips</td><td align=right valign=top><img src="button-Close.gif" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle"  ></td></tr></table></td></tr>

<tr id=flyTailerTr name=flyTailerTr><td id=flyTailerHolder name=flyTailerHolder style='background-color:#eeeeee;color:black;font-weight:bold;font-size:12px;font-family:Courier New;' align=center>

在这里放置东西<br>

<INPUT

onclick="tellPoint('<img src= "57.gif " style="" alt="名称" border="0" >')"

alt="常用"

type=image src="57.gif" name="" style=""></a>

在这里放置东西<br>

</td></tr>

</table>

</div>

<div id=myFlyBarRestorButton name=myFlyBarRestorButton align=center valign=middle><input type=button value='▲按钮 ▲' onclick=javascript[img]http://bbs.ioage.com/cn/images/smilies/default/smilies12.gif[/img]penFlyBar()></div>




把这段代码保存成HTML

jieke 发表于 2011-1-13 23:15

弹层做成插件

[i=s] 本帖最后由 jieke 于 2011-1-19 05:04 编辑 [/i]

网页弹层插件制作；请教个问题，就是插件的制作方法。我制作了个网页弹层，想把这个弹层制作一个世界之窗2.0的插件。我想要的效果就是在世界之窗浏览器插件栏里点一下相应的ICO图标就能在本页里弹出我的这个弹层插件。不知道怎样实现。请帮我指点一下。
代码如下：

<script language=javascript>

var bIsCatchFlyBar = false;

var dragClickX = 1;

var dragClickY = 1;

function HideFlyBar(){

divFlyBar.style.visibility = "hidden";

myFlyBarRestorButton.style.display = '';

}

function openFlyBar(){

myload_flybar();

divFlyBar.style.visibility = "visible";

myFlyBarRestorButton.style.display = "";

}

function catchFlyBar(e){

bIsCatchFlyBar = true;

var x=event.x+document.body.scrollLeft;

var y=event.y+document.body.scrollTop;

dragClickX=x-divFlyBar.style.pixelLeft;

dragClickY=y-divFlyBar.style.pixelTop;

divFlyBar.setCapture();

document.onmousemove = moveFlyBar;

}

function releaseFlyBar(e){

bIsCatchFlyBar = false;

divFlyBar.releaseCapture();

document.onmousemove = null;

}

function moveFlyBar(e){

if(bIsCatchFlyBar){

divFlyBar.style.left = event.x+document.body.scrollLeft-dragClickX;

divFlyBar.style.top = event.y+document.body.scrollTop-dragClickY;

}

}

function myload_flybar(){

divFlyBar.style.top=document.body.scrollTop;

divFlyBar.style.left=document.body.offsetWidth-divFlyBar.clientWidth-30+document.body.scrollLeft;

}

</script>

<div id=divFlyBar style='position:absolute;top:0;left:1;visibility:hidden;z-index:100'>

<table style="filter:alpha(opacity=90);background-color:#9A9A9A;" width=192 border="0" cellspacing="1" cellpadding="0">

<tr><td>

<table width=100% border=0 cellpadding=0 cellspacing=0><tr valign=middle style="background-color:#212121;">

<td>

<img src="z-smallLogo.gif" align="absmiddle" border=0 width=12 height=12>

</td>

<td style="font-size:12px;color:#F4F4F4;font-weight:bold" width=100% align=left> Z-Tips</td><td align=right valign=top><img src="button-Close.gif" onclick=javascript:HideFlyBar() alt="关闭X" title="关闭X" width=11 height=11 border=0 align="absmiddle"  ></td></tr></table></td></tr>

<tr id=flyTailerTr name=flyTailerTr><td id=flyTailerHolder name=flyTailerHolder style='background-color:#eeeeee;color:black;font-weight:bold;font-size:12px;font-family:Courier New;' align=center>

在这里放置东西<br>

<INPUT

onclick="tellPoint('<img src= "57.gif " style="" alt="名称" border="0" >')"

alt="常用"

type=image src="57.gif" name="" style=""></a>

在这里放置东西<br>

</td></tr>

</table>

</div>

<div id=myFlyBarRestorButton name=myFlyBarRestorButton align=center valign=middle><input type=button value='▲按钮 ▲' onclick=javascript[img=36,36]http://bbs.ioage.com/cn/images/smilies/default/smilies12.gif[/img]penFlyBar()></div>




把这段代码保存成HTML

页: [1]

Powered by Discuz! Archiver 7.2  © 2001-2009 Comsenz Inc.