原理很简单： 获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。 $(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。 最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。 具体代码： 代码如下:<!DOCT...
1、下载并修改插件 可以在官网上下载到最新版(http://plugins.jquery.com/files/boxy-0.1.4.zip)，到我写这些文字的时候最新版为0.1.4版，下载解压后有1个主要的js文件：jquery.boxy.js;1个css文件;还有4个图片用于构成弹出层的4个圆角。将文件引入系统中，修改boxy.css，将下面的图片路径修改为项目中实际的位置，如果设置不对会引起图片失效，那时就难看了。 代码如下:/* 将此处的图片修改为相对于css文件的图片文件的路径 */ ....
代码如下:<link href="asyncbox/skins/ZCMS/asyncbox.css" rel="stylesheet" type="text/css" /> <script src="asyncbox/jQuery.v1.4.2.js" type="text/javascript"></script> <script src="asyncbox/AsyncBox.v1.4.js" type="text/javascript"></script> <script type="text/javascript"> function showBox(s){ asyncbox.success(s,asyncbox,function(){ asyncbox.tips(Pass,success) }); } </script> 插件大家可以到AsyncBox 官网...
运行效果后，点击菜单，会弹出一个注册表单，类似于很多论坛的用户注册及登录功能那样，目前还是挺流行的。 弹出层 $(document).ready(function(){ $("#button_2").click(function(){ $("#message").hide(); }); $("#message_show").click(function(){ $("#message").show(); }); $("#message_show2").click(function(){ $("#message").show(); }); $("#message_show3").click(function(){ $("#message").show(); }); $(...
可以一个页面中创建多个弹出窗，被选中的弹出窗会加亮显示，在同一网页中可以有多个弹出窗口，也可以通过双击窗口实现最大化，跟windows像极了。如果想要做一个类似操作系统的页面，用这个插件是完全可以实现的。兼容多种主流浏览器。 最基础的调用方法： 代码如下:$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用： 代码如下:$(#YourContainerDiv).AeroWindow({ WindowTitle: My first ve...
使用该jQuery插件 要想使用该jQuery插件，需要把$(selector).boxy();放在document.ready中。使用合适的选择器表达式替换这里的"selector"，例如："a[rel=boxy],form.with-confirmation"。这会给匹配的元素附加一些行为，如下： 一个href属性中如果锚点包含#，则此锚点相对应的ID的DOM元素的内容就会被添加到boxy对话框中。 如果href锚点内容为其他一些东西，则会试图使用Ajax载入其对应的内容。理想情况下，我们有相同的起源检查和...
代码如下:<script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $(#mySelect).change(function(){ alert($(this).children(option:selected).val()); var p1=$(this).children(option:selected).val();//这就是selected的值 var p2=$(#param2).val();//获取本页面其他标签的值 window.location.href="xx.php?param1="+p1+"¶m2...
1.$.messager.lays(width, height); 该方法主要用来定义弹出窗口的宽度和高度。 2.$.messager.anim(type,speed); 该方法主要定义窗口以什么样的方式和速度呈现。 $.messager.anim("fade",1000); //以fadeIn的动画方式显示 $.messager.anim("show",1000); //以show的动画方式显示 3.$.messager.show(title,text,time); 该方法主要定义窗口显示的内容，以及窗口显示多长时间后进行隐藏。 如果使用默认的标题，则将title设置为0，另外...
我们使用热门的jquery进行设计，同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料，请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318)。下面介绍boxy作为选择器框架的应用。 对于选择器，相信用过招聘网站的人都不会陌生(就是那个点击就弹出的，选择行业、职位和地区的东西)，选择器难点就在于样式调试，主要针对的是IE6。这里介绍行业、职位和地区选择器，下载的Demo包含这三个选择器。 行...
代码： 代码如下://页面代码 （简化） <asp:TextBox ID="tbOperation2" runat="server" onclick="buttonclick($(this))" CssClass="ui-button-icons-only" Text="按钮"></asp:TextBox> <div id="editdialog" title="Basic dialog"> <div> <label onclick="clickEdit();" class="labelbutton"> Edit</label> </div> <div> <label onclick="clickView();" class="labelbutton"> View</label> </div> <div> <label onclick="clickBui...
今天介绍的Jquery Dialog Plugins AeroWindow ，是其中最个性的一款，因为他拥有神似Windows 7 Aero效果的肉身。 效果图:演示: 官方演示 本地演示 特点 独特： 窗口移动时标题栏反光效果 窗口按钮：最小化，减少，最大化和关闭 双击窗口标题栏最大化，缩小 活动窗口突出显示 更改窗口大小（resize） 鼠标拖拽窗口 N多个配置选项 配置选项 窗口标题 窗口的起始位置的X / Y 窗口大小 最小的窗口大小 打开窗口的可用状态（最小化，最大...
演示代码:测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; text-align:right; margin:0px; background:#999999; } #close{ cursor:pointer; } $(function(){ //标题层的高度--提示打开或关...
代码如下:/* 弹出窗口定位到浏览器中间 1. show(options{ height:高度 width:宽度 speed:渐显时间 默认0 container:包含的html内容的jquery对象 model:是否是模态窗口，默认true，模态对话框就是在弹层下面在覆盖遮罩层，参考上篇文章Overlay实现 }) 2. close(speed:淡出时间 默认0) */ Q.Panel = function() { var self = this; self._resetPosition = function() { self._container.css("top", self._getTop()); self._container...
经过几多周折，终于搞出来了，效果图如下： 具体实现： (1) 编写 jquery.divbox.js 的代码： 代码如下:jQuery.fn.extend( { OpenDiv: function() { var sWidth, sHeight; sWidth = window.screen.availWidth; if (window.screen.availHeight > document.body.scrollHeight) { sHeight = window.screen.availHeight; } else { sHeight = document.body.scrollHeight + 20; } var maskObj = document.createElement("div"); maskObj...
原理很简单，通过JS动态构建一个div层，将其插入到body中，然后通过调整position的CSS属性为absolute或fixed，使其脱离原来的文档流的位置。再通过适当的加工美化就成了。 代码如下:<!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class="bar"> <span class="title">标题</span> <a class="close">[关闭]</a> </div> <div class="content">内容部分</div> </div> 这就是两个...