虽然JQuery有很多类似的插件,我也试过好多个,一直都没有找到一个适合自已的,总是感觉使用不能满足我的要求。
Javascript的浮动窗口已经是很老的应用,但网上很少有兼容性很好,使用又方便的功能,有的往往只是支持IE,而且问题多多,不方便应用到具体的项目中。最近我的项目里面又需要用到这个东西,以前自已都是直接写脚本来实现,但这次用到的地方比较多,所以只有写成一个插件的型式以方便多个地方调用。
这个我是在JQuery的框架上面开发的一个插件,已经完成常用的一些功能,后面慢慢加入一些实用的东西。
现在的功能有:
居中显示、
模式窗口、
弹出效果、
拖动功能它主要是实现让一个区域浮动起来,并加入可拖动的功能。
这样的做法好处在于,你可以在哪个区域里面加入任何代码,最好的应用是配合iframe,比如跟我以前做的 AjaxUpload结合,效果很爽(这个我已经在我的项目里面使用)。
多的不说,看看代码和演示。
此插件必须配合
jquery.js 和
jquery.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可拖动的模式窗口
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 ...
实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用图片实现质感导航条 72 1.9 下拉菜单式导航条 73 实例047 二...
12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的...
窗口缩放时图表自动缩放无需刷新,可通过拖动浏览器窗口大小测试。 图表定时刷新重绘效果,可分别指定需要和不需要刷新的图表。这里仅是前端展示用,也可配合异步加载数据后重绘图表。 页面显示时钟、城市定位和天气...
12.23 获取模式窗口的值 第13章 日期和时间特效 13.1 指定时间关闭页面 13.2 最简单的时间日期特效 13.3 最简单的获取时间的方法 13.4 随日期变换的文本 13.5 输入框的默认值为今天 13.6 时间相加 13.7 5秒后消失的...
5.45 在主窗口上关闭弹出式窗口... 146 5.46 在弹出式窗口上关闭主窗口... 146 5.47 将主窗口中的资料输出到弹出式 窗口中... 147 5.48 将弹出式窗口的资料输入到 主窗口中... 149 5.49 弹出一个自动关闭的...
• 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...
• 5.7.htm 参数变量可变的函数 • 5.8.htm 动态函数 • 5.9.htm encodeURI方法 • 5.10.htm decodeURI方法 • 5.11.htm decodeURI方法 • 5.12.htm decodeURI方法...
React组件库具有经典Windows外观的无模式,可调整大小和可移动对话框。 带有轻量级的窗口管理器,该管理器支持多个对话框和堆栈。总览Win32Dialog窗口的行为与经典Windows OS对话框非常相似。 可以通过左键单击并从...
这个插件的目标不是替代 jQuery UI 的可拖动,而是一个最小的插件,使某些元素在页面上可拖动,即模式窗口。 用法 $ ( '.my-modal-window' ) . dragMe ( ) ; 防止单击某些元素拖动元素。 $ ( '.my-modal-window...
作弊窗口性能设置,在性能模式下移动它时,您会看到整个窗口,而不仅仅是矩形。 可选防止越过屏幕边界。 与role="window-caption"不同,它不会与CSS游标属性发生冲突。 允许拖动到屏幕的顶部以外,这在Windows上...
5:如果你引入了jQuery UI Draggable plugin插件,那这个插件也可以被自由拖动。 详细出处参考:file:///F:/闫洪明/新建文件夹/1alerts/基于jQuery的弹出警告对话框美化插件(警告,确认和提示)_jquery_脚本之家....
它使用了我的的拖动控件,并且由于它位于一个窗口中,因此不需要那么多代码。 现场演示 您可以通过进行尝试。 按Ctrl-Shift-V显示选择模式(请参阅)。 安装 对于第三方网站/幻灯片 要使用GuillotineJS在你需要为...
artDialog是一个轻巧且高度兼容的javascript对话框组件,...功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关闭对话框、定时关闭、自定义位置、菜单模式、拖动、鼠标调节窗口大小...
第 1 章 JavaScript 是什么...............................................1 3 1.1 历史简述..............................................1 1.2 JavaScript 实现................................................
采用XHTML和CSS设计可重用可换肤的WEB站点 asp.net的网址重定向方法的比较:面向搜索引擎友好 也谈 ASP.NET 1.1 中 QueryString 的安全获取写法 ASP.NET运行模式:PageHandlerFactory 利用搜索引擎引用来高亮页面...
13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14、修复了内部$.newId方法的一处错误,特定情况下导致定义了ID的对话框无法弹出 15、删除脚本对IE6 png bug内置支持,之前测试版本自动...
1.20 设置Flash对象的WMode窗口模式 1.21 实现类Twitter的字数限制效果 1.22 提示文本的隐藏与显示 1.23 实现文字闪烁效果 1.24 实现文字动画效果 1.25 实现文字跟随鼠标移动变化的动画效果 1.26 文本域中光标的定位...
本书全面讲授网页设计与制作技术、JavaScript脚本编程和Web数据库应用技术。本书以目前最流行的网页设计三剑客Dreamweaver 8、Fireworks 8和Flash 8作为支撑平台,由浅入深,系统地介绍了网页的构思、规划、制作和...