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

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可拖动的模式窗口

    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 ...

    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秒后消失的...

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

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

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

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

    JavaScript实用范例词典04-14

    5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 窗口中... 147 5.48 将弹出式窗口的资料输入到 主窗口中... 149 5.49 弹出一个自动关闭的...

    精通javascript

    • 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...

    精通JavaScript

    • 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...

    react-win32dialog:无模式,可调整大小和可移动的对话框,具有经典的Windows外观。 带有支持窗口堆栈的轻量级窗口管理器

    React组件库具有经典Windows外观的无模式,可调整大小和可移动对话框。 带有轻量级的窗口管理器,该管理器支持多个对话框和堆栈。总览Win32Dialog窗口的行为与经典Windows OS对话框非常相似。 可以通过左键单击并从...

    jquery-dragme:一个使用 CSS3 Transforms 拖动元素的超轻量级 jQuery 插件

    这个插件的目标不是替代 jQuery UI 的可拖动,而是一个最小的插件,使某些元素在页面上可拖动,即模式窗口。 用法 $ ( '.my-modal-window' ) . dragMe ( ) ; 防止单击某些元素拖动元素。 $ ( '.my-modal-window...

    Sciter-MovableView:Sciter窗口的可移动视图,允许您使用窗口中的任何元素来移动窗口。 很少有功能

    作弊窗口性能设置,在性能模式下移动它时,您会看到整个窗口,而不仅仅是矩形。 可选防止越过屏幕边界。 与role="window-caption"不同,它不会与CSS游标属性发生冲突。 允许拖动到屏幕的顶部以外,这在Windows上...

    jQuery的弹出警告对话框美化插件

    5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。 详细出处参考:file:///F:/闫洪明/新建文件夹/1alerts/基于jQuery的弹出警告对话框美化插件(警告,确认和提示)_jquery_脚本之家....

    GuillotineJS:GuillotineJS是一点Javascript,可让您在网络演示文稿中使用带摄像头的浮动HTML元素

    它使用了我的的拖动控件,并且由于它位于一个窗口中,因此不需要那么多代码。 现场演示 您可以通过进行尝试。 按Ctrl-Shift-V显示选择模式(请参阅)。 安装 对于第三方网站/幻灯片 要使用GuillotineJS在你需要为...

    对话框组件artDialog2.1.1.zip

    artDialog是一个轻巧且高度兼容的javascript对话框组件,...功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、菜单模式、拖动、鼠标调节窗口大小...

    JavaScript高级教程

    第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................

    asp.net知识库

    采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面...

    artDialog_Demo

    13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14、修复了内部$.newId方法的一处错误,特定情况下导致定义了ID的对话框无法弹出 15、删除脚本对IE6 png bug内置支持,之前测试版本自动...

    超实用的jQuery代码段

    1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位...

    网页与Web程序设计 课件 ppt 机械工业出版社 part1

    本书全面讲授网页设计与制作技术、JavaScript脚本编程和Web数据库应用技术。本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和...

Global site tag (gtag.js) - Google Analytics