`
dawuafang
  • 浏览: 1192013 次
文章分类
社区版块
存档分类
最新评论

Javascript可拖动的模式窗口

 
阅读更多
虽然JQuery有很多类似的插件,我也试过好多个,一直都没有找到一个适合自已的,总是感觉使用不能满足我的要求。
Javascript的浮动窗口已经是很老的应用,但网上很少有兼容性很好,使用又方便的功能,有的往往只是支持IE,而且问题多多,不方便应用到具体的项目中。最近我的项目里面又需要用到这个东西,以前自已都是直接写脚本来实现,但这次用到的地方比较多,所以只有写成一个插件的型式以方便多个地方调用。
这个我是在JQuery的框架上面开发的一个插件,已经完成常用的一些功能,后面慢慢加入一些实用的东西。
现在的功能有:居中显示模式窗口弹出效果拖动功能
它主要是实现让一个区域浮动起来,并加入可拖动的功能。
这样的做法好处在于,你可以在哪个区域里面加入任何代码,最好的应用是配合iframe,比如跟我以前做的 AjaxUpload结合,效果很爽(这个我已经在我的项目里面使用)。
多的不说,看看代码和演示。

此插件必须配合 jquery.jsjquery.inteface.js 两个一起才可以使用。



Javascirpt调用方法:
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->$("#btnExampleAll").click(function(){
$(
"#panelWindowAll").jWindowOpen({
modal:
true,
center:
true,
drag:
".title",
close:
"#panelWindowAll.close",
closeHoverClass:
"hover",
transfererFrom:
"#btnExampleAll",
transfererClass:
"transferer"
});
});
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> -->
HTML的窗口例子代码:
<!--<br /> <br /> Code highlighting produced by Actipro CodeHighlighter (freeware)<br /> http://www.CodeHighlighter.com/<br /> <br /> --><divclass="window"id="panelWindowAll">
<divclass="title">jquery.jWindowExample2</div>
<divclass="content">
这个是浮动窗口的内容,你可以在这里放iframe或其它的HTML标签,使用方便.
</div>
<divclass="status"><spanclass="resize"></span></div>
</div>

具体的效果以及使用方法请看下面的地址
项目下载地址与演示地址:http://www.wathon.com/opensource/js/jwindow/jwindow.html
源代码下载地址:http://www.wathon.com/opensource/js/jwindow/jquery.jWindow.zip
分享到:
评论

相关推荐

    一个JQuery插件 - Javascript可拖动的模式窗口

    **jQuery插件:JavaScript可拖动的模式窗口** 在网页设计和开发中,模式窗口(Modal Windows)是一种常见的用户交互元素,它可以在不离开当前页面的情况下显示额外的信息或功能。这个"JavaScript可拖动的模式窗口...

    可以拖动的子窗口

    8. **打印可视化**:在描述中提到的“用于打印可视化”可能是指用户可以在预览模式下拖动子窗口,以便查看文档的不同部分。这需要与打印功能紧密结合,允许用户预览打印布局,调整页面方向,缩放比例等。 通过以上...

    在父窗口内可拖动浮动层效果

    在网页设计中,"在父窗口内可拖动浮动层效果"是一种常见的交互设计技术,它使得用户可以在页面上自由移动、最大化、最小化或关闭一个弹出的Div元素。这种设计模式通常用于创建对话框、提示框或者工具面板,为用户...

    弹出DIV可拖动窗口示例(编辑窗口/iframe/等待/确认)

    1. **拖动功能**:为了让弹出的DIV窗口可拖动,开发者通常会监听鼠标的`mousedown`、`mousemove` 和 `mouseup` 事件。当鼠标按下时,记录当前位置;鼠标移动时,根据鼠标位置更新窗口的位置;鼠标释放时,停止更新。...

    javascript自定义浏览器窗口

    在本文中,我们将深入探讨如何利用JavaScript来实现自定义浏览器窗口的功能,包括窗口拖动、放大缩小、最小化以及全屏操作。 一、窗口拖动 在JavaScript中,我们可以使用事件监听来实现窗口拖动的功能。首先,我们...

    JQuery模式窗口及案例!

    JQuery模式窗口是一种在网页中实现弹出对话框的技术,它允许用户在不离开当前页面的情况下与特定内容交互。在Web开发中,模式窗口经常用于显示警告、确认对话框、表单输入或者其他需要用户注意力的场景。JQuery库...

    (web前端设计)artDialog模式窗口

    在Web前端设计中,"artDialog模式窗口"是一种常见的弹出对话框插件,它用于在网页中创建优雅且功能丰富的提示、警告、确认或自定义对话框。artDialog不仅提供了一种美观的用户界面,还支持丰富的定制选项,使得...

    JSP ICQ模式的布局窗口

    在提供的压缩包文件"**IcqWin**"中,可能包含了实现ICQ模式窗口的源代码、样式表(CSS)、图像资源以及可能的示例或测试文件。开发者可以通过研究这些文件来理解和学习如何构建类似的窗口系统。通常,HTML文件定义了...

    X-DragAndResize-Vue:Vue.js指令用于模式窗口的拖动和调整大小

    Vue.js指令用于模式窗口的拖动和调整大小。 例子 # git clone https://github.com/OXOYO/X-DragAndResize-Vue.git # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev ...

    已用JS实现可拖动层

    标题中的“已用JS实现可拖动层”指的是使用JavaScript编程语言实现的一种交互式功能,让用户可以自由地在网页上拖动某个元素,比如一个窗口或者一个面板,使其位置可以根据用户的鼠标操作动态改变。这种技术通常用于...

    自己写的jquery 弹出层插件,可拖动

    标题中的“自己写的jquery 弹出层插件,可拖动”表明这是一个基于jQuery的自定义弹出框插件,具备拖动功能。在Web开发中,弹出层(也称为对话框或模态窗口)常用于显示警告、确认信息或者提供用户交互界面。这个插件...

    JavaScript网页特效范例宝典源码

    实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...

    程序天下:JavaScript实例自学手册

    12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的...

    JS可拖动QQ在线客服代码

    本文将详细解析"JS可拖动QQ在线客服代码"这一主题,帮助你理解如何利用JavaScript实现一个可自定义且兼容主流浏览器的QQ在线客服系统。 首先,让我们了解核心概念: 1. **JavaScript**:JavaScript是一种轻量级的...

    基于JavaScript的前端ECharts图表可视化大屏开发案例源码+项目使用说明.zip

    窗口缩放时图表自动缩放无需刷新,可通过拖动浏览器窗口大小测试。 图表定时刷新重绘效果,可分别指定需要和不需要刷新的图表。这里仅是前端展示用,也可配合异步加载数据后重绘图表。 页面显示时钟、城市定位和天气...

    js可拖拽最大最小化弹出层窗口.zip

    在JavaScript编程领域,实现一个可拖拽、可最大化、最小化和还原的弹出层窗口是一项常见的需求。这种功能在网页应用中广泛使用,比如对话框、设置窗口或者信息提示等。"js可拖拽最大最小化弹出层窗口.zip"这个压缩包...

    《程序天下:JavaScript实例自学手册》光盘源码

    12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的...

    JavaScript中的所有on事件

    `onbeforeactivate`事件在文档或窗口即将成为活动状态之前触发,可用来准备或检查状态,例如加载必要的资源或数据。 #### 4. `onbeforecut` 在用户剪切文本或元素前触发,允许开发者在剪切操作发生前进行拦截或...

    js弹出一个超酷的小窗口

    标题“JS弹出一个超酷的小窗口”明确指出本篇将探讨如何利用JavaScript(简称JS)来创建一个具有视觉吸引力的弹出窗口。在现代网页设计中,弹出窗口常用于展示额外信息、广告或用户交互提示等场景,而使用JS可以使...

    完整版模块_无边框窗口设置.rar

    JavaScript可以用来处理交互逻辑,如模拟窗口拖动。 4. **JavaFX** 或 **Swing**:在Java环境中,JavaFX或Swing库提供了设置窗口样式的API,例如Stage或JFrame的装饰器模式(undecorated属性)。 5. **.NET ...

Global site tag (gtag.js) - Google Analytics