jQuery插件: jquery.widget.shadowbox.js
/** * 一个简单的设置DIV阴影的插件 * * 功能: * 1. 根据阴影宽度自动调整外层容器宽度,以及透明度 * 2. 可定义ShadowBox的宽度和高度 * 3. 可用CSS样式表定义可视化样式 * * @author joe.he <developerworks@163.com> * @copyright irgs.cn */ (function(jQuery) { jQuery.fn.shadowbox = function(settings) { var self = this; // 默认设置 var defaults = { shodowWidth: 20, css: { outer: 'widget-shadowbox-outer', shadow: 'widget-shadowbox-shadow', } }; if (settings) jQuery.extend(defaults, settings); // 设置阴影层的CSS样式 var shadow = jQuery("<div>") .addClass(defaults.css.shadow) // 关联一个CSS样式规则,可以自定义阴影样式 .width(self.width()) .height(self.height()) .css({ marginTop:defaults.shodowWidth+"px", marginLeft:defaults.shodowWidth+"px", zIndex:-100, position: "absolute" }); var outer = jQuery("<div>") .addClass(defaults.css.outer) .width(self.outerWidth()+defaults.shodowWidth) .height(self.outerHeight()+defaults.shodowWidth) .css({ position: "absolute", zIndex:999 }); this.prepend(shadow).wrap(outer.get()); // 返回jQuery对象用户链式调用 return this; }; })(jQuery);
HTML页面: jquery.widget.shadowbox.html
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript" src="jquery.widgets.shadowbox.js" mce_src="jquery.widgets.shadowbox.js"></mce:script> <title>CSS 阴影层</title> <link type="text/css" rel="stylesheet" href="jquery.widget.shadowbox.css" mce_href="jquery.widget.shadowbox.css" /> </head> <body> <div class="operations"> <a href="javascript:void(0);" mce_href="javascript:void(0);" id="toggleDialog">显示对话框</a> </div> <div class="content"> <div class="titlebar">标题文字</div> <p>jQuery Shadow Box 插件示例</p> <pre> 功能: 1. 根据阴影宽度自动调整外层容器宽度,以及透明度 2. 可定义ShadowBox的宽度和高度 3. 可用CSS样式表定义可视化样式 1) widget-shadowbox-outer: 外层容器 2) widget-shadowbox-shadow: 阴影样式 jQuery(document).ready(function() { jQuery("div.content").shadowbox({ shodowWidth: 5, shadowopacity: 0.2 }); }); </pre> <div class="bottombar"> <input type="submit" value="确定"> <input type="button" value="取消""> </div> </div> <mce:script type="text/javascript"><!-- jQuery(document).ready(function() { var contentDiv = jQuery("div.content"); var api = contentDiv.shadowbox({ shodowWidth: 5 }); $(window).resize(function(){ //console.log("window with: " + $(window).width() + ", window height:" + $(window).height()); }); $("#toggleDialog").click(function(e){ //contentDiv.toggleClass("hide").animate({width:contentDiv.width(), height:contentDiv.height()}); $("div.widget-shadowbox-outer").toggleClass("hide"); }); }); // --></mce:script> </body> </html>
CSS 样式表:
@CHARSET "UTF-8"; body { font-family: Verdana; font-size: 12px; } pre { font-family: Verdana; font-size: 12px; } p { text-indent: 2em; } pre { margin-left: 2em; line-height: 150%; } /*容器层*/ .widget-shadowbox-outer { position: absolute; } /*阴影层*/ .widget-shadowbox-outer .widget-shadowbox-shadow { background: #87A34D; opacity: 0.3; } /*内容层*/ .content { /*定义内容层的背景色,覆盖阴影DIV的背景色*/ border: 1px solid #628D0B; width: 500px; height: 400px; background: #fff; margin: 10px; } .content .titlebar { font-weight: bold; padding: .7em 1em; color: white; background: #87A34D; vertical-align: middle; font-size: 12px; } .content .bottombar { font-weight: bold; padding: .5em 1em; color: black; background: #DCEAC0; text-align: right; color: black; } .content .bottombar input { margin-left: 5px; } .hide {display: none;}
这里下载示例文件
您还没有登录,请您登录后再发表评论
分享jquery带阴影效果折叠菜单dropdown给大家 33.分享下载jquery+Css黑色风格版的手风琴菜单,带动感效果 34.分享一款jquery收缩展开的多级导航(附带手风琴效果示例) 35.国外漂亮动感jquery三级导航菜单插件...
使用 Jquery 类库,代码精简,并且带人性化缺口和阴影。 那个箭头不要以为是用图片做的,其实并没有,完全用 CSS 实现。 我把代码分享出来,新手们赶快研究一下,超实用的效果。 演示1:...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
所有效果说明: 基本的鼠标互动: ...手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table sorters)、页签(tabs) 放大镜效果(magnifier)、阴影效果(shadow)
改变大小所需要的文件 ,此例子需要几个css文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法: $(document).ready(function(){ $("#example").resizable(); }); CSS文件:...
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css 选项说明:http://docs.jquery.com/UI/Resizables/resizable#options 选项实例:...
iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法:1、拖拽函数 iDrag() 或 $.drag();2、对话框函数 iDialog() 或 $....
iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法: •1、拖拽函数 iDrag() 或 $.drag();•2、对话框函数 iDialog() 或 $....
方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...
微博对话框 打地鼠游戏 新手引导页js版 新手引导页jQuery版 极客学院案例 水平导航栏 沿X轴旋转 沿Y轴旋转 沿Z轴旋转 沿中心点旋转 照片墙 爱心表白动画 猫眼电影移动web版 盒模型 盒模型的应用 竖直导航栏 腾讯软件...
相关推荐
分享jquery带阴影效果折叠菜单dropdown给大家 33.分享下载jquery+Css黑色风格版的手风琴菜单,带动感效果 34.分享一款jquery收缩展开的多级导航(附带手风琴效果示例) 35.国外漂亮动感jquery三级导航菜单插件...
使用 Jquery 类库,代码精简,并且带人性化缺口和阴影。 那个箭头不要以为是用图片做的,其实并没有,完全用 CSS 实现。 我把代码分享出来,新手们赶快研究一下,超实用的效果。 演示1:...
最新官方jQuery UI插件 主流特效Demo,绝不含糊。 好东西不需要过多的言辞修饰,下了就知道! 所有效果说明: 基本的鼠标互动: 拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing) 各种...
所有效果说明: 基本的鼠标互动: ...手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条 (sliders)、表格排序(table sorters)、页签(tabs) 放大镜效果(magnifier)、阴影效果(shadow)
改变大小所需要的文件 ,此例子需要几个css文件 jquery.dimensions.js ui.mouse.js ui.resizable.js 用法: $(document).ready(function(){ $("#example").resizable(); }); CSS文件:...
CSS文件:http://dev.jquery.com/view/trunk/themes/flora/flora.all.css 选项说明:http://docs.jquery.com/UI/Resizables/resizable#options 选项实例:...
iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法:1、拖拽函数 iDrag() 或 $.drag();2、对话框函数 iDialog() 或 $....
iDrag & iDialog 介绍特点:iDialog.js依赖于jquery编写的简单易用的对话框,同时还可以通过添加css3,改变对话框的展现动画。提供了两个方法: •1、拖拽函数 iDrag() 或 $.drag();•2、对话框函数 iDialog() 或 $....
方法2:利用xhEditor提供的jQuery插件接口来实现对特定textarea的初始化和传递参数,例: $('#elm1').xheditor(); 或者 $('#elm1').xheditor({tools:'mini'}); 特别说明:两种初始化方法只能选择其中一种使用,如果...
微博对话框 打地鼠游戏 新手引导页js版 新手引导页jQuery版 极客学院案例 水平导航栏 沿X轴旋转 沿Y轴旋转 沿Z轴旋转 沿中心点旋转 照片墙 爱心表白动画 猫眼电影移动web版 盒模型 盒模型的应用 竖直导航栏 腾讯软件...