`
hfeeqi
  • 浏览: 13943 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

怎样弹出浮动窗口组件

阅读更多
Here's an exclusive preview just for the Conduiters who hang around the forum:
What's the most annoying thing when trying to embed parts of your site inside your toolbar (usually using HTML components)?
That you only have 20px height to work with...

Not any more!

Introducing our Floating Web Components! (that's a temporary name)
Now you can go beyond the 20px boundaries of your toolbar and create a large window with any web page in it (similar to our weather window).

That means that you can expand the real estate of your toolbar and create windows that display any web pages without being limited to the height of your toolbar.

Just think: all those cool gadgets and widgets that are now widely available on the net can be displayed from within your toolbar!
The possibilities are endless: video players, login forms, advanced search forms, Google gadgets....

Here's how to add a Floating Web Component to your toolbar:
All you need to do is add a link in this format to the URL of any component:
javascript:EBOpenPopHtml(url,width,height);

For example:
javascript:EBOpenPopHtml('http://www.cnn.com',300,400);

Simple ah?
You can add these links to any button, button with menu, or HTML Component.

Currently this only works from version 4.5.132.0 of the toolbar in IE but will be available soon in Firefox too and in Firefox from version 1.5.0.4.

Go crazy and don't forget to share what you've done with this cool new addition.
分享到:
评论
3 楼 hfeeqi 2007-04-08  
Here is a modification to the "18 item To Do List". It will open it in a sized (popup) window, which you can configure as you wish. The code consists of two .HTM(L) pages. The second goes in your toolbar, and it calls the first, which actually has the "To Do List" code. Both of these pages will need to be hosted on YOUR website !!

As stated, the actual "To Do List" code is found HERE:   http://yaldex.com/FSCookies/ToDoList.htm

This code will need to be placed within the <BODY></BODY> section of an .HTML page  called say , "todo_list.htm". The look of the page can be changed by modifying the code following the SECOND  "</script>" from the bottom.

The second page, which you will call from your toolbar, has the Javascript code needed to place the above page in a window. You could call it something like "todo.htm".

This code can be generated HERE:   http://javascript.internet.com/generators/popup-window.html

You will also need to add this code snippet in the <HEAD> section -- It will warn the user if they have Popups disabled (Popups ENABLED) is required for this to work):

Code:

<SCRIPT LANGUAGE="JavaScript">
var popWin = window.open("","ptest","width=1,height=1,left=5000,top=5000",true); 
if (popWin) { 
  popWin.blur(); 
  popWin.close(); 
} else { 
  alert("This function REQUIRES Popups. Please turn Popup Blocker OFF !!"); 
}	
</script>



You can view MY completed .HTML HERE:   http://www.tlchrist.info/toolbar/todo.htm

NOTE: You will need to open this page with an HTML editor in order to see anything !!

Finally, create a button on YOUR toolbar using the "Add Link Button". Put the FULL URL of the "Popup window script" .HTM page in the "Destination URL: " box, i.e..  "http://www.yoursite.com/toolbar/todo.htm". Add an icon, text, and a "hint", and you are finished !!
2 楼 hfeeqi 2007-04-08  
Here is a modification to the "18 item To Do List". It will open it in a sized (popup) window, which you can configure as you wish. The code consists of two .HTM(L) pages. The second goes in your toolbar, and it calls the first, which actually has the "To Do List" code. Both of these pages will need to be hosted on YOUR website !!

As stated, the actual "To Do List" code is found HERE:   http://yaldex.com/FSCookies/ToDoList.htm

This code will need to be placed within the <BODY></BODY> section of an .HTML page  called say , "todo_list.htm". The look of the page can be changed by modifying the code following the SECOND  "</script>" from the bottom.

The second page, which you will call from your toolbar, has the Javascript code needed to place the above page in a window. You could call it something like "todo.htm".

This code can be generated HERE:   http://javascript.internet.com/generators/popup-window.html

You will also need to add this code snippet in the <HEAD> section -- It will warn the user if they have Popups disabled (Popups ENABLED) is required for this to work):

Code:

<SCRIPT LANGUAGE="JavaScript">
var popWin = window.open("","ptest","width=1,height=1,left=5000,top=5000",true);
if (popWin) {
  popWin.blur();
  popWin.close();
} else {
  alert("This function REQUIRES Popups. Please turn Popup Blocker OFF !!");
}
</script>


You can view MY completed .HTML HERE:   http://www.tlchrist.info/toolbar/todo.htm

NOTE: You will need to open this page with an HTML editor in order to see anything !!

Finally, create a button on YOUR toolbar using the "Add Link Button". Put the FULL URL of the "Popup window script" .HTM page in the "Destination URL: " box, i.e..  "http://www.yoursite.com/toolbar/todo.htm". Add an icon, text, and a "hint", and you are finished !!
1 楼 hfeeqi 2007-04-08  
We implemented this in our "Horizon Toolbar" and it works fine.

http://toolbar.youthere1.com

Here are the complete instructions, simplified:

1) Enusre you have the very latest version of your Toolbar (4.5.132 for Internet Explorer).

2) Log into your Conduit account.

3) Add a new "Link Button".

4) Give your button an icon and a name.

5) Paste this in for the "Destination URL": javascript:EBOpenPopHtml('http://www.labpixies.com/campaigns/todo/todo.html',258,246);

6) Ensure "Open in new window" is un-checked.


Save your changes and that's it.

As already stated, this is an excellent component.

相关推荐

    桌面浮动图标弹出窗口360效果

    【标题】:“桌面浮动图标弹出窗口360效果”是指在桌面上实现类似360软件那样的浮动窗口效果,这种效果通常具有高度的交互性和视觉吸引力。360安全卫士等应用中的浮动图标,能够在用户进行其他操作时依然在屏幕边缘...

    jQuery弹出层 可移动层 提示框 浮动层

    在标题提及的案例中,"jQuery弹出层 可移动层 提示框 浮动层",意味着我们需要创建一个不仅可以显示信息,还可以通过用户手势移动的浮动窗口。为了实现这一功能,我们需要结合jQuery的选择器、事件处理和动画方法。...

    各种浮动窗口

    - **Vue.js, React.js, Angular** 等前端框架提供了更便捷的方式创建和管理浮动窗口组件,提高开发效率。 - **Electron** 允许开发者使用Web技术构建跨平台的桌面应用,浮动窗口也可在这样的环境中实现。 - **...

    弹出窗口资料弹出窗口资料

    在IT行业中,弹出窗口是一种常见的用户界面设计元素,它用于显示额外的信息或者与用户进行交互。本资料主要探讨弹出窗口的相关知识点,包括其功能、类型、实现方式以及优化策略。 1. 弹出窗口的功能: 弹出窗口...

    自定义弹出窗口

    在网页或应用程序中,弹出窗口通常是一种浮动元素,它可以覆盖在其他内容之上,吸引用户的注意力。弹出窗口可以包含各种组件,如文本输入框、按钮、选择列表等,以满足不同场景的需求。 在创建自定义弹出窗口时,...

    jQuery 弹出浮动层兼容各种浏览器

    "jQuery 弹出浮动层"指的是在网页上创建一个可以浮动且能在页面上任意位置显示的窗口。这种弹出层通常用于显示警告信息、用户反馈表单或模态对话框。浮动层的关键在于其位置独立于页面其他元素,可以自由移动。 ...

    flex 自动弹出窗口(右下角弹出,右上角弹出)

    - 创建弹出窗口组件:这可以是自定义的Flex组件或者使用内置的`Alert`、`Prompt`等。 - 设置弹出位置:利用`PopUpManager.createPopUp()`方法时,传递一个包含x和y坐标的参数来设置弹出位置。通过计算屏幕宽度和高度...

    js图片轮换+弹出浮动层

    本项目“js图片轮换+弹出浮动层”结合了这两种功能,旨在实现动态展示多张图片以及创建可交互的弹出窗口。下面我们将深入探讨这两个技术的核心原理及其在JavaScript中的实现。 首先,图片轮换是一种常见的网页动态...

    jquery弹出可拖拽的DIV组件

    本知识点主要关注如何使用jQuery实现一个可拖拽的弹出DIV组件,该组件适用于创建可交互的对话框或者浮动窗口。描述中提到,这个组件是组件化的,意味着它可以方便地被复用和定制,而图片需要自行替换,这意味着组件...

    wpf中用用户控件做出来的一个自定义弹出窗口

    在本案例中,这个用户控件被设计成一个弹出窗口,可能包含了标题、内容区域、关闭按钮等基本组件。 弹出窗口的实现通常涉及到Window类或者Popup类。Window是WPF中的顶级窗口,它可以独立显示并拥有自己的生命周期。...

    安卓弹出窗口实现

    首先,`PopupWindow`是Android SDK提供的一种轻量级窗口组件,它可以用来展示一个浮动视图,通常用于模拟对话框的效果。`PopupWindow`具有高度灵活性,可以自定义大小、位置和背景,以及添加各种点击事件。在描述中...

    在intraweb中弹出窗口

    这个组件允许你在页面上创建浮动的、可定制的元素,模拟弹出窗口的效果。将 IWTPopupComponent 添加到你的 IW 页面,然后设置其属性,如大小、位置、样式等,以满足你的需求。 2. **内容填充** 你可以通过 ...

    右下角播放弹出视频播放窗口

    标题中的“右下角播放弹出视频播放窗口”是指一种常见的网页视频播放设计,它允许用户在不离开当前页面的情况下,在屏幕右下角弹出一个小型的浮动窗口来播放视频内容。这种设计常用于新闻网站、社交媒体平台或者在线...

    QQ在线客服浮动窗口

    在线客服浮动窗口通常包含以下几个核心组件: 1. **显示图标**:一个吸引用户注意力的小图标,通常位于网页右下角或角落位置。 2. **弹出窗口**:当用户点击图标时,会弹出一个聊天窗口,包含客服人员的头像、名称...

    6种浮动提示框,弹出窗口,JS代码

    在IT行业中,用户界面设计是至关重要的一环,而浮动提示框和弹出窗口则是提升用户体验的有效工具。本文将深入探讨标题“6种浮动提示框,弹出窗口,JS代码”所涉及的知识点,并结合描述中提到的功能特性进行详细阐述...

    java弹出窗口大全

    1. **jQuery UI Dialog**:这是jQuery UI库的一部分,提供了一种可配置的对话框组件,可以创建模态或非模态的弹出窗口,支持拖动、调整大小等功能。 2. **Bootstrap Modal**:Bootstrap框架中的模态对话框,可以...

    layer弹出层组件 v3.2.0-源码.zip

    在网页设计中,弹出层是一种常见的交互元素,它可以是对话框、提示信息、模态窗口或浮动窗口等形式,用于显示与当前页面内容相关的额外信息或执行特定操作。Layer组件就是专门用来创建这些弹出层的工具,它简化了...

    用于弹出登录框的JQuery弹出浮动层(www1.zcool.com.cn).rar

    本资源“用于弹出登录框的JQuery弹出浮动层”正是为了解决这个问题而设计的。这个压缩包包含了一个名为“应聘弹出层”的文件,我们可以从中学习到如何利用JQuery这一强大的JavaScript库来实现一个动态、易于使用的弹...

    弹出窗口在Web中的应用.pdf

    4. AngularJS Material或Vue.js的弹窗组件:这些现代前端框架提供了开箱即用的弹出窗口组件,支持数据绑定和事件处理。 弹出窗口的用户体验设计也非常重要,包括以下几点: - 明确的关闭按钮:确保用户能轻松关闭弹...

    仿QQ长按消息,组件附近弹出选项框

    这个功能可以通过使用`PopupWindow`组件来实现,它是一个可以浮动在Activity之上的轻量级窗口,能够灵活地展示各种自定义视图。本教程将深入探讨如何利用`PopupWindow`来创建类似QQ的消息长按操作。 首先,`...

Global site tag (gtag.js) - Google Analytics